Question

I’m just starting out with D3 and I currently have a force layout with 5 different centers and my nodes gravitating around each one based on a data property. Ideally, each of the five groups has equal number of nodes so that they appear as roughly uniform-width columns — similar to the orange group in this example http://bl.ocks.org/1021953 (if you let it run for a while).

Some of my groups have many nodes and some have none, however, which is resulting in some clusters being much wider than others. Is it possible to set a max-width beyond which no node will drift left or right of its center while still letting nodes drift more freely above and below center?

Or could I fake it by placing columns of invisible nodes between each of groups to suitably repulse them?

Any help is much appreciated!

Answer 1

After much tinkering I’ve found that by multiplying the alpha by different numbers you can control the left/right and top/bottom pull independently.

Following this example (http://vallandingham.me/d3_without_svg.html) set the setBubbleLocation function to something like this

bubble.y = bubble.y + (center.y - bubble.y) * (0.115) * alpha*.5; //smaller alpha = looser
bubble.x = bubble.x + (center.x - bubble.x) * (0.115) * alpha*3; //bigger alpha = tighter