d3.js堆积条形图不沿x轴绘制？

Question

我对这个感到困惑，我需要另一双眼睛来帮助我看到我所缺少的东西。我在这里有一个bl.ock：

http://bl.ocks.org/hepplerj/c419baa3abf7363cd2d5

正如您将看到的，一些rect元素未正确地沿x轴绘制。关于我俯瞰的任何指示？非常感谢！

Answer 1

您的代码只是一个小问题。首先，这里有一个与你的bl.ock相同的小提琴：http://jsfiddle.net/gp2ex7fw/

查看来源并计算<g class="bar">个元素，您会看到只有七个，而您有八个数据的数据。 millet/sorghum groats完全丢失了。这会在每个条形图中产生间隙，导致条形图不会填满整个高度。

这是因为代码的以下部分：

d3.select("svg").selectAll("g")
    .data(stackLayout(stackData))
    .enter()
    .append("g")
    .attr("class", "bar")

执行selectAll("g")后，您还要选择之前附加到g元素的第一个svg元素（用于转换）。

修复非常简单。只需将上面的代码更改为：

d3.select("svg").selectAll(".bar")
    .data(stackLayout(stackData))
    .enter()
    .append("g")
    .attr("class", "bar")

现在我们只选择g个class="bar"元素并且不会遗漏任何数据。这是一个工作小提琴：http://jsfiddle.net/gp2ex7fw/1/