I am learning stardust.js and was trying to understand force-directed graphs in stardust.js. I know stardust uses d3.js and WebGL but when I am looking at code I am having a hard time finding bridges between them.

In a directed graph, d3.js is used to render create a forceSimulation.

 var force = d3.forceSimulation()
        .force("link", d3.forceLink().id(function (d) {return d.index }))
        .force("charge", d3.forceManyBody())
        .force("forceX", d3.forceX(width / 2))  //for attracting element to a given point
        .force("forceY", d3.forceY(height / 2))


 force.nodes(nodes);
 force.force("link").links(edges);
 force.force("forceX").strength(0.5); //strength of aatraction
 force.force("forceY").strength(0.5);
 force.force("link").distance(50);
 force.force("link").strength(0.05);
 force.force("charge").strength(-40);

and it is giving data to stardust as

var positions = Stardust.array("Vector2")
        .value(d => [d.x, d.y])
        .data(nodes);

where this position is used for update

  force.on("tick", () => {
        if (isDragging && selectedNode && draggingLocation) {
            selectedNode.x = draggingLocation[0];
            selectedNode.y = draggingLocation[1];
        }
        positions.data(nodes);
        requestRender();
    });

I don't understand what is the use of force is here because it is not used anywhere, just created.

I am curious to know if this is only called so that we could use "tick" event listener just to create animation or motion or moving effect because it will update the position sent to the browser?

Any kind of help is appreciated !! Thanks in advance