D3 힘 방향 그래프에서 선택한 노드, 링크 및 하위 항목을 강조 표시합니다.

D3 힘 방향 그래프에서 선택한 노드, 링크 및 하위 항목을 강조 표시합니다.

---

D3에서 힘 방향 그래프를 작업 중입니다. 다른 모든 노드와 링크를 더 낮은 불투명도로 설정하여 mouseover'd 노드, 해당 링크 및 하위 노드를 강조 표시하고 싶습니다.

이 예제에서 http://jsfiddle.net/xReHA/ 에서는 모든 링크와 노드를 페이드 아웃 한 다음 연결된 링크에서 페이드 인 할 수 있지만 지금까지는 우아하게 페이드 인 할 수 없었습니다. 현재 마우스 오버 된 노드의 자식 인 연결된 노드.

다음은 코드의 주요 기능입니다.

function fade(opacity) {
    return function(d, i) {
        //fade all elements
        svg.selectAll("circle, line").style("opacity", opacity);

        var associated_links = svg.selectAll("line").filter(function(d) {
            return d.source.index == i || d.target.index == i;
        }).each(function(dLink, iLink) {
            //unfade links and nodes connected to the current node
            d3.select(this).style("opacity", 1);
            //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
            d3.select(dLink.source).style("opacity", 1);
            d3.select(dLink.target).style("opacity", 1);
        });
    };
}

Uncaught TypeError: Cannot call method 'setProperty' of undefinedsource.target에서로드 한 요소에 불투명도를 설정하려고 하면 오류가 발생합니다. 나는 이것이 해당 노드를 d3 객체로로드하는 올바른 방법이 아니라고 생각하지만 링크의 대상 또는 소스와 일치하는 노드를 찾기 위해 모든 노드를 다시 반복하지 않고는로드하는 다른 방법을 찾을 수 없습니다. 성능을 합리적으로 유지하기 위해 필요한 것 이상으로 모든 노드를 반복하고 싶지 않습니다.

http://mbostock.github.com/d3/ex/chord.html 에서 링크를 페이드하는 예제를 가져 왔습니다 .

그러나 연결된 자식 노드를 변경하는 방법은 표시되지 않습니다.

이 문제를 해결하거나 개선하는 방법에 대한 좋은 제안은 격렬하게 찬성 될 것입니다. :)

---

오류는 해당 데이터 개체와 연결된 DOM 요소가 아닌 데이터 개체 (d.source 및 d.target)를 선택하기 때문입니다.

강조 표시된 줄이 작동하지만 다음과 같이 코드를 단일 반복으로 결합 할 것입니다.

 link.style("opacity", function(o) {
   return o.source === d || o.target === d ? 1 : opacity;
 });

이웃 노드를 강조하는 것은 각 노드의 이웃을 알아야하기 때문에 더 어렵습니다. 이 정보는 노드 배열과 링크 배열로 모두 가지고 있기 때문에 현재 데이터 구조로 결정하기가 쉽지 않습니다. 당신이 두 개의 노드 여부를 결정 얼마나 자신을 두 번째에 대한 DOM을 잊어하고 질문 a과 b이웃입니까?

function neighboring(a, b) {
  // ???
}

이를 수행하는 비용이 많이 드는 방법은 모든 링크를 반복하고 a와 b를 연결하는 링크가 있는지 확인하는 것입니다.

function neighboring(a, b) {
  return links.some(function(d) {
    return (d.source === a && d.target === b)
        || (d.source === b && d.target === a);
  });
}

(이는 링크가 방향이 지정되지 않은 것으로 가정합니다. 순방향 연결된 인접 항목 만 강조 표시하려면 OR의 두 번째 절반을 제거하십시오.)

이것을 계산하는 더 효율적인 방법은 만약 당신이 자주해야한다면, a와 b가 이웃인지 테스트하기 위해 일정한 시간 조회를 허용하는 맵이나 행렬을 갖는 것입니다. 예를 들면 :

var linkedByIndex = {};
links.forEach(function(d) {
  linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

이제 다음과 같이 말할 수 있습니다.

function neighboring(a, b) {
  return linkedByIndex[a.index + "," + b.index];
}

따라서 이제 노드를 반복하고 불투명도를 올바르게 업데이트 할 수 있습니다.

node.style("opacity", function(o) {
  return neighboring(d, o) ? 1 : opacity;
});

(또한에서 모든 노드에 대해 자체 링크를 설정 linkedByIndex하거나 d스타일을 계산할 때 직접 테스트 하거나! important css :hover스타일 을 사용하여 마우스 오버 링크 자체를 특수한 경우로 지정할 수 있습니다 .)

코드에서 마지막으로 변경하려는 것은 불투명도보다는 채우기 불투명도와 획 불투명도를 사용하는 것입니다. 왜냐하면 이것들은 훨씬 더 나은 성능을 제공하기 때문입니다.

참고 URL : https://stackoverflow.com/questions/8739072/highlight-selected-node-its-links-and-its-children-in-a-d3-force-directed-grap