Wie finden Sie Links in d3 v4?

Question

Ich habe den folgenden Code in d3 v3 verwendet, um Knoten und Links für einen horizontalen Baum (von oben nach unten) zu finden. Here ist, wie der Baum aussehen wird:

var nodes = d3.layout.tree().nodes(jsonData).reverse(); var links = d3.layout.tree().links(nodes);

Ich versuche, das gleiche in d3 v4 zu tun. Der v4 fehlt die tree.links (nodes) -Methode, wo er die Knoten akzeptieren kann.

Wie finde ich die Links in d3 v4?

Answer 1

Ich füge nur das hinzu, um mich selbst (und möglicherweise andere) Zeit zu sparen, die Antworten aus den Demos zu graben. Ich bin auch neu in D3, also hoffe ich, dass dies für andere genauso hilfreich ist wie für mich.

Verwenden Sie d3.hierarchy() & node.descendants(), um Knoten und Links zu erhalten.

Kann auch ein wenig abkürzen, wenn gewünscht, was immer noch alle oben genannten tut.

var root = d3.hierarchy(jsonData), 
    nodes = tree(root).descendants(), 
    links = nodes.slice(1); 

Wenn Sie Knoten/Links innerhalb einer Veranstaltung greifen müssen. Zum Beispiel beim Ziehen eines Knotens bei Verwendung eines Baumdiagramms (und ich bin mir sicher, dass dies auch anderswo nützlich sein könnte).

var drag = d3.drag() 
    .on("start", function dragStart(d) { 
     var nodes = d.descendants(), 
      links = nodes.slice(1); 
    }); 

Oder alternativ node.links() verwenden, bei denen jedes Glied Quell- und Zieleigenschaften festlegt.

var drag = d3.drag() 
    .on("start", function dragStart(d) { 
     var nodes = d.descendants(), 
      links = d.links(); 
    }); 

Sie würden denken, dies auch in diesem Fall funktionieren würde, aber es funktioniert nicht (doofe).

var root = d3.hierarchy(jsonData), 
    nodes = tree(root).descendants(), 
    links = nodes.links(); // <-- only works on a single node, resort to slice(1).