홈>

javascript - D3js에서 노드를 가리키면 여러 노드의 툴팁 표시

D3 예제 사용 (1) 및 (2) , D3에서 축소 가능한 트리 뷰를 만들었습니다. 여기서 각 트리 노드에는 툴팁에 정보가 있습니다.

내 작품 여기 를 참조하십시오. 나무에서 node1  그리고 node2  접거나 펼칠 수 있습니다. node2 확장   node4 를 만들 것입니다  그리고 node5 .

각 노드가 호버링에 대한 툴팁을 표시합니다 ( mouseover,mousemove,mouseout 사용)  이벤트). 모든 노드는 부모와 자식을 알고 있습니다.

이제 나의 요구 사항은 노드 X가 호버링 될 때 루트에서 X로 경로에있는 모든 노드의 툴팁을 동시에 볼 수 있어야한다는 것이다.

예 : node4 를 가리키면 , 세 노드의 툴팁 : node1 , node2  그리고 node4  보일 것입니다.

예제에서 어떻게 달성 할 수 있습니까?

javascriptd3.jstreeviewmousemovemousehover
  • 답변 # 1

    노드가 가리키면 툴팁이있는 div를 만들어이 문제를 해결했습니다.

    부모를 재귀 적으로 호출했습니다.

    function mouseover(d) {
    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 1)
        .style("left", (d.y+120) + "px")
        .style("top", (d.x-20) + "px")
        .html(
            "<table style='font-size: 10px; font-family: sans-serif;' >"+
            "<tr><td>Name: </td><td>"+d.name+"</td></tr>"+
            "<tr><td>Value: </td><td>"+d.value+"</td></tr>"+
            "</table>"
        );
    if (d.parent) mouseover(d.parent);
}

    마우스 아웃 이벤트에서 tooptip 클래스로 모든 div를 호출하고 제거했습니다.

    function mouseout(d) {
    d3.select("body").selectAll('div.tooltip').remove();
}

    여기서 수정 된 구현을 찾으십시오 : https://bl.ocks.org/sushilverma208016/0e7d251e1651f7193b965c33edd0ca36

  • 이전 c++ - 컴파일러 오류보고가 /configure에 너무 가혹합니다
  • 다음 postgresql - 파이썬에서 다른 클래스에 정의 된 값을 사용하여 클래스를 정의하여 dbModel 유형을 정의하는 방법은 무엇입니까?
    • 관련 질문