How to show nested Rectangle in D3

Question

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.

Answer 1

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