javascript - Maintain a dynamic link distance among nodes in force layout D3.js -

i parsing link distance each link in json string.

 {   "nodes" : [ {     "name" : "cricket",     "category" : "main",     "id" : 0   }, {     "name" : "record1",     "category" : "twitter",     "id" : 1   }, {     "name" : "record2",     "category" : "web",     "id" : 2   }],   "links" : [ {     "source" : 0,     "target" : 1,     "linkdistance" : 13.17538   }, {     "source" : 0,     "target" : 2,     "linkdistance" : 13.17538   } ] } 

in javascript, link distance given function.

var force = d3.layout.force()      .gravity(0.3)      .charge(0)      .size([width,height])      .nodes(jsonstring.nodes)      .links(jsonstring.links)      .linkdistance(function (d) {            return d.linkdistance;      })      .start(); 

but nodes not drawing in given link distance. charge value 0. have idea of how maintain dynamic link distances when parsed through json?

each time d.linkdistance edited, need call again

force.linkdistance(function (d) {        return d.linkdistance;  }) 

for modification take effect.

also remember link distance weakly enforced in d3, experience editing link distance not have large effect on graph layout anyway. can try force.linkstrength(10) or higher values increase importance of distance, might not enough have precisely right values.

---

something try:

• find spanning tree of graph (this gives list of edges being "skeleton" st)

• run following enforce edge length correct:

  force.on('tick', function() {    //consider edges of spanning tree, root leaves    //using links directly instead of st yield strange results, depending on data might work enough    st.foreach(function(d) {        //compute link coordinates          var dx = d.target.x - d.source.x;         var dy = d.target.y - d.source.y;        //ratio desired length / actual length        var r = d.linkdistance / math.sqrt(dx*dx+dy*dy)         //add r=math.sqrt(r) smoother (but less constrained)        //move target desired length        d.target.x = d.source.x + dx * r;         d.target.y = d.source.y + dy * r;     }) }) 

it badly degrade natural flow of force layout (maybe bit less r=math.sqrt(r), still), , mess node drag if use that, should enforce arc length when possible.