Iterate über bereits erstellte Knoten in D3js

Question

Ich benutze eine Force-orientierte Grafik und bin neu hinzugefügten Knoten zum Graphen hinzufügen. Das funktioniert ganz gut.

Mein Knoten hat eine Eigenschaft namens "state", die sich ständig ändert. Das Problem, dem ich gegenüberstehe, ist, dass in meinem Code die Bedingung zum Überprüfen des "Status" nur überprüft wird, wenn ein neuer Knoten kommt. Wenn es ein Update gibt, wird mein JSON mit dem Status aktualisiert, aber die Ausführung erreicht nicht der Code zum Überprüfen des Status.

Finden meines Code unten:

function buildGraph() { 
       // Update link data 
       link = link.data(links); 

       // Create new links 
       link.enter().append("g") 
       .attr("class", "link") 
       .each(function (d) { 
        d3.select(this) 
        .append("line") 
        .attr("stroke", "#000") 
        .attr("stroke-width", 2) 
        .attr("opacity", 0.3); 
       }); 

       // Delete removed links 
       link.exit().remove(); 

       // Update node data 
       node = node.data(nodes); 

       // Create new nodes 
       node.enter().append("g") 
       .attr("class", "node") 
       .each(function (d) { 
        if (d.state == "0") {      // doesn't come here after an update 
         var imgId = d.name; 
         d3.select(this).append("svg:image") 
         .attr("class", "spinner") 
         .attr("id", imgId) 
         .attr("xlink:href", "Images/icons/ajax-loader.gif") 
         .attr("x", "+16px") 
         .attr("y", "-16px") 
         .attr("width", "20px") 
         .attr("height", "20px"); 
        } else if (d.state == "1") { 
         var imgId = "#" + d.name; 
         d3.select(imgId).remove(); 
        } else if (d.state == "3" || d.state == "4") { 
         //d3.select(this) 
         // .style("opacity", 0.4); 

         d3.select(this) 
         .style("filter", function (d, i) { 
          if (i % 2 == 0) { 
           return ("filter", "url(#desaturate)"); 
          } else { 
           return ""; 
          } 
         }); 
        } 

        d3.select(this).append("text") 
        .attr("dy", ".50em") 
        .attr("text-anchor", "end") 
        .attr("font-size", "15px") 
        .attr("fill", "black") 
        .text(function (d) { return d.name; }); 

        d3.select(this).call(force.drag); 
       }) 
       //.call(force.drag) 
       .on('mouseover', tip.show) 
       .on('mouseout', tip.hide); 

       // Delete removed nodes 
       node.exit().remove(); 

       //debugger; 
       force.start(); 
      } 

Ich verstehe, dass gerade jetzt, seine Iterieren über nur neuen Knoten. Kann mir bitte jemand sagen, wie man über die bestehenden Knoten iteriert?

Vielen Dank im Voraus.

Answer 1

Sie können einfach Ihre Knoten auswählen und sie in dem Teil des Codes bearbeiten, in dem die Statusaktualisierung stattfindet.

function updateState() { 
    ... // processing the update 
    d3.selectAll('g.node') //here's how you get all the nodes 
    .each(function(d) { 
     // your update code here as it was in your example 
     d3.select(this) // Transform to d3 Object 
     ... 
    }); 
} 

Wenn das Update sehr häufig der Fall ist, könnte es sich lohnen, die Auswahl in einer Variablen zu speichern und speichern Sie die Zeit, die durch das DOM zu suchen braucht.