D3.js 堆积条形图答案

【问题标题】：D3.js stacked bar chartD3.js 堆积条形图
【发布时间】：2013-11-06 20:14:58
【问题描述】：

我已经花费了足够的时间来修改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); })

如您所见，条形高度超出指定高度。

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

【问题讨论】：

我知道这对您当前的问题没有多大帮助（我不是 d3 的专家），但是如果您只是在寻找一个简单的图表，我发现 d3 太复杂了实现你正在寻找的东西。它非常适合复杂的东西，但对于更简单的东西（如堆叠图表）我通常使用 highcharts highcharts.com/demo/column-stacked
@Pompey 感谢您的建议，但是目前我在 d3.js 上投入了很多时间，所以现在就继续吧。

标签： javascript d3.js bar-chart

【解决方案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 将是=S(y0) - S(y + y0) 或=@ 987654331@，你觉得哪个更好吃。

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

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

【讨论】：

非常感谢您花时间查看我的代码并找到问题所在，以便在创建绘图以使其可口的过程中付出额外的努力。事实上，我在几个小时前确实理解了绘图中的理论，但在设置高度属性时仍然犯了一个小错误，但你做对了。是的，我错过了提到 g 转换为左上角的变化。再次非常感谢。