d3 : 계층 적 엣지 묶기 링크 클릭시

Question

Hierarchical edge bundling case을 복제하려고하지만 마우스 오버를 추가하고 생성 된 링크 (svg의 경로)를 클릭하려고합니다. .on("click") 또는 .on("mouseover")을 link에 추가하면 이벤트 리스너에있는 것 외에는 작동하지 않습니다.

나는 예에 수행 한 변경

했다 :

이

link = link 
    .data(bundle(links)) 
    .enter().append("path") 
    .each(function(d) { 
    d.source = d[0], d.target = d[d.length - 1]; 
    }) 
    .attr("class", "link") 
    .attr("d", line) 
    .on('click', function(d) { 
    alert('mouseover'); 
    }); 

내 코드가 here입니다.

Answer 1

문제는 SVG 경로와 일치하는 pointer-events: none; CSS 규칙입니다. 이 규칙을 사용하면 경로가 마우스 이벤트를 수신하지 않습니다.

단순히이 규칙을 제거하면 클릭 및 마우스 오버 이벤트를 잡을 수 있습니다.

그러나 일반적으로이 규칙은 이유 때문에 제공되므로 빠른 테스트 후 모든 것이 예상대로 작동하는 것처럼 보이더라도 제거하면 바람직하지 않은 부작용이 발생할 수 있습니다.