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

Question

I want to place rectangles inside partition layout with transform of arc position. just like below image

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

In rect transform ,rotate need to rotate(" + ((dx + (d.dx / 2)) - Math.PI ) / Math.PI * 180 + ")" instead of rotate(" + ((dx + (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 + ")"});