D3.js堆积条形图

Question

我已经花了足够的时间来修改stacked bar chart sample，让第二双眼睛去看我做错了什么是明智的。修改后的样本位于js fiddle。

我的主要变化是：

1：在第10行将阵列反转为范围     y = d3.scale.linear().range([height, 0])

2：在第17和22行添加轴

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(format);
var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")

3：第62行更改了y0和y的添加（这可能是创建问题的更改）

.attr("y", function (d) { return y(d.y) - y(d.y0); })

正如您所看到的，条形图正在超出指定高度。

如果有人能告诉我我做错了什么，我会非常感激。我花了太多时间独自一人看。我认为我非常接近，因为图表显示的不是高度问题。

Answer 1

还有一个更改，您没有提到：您现在将包含g的图表转换为左上角而不是左下角，就像原始图中一样。

更改您提到的行后面的两行将解决问题：

            .attr("y", function (d) { return y(d.y + d.y0); })
            .attr("height", function (d) { return y(d.y0) - y(d.y +d.y0); })

Demo

这就是我通常使用反向比例进行这些计算的方法，例如y = d3.scale.linear().range([height, 0])：

此处，点S(y + y0)将是更靠近top或更低y值的点的值，并且栏的height将是be = S(y0) - S(y + y0)或= abs(S(y0+y) - S(y0))，无论哪个更适合你。

然而，说实话，在我真正理解之前，还有大量的试验和错误。然后我做了更多的试验和错误来找到解决方案，并说服自己这个绘图有帮助。

所以...你的里程可能会有所不同。 ：）