D3 Baum Level Selector

Question

Könnte ich einen Level Selector für diese mit d3.js erstellten Bäume hinzufügen?

http://bl.ocks.org/mbostock/2966094 oder bl.ocks.org/mbostock/4339083

ein Label auf jeder Ebene Fügen Sie die Level-Position oder erweitern es zu bekommen.

Ein Beispielbild hinzugefügt.

Answer 1

Nehmen wir das Beispiel hier: http://bl.ocks.org/mbostock/4339083

ich durch Verschachtelung der Knoten von Ebene beginnen würde:

var nodesByLevel = d3.nest().key(function (d) {return d.depth}).entries(nodes); 

Ihre Boxen hinzuzufügen, so etwas wie:

svg.selectAll(".levelBox") 
    .data(nodesByLevel) 
    .enter()   // one box per level 
    .append("text") 
    .attr("class","levelBox") 
    .attr("x", function (d) {return d.values[0].x}) //take the x of the first node in this layer 
    .text(function(d) {return d.key}) //the key from the nesting, i.e. the depth  
    .onclick(levelExpand); // click handler 

Das obige ist nur ein Skelett, das sollte in die update Funktion gehen (Sie müssen auf die exit() und update() Auswahlen nach dem Hinzufügen der Daten und alle zusätzlichen Zeichnungsfunktionen kümmern).

In levelExpand haben Sie Zugriff auf die Liste der Knoten für die Box, die geklickt wird (in d.values). Anschließend können Sie durch die Liste gehen, erweitern sie, und dann die Zeichnung

function levelExpand(d) { 
    d.values.forEach(function (n) {n.children = n._children;}); //expand all nodes internally 
    update(root); //show the update 
}