Итерация над уже созданными узлами в D3js

Question

Я использую нарисованный по силе граф и добавляю вновь созданные узлы к графику. Это прекрасно работает.

У меня есть свойство, называемое «состояние», которое продолжает меняться. Проблема, с которой я столкнулся, заключается в том, что в моем коде условие проверки состояния проверяется только при входе нового узла. Когда обновляется, мой JSON обновляется с состоянием, но выполнение не достигает код для проверки состояния.

Найти мой код ниже:

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(); 
      } 

Я понимаю, что сейчас его Перебор только новые узлы. Может кто-нибудь, пожалуйста, скажите мне, как перебирать существующие узлы?

Заранее спасибо.

Answer 1

Вы можете просто выбрать свои узлы и управлять ими в части вашего кода, где происходит обновление состояния.

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 
     ... 
    }); 
} 

Если обновление происходит очень часто, это может быть стоит хранить выбор в переменной и сэкономить время, необходимое для поиска через DOM.