back · main · about · writing · notes · reading · d3 · now · contact · uncopyright


Force directed graph: drifting
16 Mar 2017 · 157 words

This force graph drifts while the simulation is running.

What happens is that every tick adds 1 to the x and y position of the centering force forceCenter, so the graph slowly drifts off the screen.

Here’s the key bit of code:

function tickActions() {
    //update circle positions each tick of the simulation 
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
        
    //update link positions 
    //simply tells one end of the line to follow one node around
    //and the other end of the line to follow the other node around
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
        
    //adds 1 to the center position
    center_x += 1; 
    center_y += 1;
    
    //updates the center position
    center_force.x(center_x);
    center_force.y(center_y);
}

Hope you found that useful! Click here to view to the rest of the force directed graph series.

 


back · main · about · writing · notes · reading · d3 · now · contact · uncopyright