d3: Hierarchische Edge-Bundle mit Mausklick auf Links

Question

Ich versuche, die Hierarchical edge bundling case zu replizieren, aber Mouseover hinzufügen und klicken Sie auf die Links erstellt (Pfad in Svg). Wenn ich neben dem Ereignis-Listener .on("click") oder .on("mouseover") zu link hinzufüge, funktionieren sie nicht.

Die Veränderung, die ich zum Beispiel gemacht haben war:

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'); 
    }); 

Mein Code here ist.

Answer 1

Das Problem ist die CSS-Regel pointer-events: none;, die den SVG-Pfaden entspricht. Mit dieser Regel erhalten Ihre Pfade nie die Mausereignisse.

Entfernen Sie einfach diese Regel, um Klicks und Mouseover-Ereignisse zu erfassen.

Aber im Allgemeinen ist diese Regel aus einem bestimmten Grund vorhanden, so dass sie unerwünschte Nebeneffekte haben könnte, selbst wenn nach einem kurzen Test alles wie erwartet funktioniert.