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

Question

我遵循以下SA问题，使用<path>而非<rect>来构建堆积的条形图，因此我可以将顶部条形部分的样式设置为具有圆角。

How to Make a bar chart with rounded corners with extended grid in d3.js?

这是一支带有我的代码的笔，显示我的代码和错误的效果：https://codepen.io/Yeronimo/pen/jOPWBGL

问题在于堆叠的条形图在顶部对齐。

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

这是一张购物不佳的产品外观图。因此，我的想法是，在我当前的代码中，这些条具有正确的高度和正确的顺序，只是它们应该在底部对齐。在图像中，圆角丢失了，但在笔中可见。

Answer 1

将条形的底部y从yscale(d[1])更改为yscale(0)，如下所示：

return bar((xscale(xlabels[i]) + (xscale.bandwidth() / num_groups) * gnum) + 5,
            yscale(0),
            14,
            yscale(d[1]), s);

现在，横条将直立。但不要上当。图形上显示的堆栈不正确，并且不能正确反映数据。这是因为h函数中的bar参数是条的高度，而d[1]实际上是y - h。因此，bar函数需要更正。

function bar(x, y, w, y1, r, f) {
    // Flag for sweep:
    if (f == undefined) f = 1;
    // x coordinates of top of arcs
    var x0 = x + r;
    var x1 = x + w - r;
    // y coordinates of bottom of arcs
    var y0 = y1 + r;
    // just for convenience (slightly different than above):
    var l = "L", a = "A";

    var parts = ["M", x, y, l, x, y0, a, r, r, 0, 0, f, x0, y1, l, x1, y1, a, r, r, 0, 0, f, x + w, y0, l, x + w, y, "Z"];
    return parts.join(" ");
}

通过用bar调用原始的yscale(0) - yscale(d[1])可以达到相同的效果，但这会产生不必要的冗余。现在，条形尺寸正确。

但是，较短的条形现在隐藏在每个堆栈中较长的条形后面。因此，条的绘制顺序需要颠倒。这样更改datasets，对每个堆栈执行stack.reverse()。

var datasets = [
            d3.stack().keys(['LKV', 'SROI', 'NoRisk'])(data).reverse(),
            d3.stack().keys(['LKV1', 'SROI1', 'NoRisk1'])(data).reverse(),
            d3.stack().keys(['LKV2', 'SROI2', 'NoRisk2'])(data).reverse()
        ];

就是这样。 Here是我的版本。