如何在d3.js中转换和旋转分区布局上的矩形

Question

我希望通过弧形位置的变换将矩形放在分区布局中。 就像下图

一样

JSfiddle

D3.js ：

svg.selectAll("rect")
             .data(node)
             .enter()
             .append("rect")
             .attr("x", function (d) {return d.x;})
             .attr("y", function (d) { return d.x + d.dx - 0.01 / (d.depth + 2.6); })
             .attr("width", 20)
             .attr("height", 100) 

             .attr("transform", function(d) { return "translate("+arc.centroid(d)+")rotate(" + ((2*Math.PI)+2.6*(d.x + d.dx))+ ")"});

Answer 1

在rect变换中，旋转需要rotate(" + ((d.x + (d.dx / 2)) - Math.PI ) / Math.PI * 180 + ")"而不是rotate(" + ((d.x + (d.dx / 2)) - Math.PI/2 ) / Math.PI * 180 + ")"

<强> FIDDLE

svg.selectAll("rect")
             .data(node)
             .enter()
             .append("rect")
             .attr("x", function (d) {return d.x;})
             .attr("y", function (d) { return d.x + d.dx - 0.01 / (d.depth + 2.6); })
             .attr("width", 20)
             .attr("height", 100) 

             .attr("transform", function(d) { return "translate("+arc.centroid(d)+")rotate(" + ((d.x + (d.dx / 2)) - Math.PI ) / Math.PI * 180 + ")"});