Javascript 弯曲SVG`<；g>；`弯道

我使用D3.js在一条直线上绘制一些SVG

s。所有这些元素都包含在具有相同垂直变换的

中

我想把这些元素“环绕”成一个圆弧。最后，每个矩形应成为圆弧的一小段，垂直线将指向圆的中心

我意识到我可能从一开始就可以在一个圆弧上完成这项工作：例如，从端到端绘制粗圆段，而不是矩形。然而，这听起来像是很多数学和计算，特别是对于SVG新手来说

---

有没有一种方法可以将这些元素转换成曲线，这意味着我可以使用我的代码来绘制这些矩形，也许可以通过更改

transform

属性？如果有一个外部SVG库（虽然我看不到成功），我也会考虑使用它。

比使用路径弧命令<代码> < < /代码> -虽然不是我所希望的，但是它不能改变围绕一个循环排列的元素——我发现<代码> d3.弧（）/代码>（以前是代码> d3. SVG.ARC（）/代码>）

---

谢谢。

这就是圆弧绘制命令的用途。没那么复杂：对不起，我不知道我是否明白。这是否允许您按要求修改后处理，还是仅绘制新圆弧？@elijahcarrel绘制新圆弧。我还没有找到一种方法来弯曲一个

事后；如果你这样做了，请告诉我。

canvas.selectAll(".xContainer")
    .selectAll("path")
    .data(...)
    .enter()
    .append("path")
    .attr("fill", function(element, index) { return colorForSize(element[4]); })
    .attr("d", function(element, index) {

        var arc = d3.arc()
            .innerRadius(iR)
            .outerRadius(iR + 10)
            .startAngle(element[1])
            .endAngle(element[2])
            .cornerRadius(isRounded ? 8 : 0);

        return arc();

    });