D3js has a linkDistance option which allows for setting the distance between two nodes depending on the value.

For my example, I had to set this linkDistance(function(d) { return (d.value); })


D3 Force Layout : How to force a group of node to stay in a given area

The links are the connections between the nodes. The source and target values for the links specify which direction the arrow should point. The length or distance, or whatever custom attributes you add to the link JSON object is usually used to specify "desired" linkDistance, though you can also specify a weight to use with the gravity setting.


I use separate forcePoints to cluster my nodes in specific locations, it involves an extra array of X and Y values for each group

var forcePoint = [
"1":{"x":"200", "y":"400"},
"2":{"x":"300", "y":"600"},

Then I position the nodes around the forcePoint assigned to a location attribute in the data. In this instance, nodes with location 1 cluster to 200,400 on the SVG, nodes with location 2 cluster to 300,600. The actual array is created during a previous step of the simulation, But you get the idea.

var position = d3.forceSimulation(nodes)
.force('x', d3.forceX((d)=>forcePoint[d.location][0].cx)
.force('y', d3.forceY((d)=>forcePoint[d.location][1].cy)
.force("collide", d3.forceCollide(R * 2));
position.nodes(graph.cells).on('tick', function() {
    nodes.attr('transform', (d)=>{
    return 'translate(' + (d.x) + ',' + (d.y) + ')';

You could also link them all to a central node within the group.

Related Query