그래프를 업데이트하기 위해 D3 강제 레이아웃에서 데이터 (...) 사용

Question

D3 강제 레이아웃을 사용하고 사용자가 개별 노드를 선택할 수 있도록 코드를 추가했습니다 (여기서는 select가 D3 select()와 관련이 없지만 표시 함). 사용자 관점에서 강조 표시된 상태). 한 번에 하나의 노드 만 선택해야합니다. 따라서 사용자가 선택되지 않은 노드를 클릭하면 선택된 노드의 선택을 취소하려고합니다.

노드에서 선택한 속성을 사용하고 있으며 D3 데이터 (...) 또는 데이텀 (...) 메소드를 사용하여 속성을 설정하는 데 어려움을 겪고 있습니다. 사실, 나는 그런 식으로 작동하지 못했습니다. 내가 지금 가지고있는 것은 일종의 kludgy처럼 보이므로 깨끗한 방법이 있기를 바란다.

function deselectAll() { 
    var sc = d3.selectAll("circle") 
     .filter(function(d) {return (d.selected == "y")}); 

    var circles = sc.data(); 

    sc.transition() 
     .duration(50) 
     .style("stroke-width", "1px") 
     .style("stroke", "#3182bd"); 

    if(null != circles && circles.length > 0) { 
     for(i=0; i<circles.length; i++) { 
      circles[i].selected = "n"; 
     } 
    } 
} 

문제는 체인에 .data ("n")를 추가해도 'selected'가 'n'으로 설정되지 않습니다. 그것을 d3 사슬의 일부로 할 수 있습니까?

Answer 1

d3의 많은 선택 (또는 전환) 기능은 각 노드의 현재 데이터를 정의 된 기능으로 전달합니다. 이 데이텀의 내용은 언제든지 수정할 수 있습니다. 당신이 "N"이 같은 필터링 된 선택을 사용할 수 있습니다 "Y"로에서 d.selected == "y"이 노드를 설정하려면

, 귀하의 예제를 사용 :

이 기능은 각각에 대해 한 번 호출됩니다

sc.each(function(d) { 
    d.selected = "n"; 
}); 

노드를 선택하고 (각 필터에 대해 "y"가 선택됨) 데이텀의 속성 값을 간단히 변경할 수 있습니다.