dinamicamente ridimensionare il layout albero d3 basata sul numero di childNodes

Question

Da questo esempio http://mbostock.github.com/d3/talk/20111018/tree.html devo costruire un d3 tree layout dove la radice è nel mezzo (root.x0 = width/2) nella finestra del browser ei nodi sono nella direzione verso il basso invece di affrontare a destra.

E 'possibile ridimensionare l'albero, in modo tale che la larghezza dell'albero dipende dal numero di nodi dell'albero tale che se il numero di nodi è inferiore, allora larghezza è inferiore oppure se il numero dei nodi è maggiore allora la larghezza è grande?

Devo anche sapere come d3 tree layout calcola attualmente l'attributo "d.x"? Come posso manipolare l'attributo "d.x" per regolare la spaziatura tra i nodi del layout dell'albero d3.

Answer 1

Così quando si imposta la "dimensione" del layout dell'albero tutto ciò che si sta facendo è impostare il valore in cui il layout dell'albero interpolerà i valori x e y. Quindi non vi è alcun motivo per cui non è possibile calcolare la larghezza o l'altezza desiderata e modificarla nel layout di ogni chiamata di aggiornamento.

ho copiato l'esempio che hai dato a un jsFiddle e aggiunto il testo seguente la funzione di aggiornamento:

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

Si noti che questo è un calcolo abbastanza ruvida e non tiene conto in cui i bambini sono WRT loro genitori o qualsiasi cosa - ma tu hai l'idea.

Per quanto riguarda la manipolazione dei valori x dei nodi, il più semplice è probabilmente quello di modificare semplicemente i nodi dopo che il layout ha fatto la sua funzione. In realtà si può vedere che questo è già stato fatto l'esempio con la coordinata y:

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

Lo fa in modo che, anche se i bambini sono nascosti un dato livello di nodi rimane nella stessa posizione y, altrimenti se collassato tutti i bambini i livelli rimanenti si allungherebbero per occupare l'intera larghezza (prova a commentare quella linea e vedi cosa succede mentre attivi interi livelli invisibili).

Per quanto riguarda andare in alto, penso che puoi praticamente solo capovolgere ovunque vedi xey (e x0 e y0). Non dimenticare di fare lo stesso con la proiezione diagonale per assicurarti che anche le tue linee si capovolgano.