CODEWITHSUNDEEP
javascriptd3.js
Punam
Punam

Reputation: 37

How to show nested Rectangle in D3

I want to show the nested Rectangle with parent child replationship. Here is one D3 example with using circle. I tried to convert this with rect but not Successied. Please help.

Upvotes: 0

Views: 1559

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15335

Replacing circle by rect and changing the attributes to have height and width instead of r can do the trick.

You also have to edit the css and translate the rectangles as they are not aligned by their center.

I could only get squares but it can be a good lead: http://bl.ocks.org/ChrisJamesC/8914147

Relevant code:

Code necessary to add/edit in the gist you provided as an example.

CSS: 

rect {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf rect {
  fill: #ff7f0e;
  fill-opacity: 1;
}

Javascript:

node.append("rect")
  .attr("transform", function(d) { return "translate(-" + d.r + ",-" + d.r + ")";})
  .attr("width", function(d) { return 2*d.r; })
  .attr("height", function(d) { return 2*d.r; });

Example of pack with squares

Upvotes: 1

Related Questions