在Curve周围弯曲SVG` <g>`

Question

我正在使用D3.js <path>直线绘制一些SVG .所有这些元素都包含在<g>具有相同垂直变换的a中.

我想围绕圆弧"包裹"这些元素.最后,每个矩形应该成为圆弧的一小部分,垂直线将指向圆的中心.

我意识到我可能从一开始就在弧形中执行此操作:例如,绘制粗圆圈段端对端而不是矩形.然而,这听起来像很多数学和计算,特别是对于刚接触SVG的人.

有没有办法将这些元素转换为事后曲线,这意味着我可以使用绘制这些矩形的代码 - 可能通过更改transform属性？如果有一个外部SVG库(虽然我看起来没有成功),我也考虑使用它.

Answer 1

比使用路径弧命令A\xe2\x80\x94 更容易，尽管不完全是我所希望的，因为它不能变形围绕圆 \xe2\x80\x94 排列的元素d3.arc()（以前d3.svg.arc()）。

\n\n

canvas.selectAll(".xContainer")\n    .selectAll("path")\n    .data(...)\n    .enter()\n    .append("path")\n    .attr("fill", function(element, index) { return colorForSize(element[4]); })\n    .attr("d", function(element, index) {\n\n        var arc = d3.arc()\n            .innerRadius(iR)\n            .outerRadius(iR + 10)\n            .startAngle(element[1])\n            .endAngle(element[2])\n            .cornerRadius(isRounded ? 8 : 0);\n\n        return arc();\n\n    });\n

\n\n

谢谢，比尔。

\n