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规则。有了这条规则，你的路径永远不会收到鼠标事件。

只需删除此规则即可捕捉点击和鼠标悬停事件。

但是通常这个规则是有原因的，所以删除它可能会产生不良的副作用，即使经过快速测试，一切似乎都按预期工作。