類似美國政府分析的D3圖表

我想修改D3中使用的圖表，使其與美國政府分析中的圖表一致。我不確定從哪裏開始。下面的JSfiddle是我從哪裏開始的。類似美國政府分析的D3圖表

是否必須將圖表修改爲堆積條形圖，子彈圖或簡單地創建可用圖表並在它們之間添加更多空間並在圖表上方放置標籤？

有沒有人做過類似D3的任何事情？

我的出發點：http://jsfiddle.net/Monduiz/drhdtsaq/

Y軸，rects和標籤：

[...] 

var y = d3.scale.ordinal() 
    .domain(["Earnings", "Industry", "Housing", "Jobs"]) 
    .rangeRoundBands([0, height], 0.2); 

[...] 

bar.append("rect") 
    .attr("width", 0) 
    .attr("height", barHeight - 1) 
    .attr("fill", "#9D489A") 
    .attr("width", function(d){return x(d.value);}); 

bar.append("text") 
    .attr("class", "text") 
    .attr("x", function(d) { return x(d.value) - 3; }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.value; }) 
    .attr("fill", "white") 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "14px") 
    .attr("text-anchor", "end");

這就是我想做的事：

編輯

我已經取得了一些進展。更新提琴：http://jsfiddle.net/Monduiz/drhdtsaq/33/

現在我需要找到如何移動酒吧之間的序數類別。

來源

2015-12-08 Monduiz

你的jsfiddle不適合我。看起來解決方案就是你簡單介紹的那個。 –

我早些時候做了一個小小的更新，但它現在適用於我。謝謝拉爾斯的意見。我可能會嘗試在完整值處添加空白灰色條以重新創建完整的灰色條。我不確定。 – Monduiz

好吧，我經過一番嘗試後已經足夠接近了。我可以用CSS拋光東西。

更新撥弄：http://jsfiddle.net/Monduiz/drhdtsaq/66/

基本上，解決方案是創建另一組矩形稱爲第一使用第二組數據的所用比例的全部價值。那麼它只是調整條形的大小和定位標籤。

bar2.append("rect") 
    .attr("height", y.rangeBand()-15) 
    .attr("fill", "#EDEDED") 
    .attr("width", function(d){return x(d);}); 

bar.append("rect") 
    .attr("height", y.rangeBand()-15) 
    .attr("fill", "#FFB340") 
    .attr("width", function(d){return x(d.value);});

來源

2015-12-08 19:46:28 Monduiz

類似美國政府分析的D3圖表

回答

相關問題