D3图表与美国政府分析一样

Question

我想将我在D3中使用的图表修改为与美国政府分析相似的图表。我不确定从哪里开始。下面的JSfiddle是我开始的地方。

我是否必须将图表修改为堆积条形图，项目符号图表，或者只是创建recs并在它们之间添加更多空间并在图表上方放置标签？

有没有人做过与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/

现在我需要找到如何在条形之间移动序数类别。

Answer 1

嗯，经过一番尝试，我已经足够接近了。我可以用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);});