Avoid overlapping of nodes in tree layout in d3.js

Question

I have created a collapsible tree to represent some biological data.

In this tree the size of the node represents the importance of the node. As I have a huge data and also the sizes of the nodes vary,they overlap over each other. I need to specify the distance between the sibling nodes.

I tried tree.separation() method but it didn't work.

Code is as follows :

tree.separation(seperator);

function seperator(a, b)
{
    if(a.parent == b.parent)
    {
        if((a.abundance == (maxAbd)) || (b.abundance == (maxAbd)))
        {
            return 2;
        }
        else
        {
            return 1;
        }
    }
}

This is giving me error saying:

Unexpected value translate(433.33333333333337,NaN) parsing transform attribute.

I understand that that after adding the separation method it is unable to calculate the x coordinate for the nodes. Can anyone please help me with how to do this?

I also tried modifying the source code as suggested in https://groups.google.com/forum/#!topic/d3-js/7Js0dGrnyek but that did not work either.

Please suggest some solution.

Answer 1

I had the same problem. This is how I solved it. I have width assigned to each node, height for now is the same for all nodes (basically nodes with smaller height than nodeHeight, get centered vertically):

var tree = d3.layout.tree().nodeSize([1, nodeHeight])
           .separation(function(a, b) {
               var width = a.width + b.width,
                   distance = width / 2 + 16; // horizontal distance between nodes = 16
                   return distance;
           }),
    nodes = tree.nodes(data),
    links = tree.links(nodes);

Hope this helps.