d3：使用鼠标点击链接的分层边缘捆绑答案

【问题标题】：d3: Hierarchical Edge Bundling with mouse click on linksd3：使用鼠标点击链接的分层边缘捆绑
【发布时间】：2016-11-27 05:01:26
【问题描述】：

我正在尝试复制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。

【问题讨论】：

标签： javascript d3.js svg mouseclick-event hierarchical

【解决方案1】：

问题在于与 SVG 路径匹配的 pointer-events: none; CSS 规则。使用此规则，您的路径永远不会收到鼠标事件。

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

但一般来说，这条规则的存在是有原因的，因此删除它可能会产生不良的副作用，即使在快速测试之后一切似乎都按预期工作。

【讨论】：

是的，我确认，我删除了它，现在它可以正常工作了。谢谢。