Dynamic Link Distance in D3 force layout

Question

I have implemented the d3's force layout. The problem however for me is the layout is not spreading across the screen. Following is the snapshot:

I want the nodes to spread across the screen with dynamic link distance as there is lot of white space on the right and left side. I tried to randomize the link distance as follows:

d3.layout.force()
    .charge(-800)
    .linkDistance(function(d){
        return (Math.random() * (400 - 200) + 1);
    })
    .size([w, h]);

This increases the link distance but also in the vertical direction. I event tried setting the linkStrength() attribute but it just didn't work for me. How can I make this layout spread across the region only in horizontal direction? Is there a way we can define link distance to fit the rectangular region of my page?

Answer 1

One solution I see is use this bounding box example to bound your drawing in a rectangular/horizontal fashion and then set the charge to a very high level (aim for -10000, something like that) so that the nodes are spread at their maximum before being stopped by the bounds you set. You could then choose to alternatively set the text on the right or on the left of the node depending on its position, so that it isn't cut. Or you can bound the text too.