d3：階層的なエッジバンドルのリンクでのマウスのクリック

Question

私はHierarchical edge bundling caseを複製しますが、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'); 
    }); 

私のコードはhereです。

Answer 1

問題は、SVGパスに一致するpointer-events: none; CSSルールです。このルールでは、パスはマウスイベントを受け取ることはありません。

クリックとマウスオーバーイベントを捕捉できるようにするには、このルールを削除するだけです。

しかし、一般的に、このルールは理由があるため、簡単なテストの後にすべてが期待どおりに機能していたとしても、削除することは望ましくない副作用を招く可能性があります。