Javascript 使用路径将D3 JS堆叠条放置在顶部而不是底部

我按照下面的SA问题，使用

而不是

构建了一个堆叠条形图，因此我可以将顶部条形部分设置为圆角

这是一支代码笔，我的代码显示了我的代码和错误的效果：

问题是堆叠的钢筋在顶部对齐

我尝试了很多对bar函数和调用“attr d”函数的更改，但我似乎只会让事情变得更糟。任何帮助都将不胜感激

这里是一个购物不好的形象，它应该是什么样子。所以我的想法是，在我当前的代码中，这些条具有正确的高度和顺序，只是它们应该在底部对齐。在图像中，圆角丢失了，但它们在笔中是可见的

---

将条形图的基准

y

从

yscale（d[1]）

更改为

yscale（0）

，如下所示：

返回条（（xscale（xlabels[i]）+（xscale.bandwidth（）/num_groups）*gnum）+5，
yscale（0），
14,
yscale（d[1]），s）；

现在栏杆将竖直。但别被愚弄了。图表上显示的堆栈不正确，不能正确反映数据。这是因为

bar

函数中的

h

参数是条的高度，

d[1]

实际上是

y-h

。因此，需要更正

条形图

功能

功能条（x、y、w、y1、r、f）{
//横扫旗：
如果（f==未定义）f=1；
//弧顶的x坐标
var x0=x+r；
var x1=x+w-r；
//弧底的y坐标
var y0=y1+r；
//仅为方便起见（与上述略有不同）：
var l=“l”，a=“a”；
变量部分=[“M”，x，y，l，x，y0，a，r，r，0，0，f，x0，y1，l，x1，y1，a，r，r，0，0，0，f，x+w，y0，l，x+w，y，“Z”]；
返回零件。连接（“”）；
}

使用

yscale（0）-yscale（d[1]）

调用原始

bar

可以实现相同的效果，但这将创建不必要的冗余。现在钢筋的尺寸正确了

但是，较短的条现在隐藏在每个堆栈中较长条的后面。因此，钢筋的拉伸顺序需要颠倒。更改

数据集

，对每个堆栈执行

stack.reverse（）

var数据集=[
d3.stack（）.keys（['LKV'，'SROI'，'NoRisk']）（data.reverse（），
d3.stack（）.keys（['LKV1'，'SROI1'，'NoRisk1']）（data.reverse（），
d3.stack（）.keys（['LKV2'，'SROI2'，'NoRisk2']）（data.reverse（）
];

---

就这样。”s我的版本。

svg的左上角是像素坐标

0,0

。首先，反转范围，如

范围（[height，0]）

。然后，要在x轴开始条形图的路径，y坐标不是

0

，而是

高度

，或者可能与x轴相同。然后，在

yscale（d[1]）

的“范围”值上画一条线。