d3：用鼠標單擊鏈接的分層邊緣捆綁

Question

我正在嘗試復制Hierarchical Edge Bundles的情況，但添加了mouseover並單擊到創建的鏈接（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');
  });

我的代碼在這里 。

Answer 1

問題是pointer-events: none; 與SVG路徑匹配的CSS規則。 使用此規則，您的路徑將永遠不會收到鼠標事件。

只需刪除此規則即可捕獲點擊和鼠標懸停事件。

但是通常存在此規則是有原因的，因此即使快速測試后一切似乎都按預期運行，將其刪除可能會帶來不良的副作用。