Wählen Sie die Kinder eines Knotens aus einem Baum in d3.js

Question

Ich verwende den folgenden Code here, um Daten (im JSON-Format) mit Hilfe eines Baumes anzuzeigen, die ordnungsgemäß funktionieren. Das Ziel ist es, dass, wenn der Benutzer doppelt klickt auf einen Knoten, der die folgenden Dinge passieren sollte:

• (1) die Farbe des ‚ausgewählt‘ Knoten die Farbe aller
• (2) ändern ihre Kinder ändern (Unterbaum)

Das erste Ziel (1) funktioniert ordnungsgemäß. Um dies zu tun habe ich den Code-Schnipsel unter:

var node = svg.selectAll("g.node") 
    .data(nodes, function(d) { return d.id || (d.id = ++i); }, function(d) { return d.isSelected || (d.isSelected = false); }); 

Jeder Knoten verfügt über ein isSelected Attribut, das eine Art eines Kennzeichens ist. Und die Farbe des Knotens durch den nächsten Code-Schnipsel geändert:

var nodeEnter = node.enter().append("g") 
    .attr("class", "node") 
    //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 
    .on("click", click) 
    .each(function(d) 
    { 
    var sel = d3.select(this); 
    //var state = false; 
    sel.on("dblclick", function(e) 
    { 
     //window.alert("state is: " + state); 
     //state = !state; 

     if (!e.isSelected) { 
     e.isSelected = true; 
     d3.select(this).select("circle").style("fill", "black"); 
     //Select all nodes 


     selectSubtree(e); 

     } else { 
     e.isSelected = false; 
     d3.select(this).select("circle").style("fill", "#fff"); 

     //deselect all nodes 


     deselectSubtree(e); 

     } 
    }); 
    }); 

Das Problem tritt auf, wenn der ‚ausgewählt‘ Knoten zum selectSubtree gesendet wird (d) Funktion. Ich weiß nicht, wie ich die Farbe des Knotens genau ändern soll. Kann mir jemand helfen?

function selectSubtree(node){ 

if(node.children){ 

node.children.forEach(function(d) 
{ 
    //Select all children 
    d.isSelected = true; 

     selectSubtree(d); 
});}} 

Mein erster Versuch war d3.select ("# id") zu verwenden, wählen Sie ("Kreis") Stil ("füllen", "#fff")..;, da jeder Knoten eine ID hat, aber nicht richtig funktioniert.

Answer 1

Sie können es wie folgt tun:

SCHRITT 1

Geben Sie eindeutige ID für alle Kreise in Ihrem Fall i des Kreises ID setze als Name

nodeEnter.append("circle") 
    .attr("id", function(d){return d.name})//give ids to circle 
     .attr("r", 1e-6); 

STEP2

In selectsubtree Funktion machen Sie die circ le dom füllen (mit Schwarz), indem Sie die ID verwenden wir in Schritt 1

function selectSubtree(node) 
{ 
    d3.select("#" + node.name).style("fill", "black"); 
    //your code of recursively calling function if it has children. 

STEP3

In deselectSubtree Funktion stellen Sie den Kreis dom fill (mit Weiß), indem Sie die ID verwenden wir in Schritt 1 gesetzt

function deselectSubtree(node) 
{ 
    d3.select("#" + node.name).style("fill", "white"); 

Arbeits Code here