Currently, I am trying to adjust the positioning of my rectangle nodes because they are overlapping, as illustrated in the image below:
In my research, I discovered that D3 provides a nodeSize and separation method. However, I encountered difficulties implementing these methods effectively.
I came across a blog post addressing this issue, where the author mentions:
The size property doesn’t exist in nodes, so it will be whatever property you want to control the size of them.
This statement contradicts the existence of the nodeSize method in D3. Therefore, I suspect that either I am using the method incorrectly or the blog post is outdated. My goal is to configure my nodes to match the dimensions of the rectangles and evenly space them out to prevent overlaps. Can anyone provide guidance on the correct utilization of these methods? The documentation regarding these techniques lacks clarity and has not been informative thus far. Additionally, I have struggled to find examples demonstrating alterations to the nodeSize in tree structures or the necessity for separation with rectangular objects (while circular examples can be found, I believe they are too dissimilar...)
Below is the relevant code snippet. I will attempt to set up a JSFiddle for reference.
var margin = {top: 20, right: 120, bottom: 20, left: 120},
height = 960 - margin.right - margin.left,
width = 800 - margin.top - margin.bottom,
rectW = 70;
rectH = 30;
//bbox = NaN,
maxTextLength = 0;
var i = 0,
duration = 750,
root;
//paths from each node drawn initially here
//changed to d.x, d.y
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x+rectW/2, d.y+rectH/2];
//.projection(function(d) { return [d.x+bbox.getBBox().width/2, d.y+bbox.getBBox().height/2];
});
var tree = d3.layout.tree()
.nodeSize([30,70])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); })
.size([width, height]);
var svg = d3.select("body")
.append("svg")
.attr("height","100%").attr("width","100%")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("g")
.attr("transform", "translate(" + margin.top + "," + margin.left + ")");