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規則。有了這條規則，你的路徑永遠不會收到鼠標事件。

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

但是通常這個規則是有原因的，所以刪除它可能會產生不良的副作用，即使經過快速測試，一切似乎都按預期工作。