Javascript D3.js堆叠条形图

我已经花了足够多的时间修改了，让第二双眼睛看看我做错了什么是明智的。修改后的样品在一个容器中

我的主要改变是：

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的添加（这是可能造成问题的更改）

正如您所看到的，钢筋的高度远远超过了指定的高度

---

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

还有一个变化，您没有提到：您将包含

g

的图表转换为左上角点，而不是原始绘图中的左下角点

围绕您提到的行更改以下两行将解决此问题：

.attr（“y”，函数（d）{返回y（d.y+d.y0）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y+d.y0）；}）

这就是我通常使用倒置比例进行这些计算的方式，例如

y=d3.scale.linear（）.range（[height，0]）

：

在这里，点

S（y+y0）

将是靠近

top

的点的值，或者具有较低的

y

值，并且条的

高度将是=
S（y0）-S（y+y0）
或=
abs（S（y0+y）-S（y0））
，以您觉得更合适的为准

然而，老实说，在我把它写下来之前，有很多的尝试和错误。然后，我做了更多的尝试和错误，以找到解决方案，并说服自己，这幅画有帮助

所以。。。您的里程可能会有所不同。：）
 还有一个变化，您没有提到：您将包含
g
的图表转换为左上角点，而不是左下角点，如原始绘图中所示

围绕您提到的行更改以下两行将解决此问题：

.attr（“y”，函数（d）{返回y（d.y+d.y0）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y+d.y0）；}）


这就是我通常使用倒置比例进行这些计算的方式，例如
y=d3.scale.linear（）.range（[height，0]）
：


在这里，点
S（y+y0）
将是靠近
top
的点的值，或者具有较低的
y
值，并且条的
高度将是=
S（y0）-S（y+y0）
或=
abs（S（y0+y）-S（y0））
，以您觉得更合适的为准

然而，老实说，在我把它写下来之前，有很多的尝试和错误。然后，我做了更多的尝试和错误，以找到解决方案，并说服自己，这幅画有帮助

所以。。。您的里程可能会有所不同。：）
 我知道这对你目前的问题没有多大帮助（我不是d3方面的专家），但如果你只是在寻找一个简单的图表，我发现d3太复杂了，无法实现你想要的。这对于复杂的东西来说是很好的，但是对于更简单的东西（比如堆叠图表），我通常使用highcharts@Pompey谢谢你的建议，但是目前我在d3.js上投入了很多时间，所以现在就继续。我知道这对你目前的问题没有多大帮助（我不是d3方面的专家），但如果你只是在寻找一个简单的图表，我发现d3太复杂了，无法实现你想要的。它适用于复杂的东西，但也适用于简单的东西（如堆叠图表）我通常使用highcharts@Pompey谢谢你的建议，但是目前我在d3.js上投入了很多时间，所以现在我将继续使用它。非常感谢你花时间查看我的代码，并找到问题所在，同时也感谢你在创建这张图时付出的额外努力，使它更美味。事实上，几小时前我确实理解了画图的原理，但在设置“高度”属性时仍然犯了一个小错误，但你做对了。是的，我没有提到g被转换到左上角的变化。再次非常感谢。非常感谢您花时间查看我的代码，并找到问题所在，同时也感谢您在创建图形时付出的额外努力，以使其令人满意。事实上，几小时前我确实理解了画图的原理，但在设置“高度”属性时仍然犯了一个小错误，但你做对了。是的，我没有提到g被转换到左上角的变化。再次非常感谢。
.attr("y", function (d) { return y(d.y) - y(d.y0); })