D3 JS使用路径在顶部而不是底部堆叠条答案

【问题标题】：D3 JS stacked bar at top instead of bottom using pathD3 JS使用路径在顶部而不是底部堆叠条
【发布时间】：2020-02-13 21:31:29
【问题描述】：

我按照以下 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”函数的许多更改，但我似乎只会让事情变得更糟。任何帮助将不胜感激。

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

【问题讨论】：

svg 的左上角是像素坐标0,0。首先，反转range([height,0]) 之类的范围。然后，要从 x 轴开始您的条形路径，y 坐标不是0，而是height，或者可能与 x 轴相同。然后在yscale(d[1]) 的“范围”值“向上”画一条线。

标签： javascript d3.js

【解决方案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);

现在栏杆将竖直。但不要被愚弄。图表上出现的堆栈不正确，不能正确反映数据。那是因为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也可以达到同样的效果，但这会造成不必要的冗余。现在条形图的大小正确。

但是，较短的条现在隐藏在每个堆栈中较长的条后面。所以条形图的绘制顺序需要颠倒。像这样更改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是我的版本。

【讨论】：