d3.js - D3 Force Layout Graph - Self linking node -


using force directed graph, how link show when target , source same node. nice little loop indicating such edge exists.

there 2 d3 examples used or tried use:

the trick draw self link path arc in it. took me bit of fiddling arc parameter syntax things working , key seemed arc not start , end @ same point. here relevant code draws edges @ each update.

function tick() {   link.attr("d", function(d) {   var x1 = d.source.x,       y1 = d.source.y,       x2 = d.target.x,       y2 = d.target.y,       dx = x2 - x1,       dy = y2 - y1,       dr = math.sqrt(dx * dx + dy * dy),        // defaults normal edge.       drx = dr,       dry = dr,       xrotation = 0, // degrees       largearc = 0, // 1 or 0       sweep = 1; // 1 or 0        // self edge.       if ( x1 === x2 && y1 === y2 ) {         // fiddle angle loop oriented.         xrotation = -45;          // needs 1.         largearc = 1;          // change sweep change orientation of loop.          //sweep = 0;          // make drx , dry different ellipse         // instead of circle.         drx = 30;         dry = 20;          // whatever reason arc collapses point if beginning         // , ending points of arc same, kludge it.         x2 = x2 + 1;         y2 = y2 + 1;       }    return "m" + x1 + "," + y1 + "a" + drx + "," + dry + " " + xrotation + "," + largearc + "," + sweep + " " + x2 + "," + y2; }); 

and here a jsfiddle demonstrates whole thing, , screenshot:

enter image description here


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -