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

debugcn 发表于 Dev

耶罗尼莫

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

如何在d3.js中制作带有扩展网格的圆角条形图？

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

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

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

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

急于帮助

更改基本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()
        ];

而已。这是我的版本。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。