D3 Tree view - with rectangle instead of circle

Question

I want to create a tree view using d3 like this,

Instead of circle i want to place a rectangle there. But when the children of a node gets increased it overlaps each other.

Please look at the sample here

Is there a way to keep a minimum distance between each node. if i increase the over all width i can prevent it from overlapping. But i have the limitation on width too. I used the below code,

var SampleData= {name : "root",
  "children": [
    { "name" : "child2",
      "children": [
        {name : "child3",
   "children": [
        {name : "child3",
   size : 10
  },
        {name : "child4",
   size : 10
  }],
  },
        {name : "child4",
   size : 10
  }
      ]
    }
  ]
};

var root = SampleData;

var margin = {top: 100, right: 0, bottom: 100, left: 0},
  width =600 - margin.left - margin.right,
  height =  600 - margin.top - margin.bottom- 20;

 var svg = d3.select("body")
   .append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var size= [width, height];

    // Compute the layout.
    var tree = d3.layout.tree().size(size),
        nodes = tree.nodes(root),
        links = tree.links(nodes);
 
 console.log(links[1].source);
  
 var x = function(d) { return d.x; },
  y = function(d) { return d.y; };
  
 var diagonal = d3.svg.diagonal()
  .source(function(d) { return {"x":d.source.x, "y":(d.source.y+100)}; })            
  .target(function(d) { return {"x":(d.target.x), "y":d.target.y}; })
  .projection(function(d) { return [d.x, d.y]; });

    // Create the link lines.
    svg.selectAll(".link")
        .data(links)
  .enter()
  .append("path")
        .attr("class", "link")
        .attr("d", diagonal);

 svg.selectAll(".node")
        .data(nodes)
  .enter().append("rect")
        .attr("class", "node")
        .attr("width", 200)
  .attr("height", 100)
        .attr("x", function(d){  return x(d)-100;})
        .attr("y", function(d){  return y(d);});

.link {
  fill: none;
  stroke: RGB(128,128,128  );
  stroke-width: 10;
  opacity : 0.5;
}

.border {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
}

.node {
  stroke: #fff;
  fill: steelblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<html>
    <body>
<script src="http://d3js.org/d3.v3.min.js"></script>
    </body>
</html>

You may be able to achieve this using [`.separation()`](https://github.com/mbostock/d3/wiki/Tree-Layout#separation). — Lars Kotthoff, Nov 09 '14 at 12:54
Thanks Lars. It worked. I also referred the below link to specify the node size. [link](http://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize) — user3682801, Nov 09 '14 at 15:51

D3 Tree view - with rectangle instead of circle

0 Answers0