CODEWITHSUNDEEP
d3.jsforce-layout
user1528760
user1528760

Reputation: 167

d3.js - set links size to a force layout

Based on the "Molecule" example of Michael Bostock, available at this url : http://bl.ocks.org/mbostock/3037015.

I'm trying to set the size of my links with several values. For that, I disabled the "gravity", put an important negative value in "charge" and fixed the first node to the center of my window.

var force = d3.layout.force()
    .size([width, height])
    .charge(-800)
    .friction(0.45)
    .linkStrength(1)
    .gravity(0)
    .linkDistance(function(d) { 
        return radius(d.target.size * 10);
     });

My problem is (as you can see on the image below) sometimes the size of the links are differents, especially for links defined with a little value.

Does somebody know one good solution for my problem?

You can see my code here : http://jsfiddle.net/awPn3/

Upvotes: 3

Views: 5126

Answers (2)

mws
mws

Reputation: 9

I guess it would already help a bit when you modify the function that you use, to also account for the size of both ends' objects. Let the solution be optimized towards setting the 'visible' distance between the two objects: e.g. along the lines of (d.source.size+d.target.size) + desired_distance

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

It's a characteristic of the force layout that the length of the links is variable -- the point is that the nodes are laid out automatically and you don't have to worry about it. You could implement checks that make sure that the distances are always what you want them to be, but this would be quite difficult.

The linkDistance function that you're using already is the only direct way to (weakly) enforce such a constraint. If that's not enough, there's no easy way of mitigating it. Your only option would be to implement checks like I've mentioned above at each tick of the simulation.

Upvotes: 3

Related Questions