Dynamisch das d3 Baumlayouts auf der Anzahl der childnodes

Question

Aus diesem Beispiel http://mbostock.github.com/d3/talk/20111018/tree.html ich ein d3 tree layout bauen basiert die Größe, wo die Wurzel in der Mitte (root.x0 = width/2) im Browser-Fenster ist und die Knoten in Abwärtsrichtung sind statt mit Blick auf auf der rechten Seite.

Ist es möglich, den Baum zu Größe neu, so dass die Breite des Baumes abhängt von der Anzahl der Knoten des Baumes, so dass, wenn Anzahl der Knoten weniger ist, dann ist Breite weniger oder auch wenn die Zahl der Knoten ist größer als die Breite ist groß?

Ich muss auch wissen, wie d3 tree layout derzeit das Attribut "d.x" berechnet? Wie kann ich das Attribut "d.x" manipulieren, um den Abstand zwischen den Knoten des d3-Baum-Layouts anzupassen.

Answer 1

Wenn Sie also die "Größe" des Baumlayouts festlegen, legen Sie nur den Wert fest, mit dem das Baumlayout die x- und y-Werte interpoliert. Es gibt also keinen Grund, warum Sie die gewünschte Breite oder Höhe nicht berechnen und bei jedem Update-Aufruf im Layout ändern können.

kopiert ich das Beispiel, das Sie zu einem jsFiddle gab und fügte hinzu, die folgende auf die Update-Funktion:

// compute the new height 
var levelWidth = [1]; 
var childCount = function(level, n) { 

    if(n.children && n.children.length > 0) { 
    if(levelWidth.length <= level + 1) levelWidth.push(0); 

    levelWidth[level+1] += n.children.length; 
    n.children.forEach(function(d) { 
     childCount(level + 1, d); 
    }); 
    } 
}; 
childCount(0, root); 
var newHeight = d3.max(levelWidth) * 20; // 20 pixels per line 
tree = tree.size([newHeight, w]); 

Beachten Sie, dass dies eine ziemlich grobe Berechnung ist und nicht Faktor in dem die Kinder sind wrt Eltern oder alles - aber Sie bekommen die Idee.

Wie bei der Manipulation der x-Werte der Knoten ist es wahrscheinlich am einfachsten, die Knoten einfach zu modifizieren, nachdem das Layout seine Sache erledigt hat. In der Tat kann man sehen, dass dies bereits im Beispiel mit der y erfolgt koordinieren:

// Normalize for fixed-depth. 
nodes.forEach(function(d) { d.y = d.depth * 180; }); 

Er tut dies so, dass selbst wenn Kinder eine bestimmte Höhe des Knoten bleibt in der gleichen y-Position, sonst, wenn Sie verstecken Wenn alle Kinder zusammenfielen, würden die restlichen Ebenen sich ausdehnen, um die gesamte Breite zu übernehmen (versuchen Sie, diese Linie zu kommentieren und zu sehen, was passiert, wenn Sie ganze Ebenen unsichtbar schalten).

Wenn ich von oben nach unten gehe, denke ich, dass man einfach überall herumdrehen kann, wo man x und y (und x0 und y0) sieht. Vergessen Sie nicht, das Gleiche mit der Diagonalprojektion zu tun, um sicherzustellen, dass Ihre Linien auch umdrehen.