D3.js – Does d3.js force layout allow dynamic linkDistance

d3.jsforce-layout

I'm using the force layout to represent a directed unweighted network. My inspiration comes from the following example: http://bl.ocks.org/mbostock/1153292

enter image description here

My problem is that in my case there much more links between nodes and I have the feeling that giving a fixed linkDistance, which is always the same, is a very big constraint for my layout.

Is it possible to set a dynamic linkDistance, such that a link grows in length if it's useful to reduce link crossing inside the graph?

Best Answer

From the documentation:

force.linkDistance([distance])

If distance is specified, sets the target distance between linked nodes to the specified value. If distance is not specified, returns the layout's current link distance, which defaults to 20. If distance is a constant, then all links are the same distance. Otherwise, if distance is a function, then the function is evaluated for each link (in order), being passed the link and its index, with the this context as the force layout; the function's return value is then used to set each link's distance. The function is evaluated whenever the layout starts. Typically, the distance is specified in pixels; however, the units are arbitrary relative to the layout's size.

Note that the link distance is still adjusted as the layout runs. You may also find setting linkStrength() useful.

Related Solutions

Python – How to make an installer for your python program

I am shocked that no answer mentions that py2exe now supports both Python 2.x and Python 3.x

https://pypi.python.org/pypi/py2exe#downloads

D3.js – arrows on links in d3js force layout

If you will use a <line> instead of <path>, the following should work for you, I have it working in my current solution. It's based on @ɭɘ ɖɵʊɒɼɖ 江戸 solution:

In your tick event listener:

linkElements.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { 
             return getTargetNodeCircumferencePoint(d)[0];
        })
        .attr("y2", function(d) { 
             return getTargetNodeCircumferencePoint(d)[1];
        });

function getTargetNodeCircumferencePoint(d){

        var t_radius = d.target.nodeWidth/2; // nodeWidth is just a custom attribute I calculate during the creation of the nodes depending on the node width
        var dx = d.target.x - d.source.x;
        var dy = d.target.y - d.source.y;
        var gamma = Math.atan2(dy,dx); // Math.atan2 returns the angle in the correct quadrant as opposed to Math.atan
        var tx = d.target.x - (Math.cos(gamma) * t_radius);
        var ty = d.target.y - (Math.sin(gamma) * t_radius);

        return [tx,ty]; 
}

I am sure this solution can be modified to accomodate <path> elements, however I haven't tried it.

Best Answer

Related Solutions

Python – How to make an installer for your python program

D3.js – arrows on links in d3js force layout

Related Topic