javascript - D3 JS 使用路径在顶部而不是底部堆叠条形图

Question

我按照以下 SA 问题使用 <path> 构建堆积条形图而不是 <rect> , 所以我可以将顶部栏部分的样式设置为圆 Angular 。

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

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

问题是堆叠条在顶部对齐。

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

这里是一张经过精心设计的图片，它应该是什么样子。所以我的想法是，在我当前的代码中，条形图具有正确的高度和正确的顺序，只是它们应该在底部对齐。在图像中，圆 Angular 丢失了，但在钢笔中是可见的。

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);

现在钢筋会直立起来。但不要被愚弄了。图表上显示的堆栈不正确，不能正确反射(reflect)数据。这是因为 bar 函数中的 h 参数是柱的高度，而 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(" ");
}

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

但是，较短的条现在隐藏在每个堆栈中较长的条后面。所以需要颠倒条形图的绘制顺序。如此改变数据集，对每个堆栈执行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是我的版本。