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规则。使用此规则，您的路径永远不会收到鼠标事件。

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

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