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">元素，你会看到只有7个元素，而你有8个晶粒的数据。完全缺失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/