d3 트리 나뭇잎에 마우스 오버 팝업 추가

Question

d3을 사용하여 접을 수있는 애니메이션 들여 쓰기 트리를 구성하는이 멋진 예제 here을 보았습니다.

mouseover 이벤트가 리프 노드에서 발생할 때 어떻게 작동하는 팝업을 추가 할 수 있습니까? 팝업이 실제 노드 옆에 나타나야합니다.

Answer 1

당신은 nodeEnter.append에 이벤트 CSTE 연구진은 추가하여 사용자가 마우스 오버와 마우스를 이동하면 원하는 거의 모든 것을 할 수

("SVG : 원") 섹션 :이 두 라인과 함께

nodeEnter.append("svg:circle") 
    //.attr("class", "node") 
    //.attr("cx", function(d) { return source.x0; }) 
    //.attr("cy", function(d) { return source.y0; }) 
    .attr("r", 4.5) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
    .on("mouseover", addLabel) 
    .on("mouseout", clearLabel) 
    .on("click", click); 

, 당신이해야합니다 addLabel 및 clearLabel 함수 (예 : 자식 노드를 표시하거나 숨기는 click 함수)를 작성합니다.

노드가 함수에 위치를 전달하거나 마우스를 기준으로 위치를 지정하여 팝업을 나타낼 수 있습니다.