如何将正确缩放的 y 轴添加到堆叠的 d3 条形图

Question

我一直在使用Mike Bostock的堆叠条形图(这里：https://bl.ocks.org/mbostock/4679202(。

我已经成功地进行了许多修改，但我坚持的是尝试添加带有刻度和正确缩放值的 y 轴。

我以为只需使用它来完成：

var yAxisRight = d3.svg.axis().scale(y2) //define ticks
.orient("right").ticks(5); 

但是，这会导致整个 Y 轴仅使用一组堆栈的值。 这会导致比例不正确。所有堆栈 COMBINE 的范围值需要用于确定我相信的值范围。

有没有一种简单的方法可以做到这一点，我错过了？对所有列的范围求和。

如果没有，我将如何编写一个函数来根据所有 4 列中的值设置范围？

这是我现在拥有的一个工作 JSfiddle(这是不正确的(： https://jsfiddle.net/1jhm7ths/

Answer 1

如果我正确理解了您要实现的目标，则需要根据堆叠数据而不是原始数据来计算范围。我在第 92 行进行了以下修改，更新了您的 jsFiddle：

y2.domain([0, d3.max(dataByGroup, function(d) { return d3.sum(d.values, function(v) {return v.value;}); })]); //added

这样做是取每个组，计算所有值的总和，并取总和的最大值。

附带说明一下，我不鼓励学习 d3 v3，并尝试专注于 v4 以获得长期支持、最新功能、模块化和大量其他优势。