Dynamiczne zmiany rozmiaru układ drzewo d3 w oparciu o liczbę childNodes

Question

Z tego przykładu http://mbostock.github.com/d3/talk/20111018/tree.html mam zbudować d3 tree layout gdzie korzeń jest w środku (root.x0 = width/2) w oknie przeglądarki i węzły są w kierunku w dół zamiast w obliczu w prawo.

Czy to możliwe, aby ponownie wielkość drzewa, tak że szerokość drzewa zależy od liczby węzłów drzewa tak, że jeżeli liczba węzłów jest mniej, to szerokość jest mniejsza albo jeżeli liczba węzłów jest większa niż szerokość jest duża?

Muszę również wiedzieć, w jaki sposób d3 tree layout oblicza obecnie atrybut ""? Jak mogę manipulować atrybutem "d.x", aby dopasować odstępy między węzłami układu drzewa d3.

Answer 1

Tak więc po ustawieniu "rozmiaru" układu drzewa, wszystko co robisz, to ustawianie wartości, w której układ drzewa będzie interpolował wartości xiy. Nie ma więc powodu, aby nie można było obliczyć żądanej szerokości lub wysokości i zmienić jej w układzie każdego wywołania aktualizacji.

skopiowałem przykład dałeś do jsFiddle i dodaje następujące do funkcji aktualizacji:

// 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]); 

pamiętać, że jest to dość szorstki obliczanie i nie uwzględnia w którym dzieci są wrt rodziców lub nic - ale masz pomysł.

Jeśli chodzi o manipulowanie wartościami x węzłów, najprościej jest po prostu zmodyfikować węzły po wykonaniu układu. W rzeczywistości widać, że to już jest zrobione na przykład współrzędna y:

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

Robi to tak, że nawet jeśli dzieci są ukryte dany poziom węzłów pozostaje w tej samej pozycji y, w przeciwnym razie, jeśli ciebie zwinięte wszystkie dzieci, pozostałe poziomy rozciągnęłyby się na całą szerokość (spróbuj skomentować tę linię i zobacz, co się dzieje, gdy przełączasz całe poziomy niewidoczne).

Jeśli chodzi o odgórne odgałęzienie, to myślę, że możesz po prostu odwrócić wszędzie, gdzie widzisz x i y (oraz x0 i y0). Nie zapomnij zrobić tego samego dla przekątnej projekcji, aby upewnić się, że linie również się obracają.