기본 데이터가 변경 될 때 D3 강제 레이아웃 요소를 업데이트하는 방법

Question

강제 레이아웃 예제 (http://bl.ocks.org/1153292) 중 하나를 사용하여 웹 사이트에 네트워크를 표시하고 있습니다.

사용자는 주어진 시간에 볼 링크 유형을 선택할 수 있습니다. 링크 유형 A를보고 링크 유형 B를 추가 한 다음 링크 유형 A를 제거하면 유형 B의 나머지 링크가 A 색상으로 표시됩니다.

이것은 svg 다이어그램에 링크를 추가하기 위해 실행되는 코드입니다. 나는 그것에서 링크를 추가하고 제거함으로써 배열 this.links을 바꿀 것이다. 당신이 볼 수 있듯이 나는 클래스의 속성을 설정하지만, 업데이트되지 않은 -이 링크 A의 유형 남아

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(this.links) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

나는 현재 틱 함수 내에서 클래스의 속성을 업데이트하여이 문제를 해결

그러나이 과정 떨어져 원인을 불필요한 작업.

입력 조작이 존재하는 요소와 새 요소의 병합 된 선택 사항을 리턴한다는 것을 읽었습니다. 따라서 attr 조작이 존재하는 항목을 갱신하고 새 항목을 설정해야합니다.

무엇이 누락 되었습니까?

Answer 1

나는 answer in this post

var circle = svg.selectAll("circle") 
    .data(data); 

circle.enter().append("circle") 
    .attr("r", 2.5); 

circle 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

circle.exit().remove(); 

대답은 내가 selectAll.data의 결과가 아니라 APPEND 연산자의 결과에 ATTR 연산자를 호출 할 필요가 있다는 것입니다 발견했습니다.

Answer 2

강제 지정 레이아웃에서 노드를 추가하고 제거하는 예가 http://bl.ocks.org/1095795입니다. 링크와 노드는 별도로 처리해야하며 강제 레이아웃을 다시 시작해야합니다.

function restart() { 
    var link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.source.id + "-" + d.target.id; }); 

    link.enter().insert("svg:line", "g.node") 
     .attr("class", "link"); 

    link.exit().remove(); 

    var node = vis.selectAll("g.node") 
     .data(nodes, function(d) { return d.id;}); 

    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag); 

    nodeEnter.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png") 
     .attr("x", "-8px") 
     .attr("y", "-8px") 
     .attr("width", "16px") 
     .attr("height", "16px"); 

    nodeEnter.append("svg:text") 
     .attr("class", "nodetext") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.id }); 

    node.exit().remove(); 

    force.start(); 
}