Setting the link constraint

So far, we have covered some important aspects of the force layout, such as gravity, charge, friction, and velocity. In this recipe, we will discuss another critical functionality: links. As we have mentioned in the introduction section, D3 force simulation supports a scalable simple graph constraint, and in this recipe, we will demonstrate how link constraint can be leveraged in conjunction with other forces.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter11/link-constraint.html .

How to do it...

In this recipe, whenever the user clicks on the mouse, we will generate a force-directed ring of particles constrained by links between nodes. Here is how it is implemented:

<script type="text/javascript"> 
    var w = 1280, h = 800, 
            r = 4.5, nodes = [], links = []; 
 
    var force = d3.forceSimulation() 
                    .velocityDecay...