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

我想在分区布局中放置矩形，并变换圆弧位置。 如下图所示

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))+ ")"});

---

在rect变换中，旋转需要

rotate（“+（（d.x+（d.dx/2））-Math.PI）/Math.PI*180+”

而不是

rotate（“+（（d.x+（d.dx/2））-Math.PI/2）/Math.PI*180+”

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 + ")"});