"Leaf-justify" D3-Baumgraphen?

Question

Was muss ich tun, damit die Baumgraphen so gerendert werden, dass die Knoten zur Blattseite des Diagramms ausgerichtet sind?

Ich möchte einen beliebigen Baumgraphen nehmen, die normalerweise aussehen könnte:

und haben es kommen ähnlich wie:

Answer 1

Eine Möglichkeit, zu tun Es ist die Tiefe des Baumes zu erkennen und die depth Eigenschaft jedes Knotens, der keine Kinder hat, auf diesen Wert zu setzen.

Daten Ihrem Baum Unter der Annahme, ist wie folgt:

var data = [ 
    { 
     "name": "Top Level", 
     "parent": "null", 
     "children": [ 
      { 
       "name": "Level 2: A", 
       "parent": "Top Level", 
       "children": [ ... 

Und Sie erstellt einen Baum mit:

var tree = d3.layout.tree(); 

Sie können die depth des Baumes erhalten, indem jeder Knoten für den Maximalwert der Suche von depth:

var treeDepth = d3.max(tree(data[0]), function(d) { return d.depth; }); 

Sobald Sie das haben, können Sie r ESET es jedes Mal, wenn Sie den Baum Layout neu berechnen:

tree.nodes(data[0]).forEach(function(d) { 
    var depthSize = 50; 
    if (!d.children) { // this node has no children 
     d.depth = treeDepth; // set depth to depth of tree 
    } 
    d.y = d.depth * depthSize; // recalculate y 
}); 

Dies funktioniert für Bäume wie in Ihrem Beispiel angelegt (von links nach rechts). Für Top-Down-Layouts müssen Sie stattdessen d.x ändern.

ist hier ein JSFiddle mit einer Arbeitslösung angepasst von this example.