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:
- i'm using http://bl.ocks.org/d3noob/5155181 show direction, , little endpoint arrow show pointing @ itself, no link line.
- http://bl.ocks.org/gerhobbelt/3616279 does allow self referencing , sort of got work data, crazy complicated.
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:

Comments
Post a Comment