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

【问题标题】：How to add a properly scaled y axis to a stacked d3 bar chart如何将正确缩放的 y 轴添加到堆叠的 d3 条形图
【发布时间】：2017-07-17 18:40:02
【问题描述】：

我一直在使用 Mike Bostock 的堆积条形图（此处：https://bl.ocks.org/mbostock/4679202）。

我已经成功地进行了一些修改，但我坚持的是尝试添加一个带有刻度和适当缩放值的 y 轴。

我以为只要用这个就可以了：

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

但是，这会导致只有一组堆栈的值用于整个 Y 轴。这会导致不正确的比例。需要使用所有堆栈 COMBINED 的范围的值来确定我认为的值的范围。

有没有一种我想念的简单方法来做到这一点？对所有列的范围求和。

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

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

【问题讨论】：

带有您的代码的 plnkr 或 jsFiddle 将有助于更好地理解您的问题。作为一个疯狂的盲目猜测，我会说这与你的规模的domain有关......
@HuguesStefanski 这和原来的很相似，但是我添加了一个链接让你看看我到底在做什么。
可以看到例子中，Y轴范围设置为0到14000。但是，它只是从蓝色列中提取这些数字，范围从 0 到 14,000。随着积木的堆叠，它应该从 0 缩放到 ~40,000。

标签： d3.js svg

【解决方案1】：

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

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

它的作用是取每个组，计算所有值的总和，并取总和的最大值。

另一方面，我不鼓励学习 d3 v3，并尝试关注 v4 以获得长期支持、最新功能、模块化和大量其他优势。

【讨论】：

虽然缩放比例仍然不正确。如果您向右看，第一个刻度是 20,000。然而，最大的蓝条实际上是 14,000；它显示超过 20,000。
是的，很遗憾，很多好的示例都是在 v2 和 v3 版本上编写的。我更喜欢 v4，但与大多数语言不同，这个不向后兼容。所以很多这些在 v4 上根本不起作用。
好吧，如果你的意思是使用你的第二个比例（y2）作为你的基本比例，你基本上需要遍历整个例子，并在使用 y1 的地方使用 y2，考虑到以下事实您必须使用 valueOffset 来计算您的身高。我现在没有足够的时间来解决这个问题，我希望它能引导你走上正确的道路。
An here 是堆叠条形图的 v4 示例 :-)
仍然无法确定您的示例哪里出错了。如果您查看文件中的数据，很明显结果应该是什么样子。我们不能在右轴上有与数据不匹配的值。是否可能为每列添加最大值，而不是每个数据点的最大值？