D3js에서 이미 생성 된 노드를 반복합니다.

Question

힘 지향적 인 그래프를 사용하고 새로 만든 노드를 그래프에 추가하고 있습니다. 이것은 완벽하게 작동합니다.

내 노드에는 "상태"라는 속성이 있으며 계속 변경됩니다. 문제는 내 코드에서 "상태"를 확인하는 조건은 새 노드가 들어올 때만 확인된다는 것입니다. 상태를 검사하기위한 코드.

찾기 아래에있는 내 코드 : 이해

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을 검색하는 데 걸리는 시간을 절약 할 가치가 있습니다.