javascript - D3.js 堆积条形图

Question

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

我的主要变化是:

1:第 10 行反转数组的范围 y = d3.scale.linear().range([高度, 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)将是更接近顶部的点的值，或者具有较低y的点的值> 值，条形的高度将为 = S(y0) - S(y + y0) 或 = abs(S(y0+y) - S(y0))，无论你觉得哪个更美味。

但是，说实话，在我真正把它写下来之前，需要进行大量的试验和错误。然后我进行更多的试验和错误来找到解决方案，并说服自己这张图有帮助。

所以...您的里程可能会有所不同。 :)