Wie legen Sie einen festen Link Abstand mit d3 v4

Question

Alle API-Beispiele scheinen für v3 noch zu sein. Ich versuche zu verstehen, wie eine Kraft Graph mit Links einen festen Abstand zu schaffen, wie: http://bl.ocks.org/d3noob/5141278

ich link_strecke sah aber nicht sicher, wie es anzuwenden: https://github.com/d3/d3-force/blob/master/README.md#link_distance

Erstellen eines Graphen wie dies:

let simulation = d3.forceSimulation() 
     .force("link", d3.forceLink().id(function(d) { return d.id; })) 
     .force("charge", d3.forceManyBody().strength(-150)) 
     .force("center", d3.forceCenter(width/2, height/2)); 

ich wie verschiedene Kombinationen ausprobiert:

// .force("link", d3.forceLink().distance(20).strength(1)) 
    // .force("linkDistance", 20) 
    // .force("link", d3.forceLink().id(function(d) { return d.id; })) 

aber kein Glück!

So scheint es link_distance kann nicht behoben werden? sein ein Ergebnis der Stärke und (Abstand, was auch immer das ist)

Wie bewerbe ich mich strength und distance auf Links in d3 v4? Wird es auf die Simulation oder etwas anderes angewendet?

Answer 1

Sie sind fast näher, die Entfernung in v4 zu ändern! Überprüfen Sie diese Änderung, es funktioniert für mich:

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100).strength(1)) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)); 

Answer 2

Sie versuchen können, ohne force('center')

let simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { return d.id; })) 
    .force("charge", d3.forceManyBody().strength(-150)); 

Answer 3

Sie sind fast da ... check this out, dieser Code funktioniert für mich ..

Hinweis: Ich erhalte die Länge der Links dynamisch basierend auf den Knotenetiketten mit diesem Code GetNodeDefaults (d.label) .linkDistance dh es kann 100 oder 200 oder 300 usw. sein,

var forceLink = d3 
    .forceLink().id(function (d) { 
     return d.id; 
    }) 
    .distance(function (d) { 
     return GetNodeDefaults(d.label).linkDistance; 
    }) 
    .strength(0.1); 

var simulation = d3.forceSimulation() 
    .force("link", forceLink) 
    .force("charge", d3.forceManyBody().strength(function (d, i) { 
     var a = i == 0 ? -2000 : -1000; 
     return a; 
    }).distanceMin(200).distanceMax(1000)) 
    .force("center", d3.forceCenter(width/2, height/2)) 
    .force("y", d3.forceY(0.01)) 
    .force("x", d3.forceX(0.01)) 
    .on("tick", ticked);