CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
user3789426
user3789426

Reputation: 13

How to transform and rotate the rectangles on partition layout in d3.js

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

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

Upvotes: 0

Views: 368

Answers (1)

Manoj
Manoj

Reputation: 1890

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

Upvotes: 2

Related Questions