Bend SVG `<g>` around the curve

Question

I use D3.js to draw the SVG <path> in a straight line. All of these elements are contained in <g> with the same vertical transformation.

I would like to “wrap” these elements around an arc of a circle. In the end, each rectangle should become a small segment of the arc, and the vertical lines will be directed to the center of the circle.

I understand that I could probably do this in an arc from the very beginning: for example, draw thick segments of a circle from end to end, and not from rectangles. This, however, sounds like a lot of math and computation, especially for someone new to SVG.

Is there a way to convert these elements into a post hoc curve, that is, I can use the code I have that draws these rectangles - perhaps by changing the transform attribute? If there is an external SVG library (although I looked without success), I would also think about using this.

Answer 1

It’s easier to use the arc command of path A - although not quite what I was hoping for, since it cannot convert the elements located in the line around the circle, I found d3.arc() (previously d3.svg.arc() ).

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

Thanks Bill .