d3.jsの下位レベルにイベントを渡す方法は？

Question

私はポリゴンとポリゴン上のテキストでd3.jsマップを持っています。そして私はマウスオーバーイベント時にポリゴンの色を変更するイベントを持っています。しかし、マウスがテキストの上にあるとき（テキストはポリゴンの上にあります）、イベントは発生しませんでした。 修正方法？ おかげで断然

chart.selectAll("path") 
    .data(data.features) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .style("fill", function(data) { 
     return regions[data.properties.FID] 
    }) 
    .style("stroke", "#fff") 
    .on("mouseover", function(e) { 
     d3.select(this).style("fill", "#63CBF8"); 
    }) 
chart.selectAll("text") 
    .data(data.points) 
    .enter() 
    .append("text") 
    .attr("class", "labs") 
    .attr("transform", function(d) { 
     return "translate(" + projection(d.geometry.coordinates) + ")"; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d, i) { 
     return (d.properties.name).toString(); 
    }); 

Answer 1

これを行う最も簡単な方法は、まったくクリックやマウスの動作を登録からテキストを防止することによってです。これはpointer-eventsで制御できます。あなたは、CSSまたはJavaScript経由でそれを行うことができます。 `.ATTR（ "ポインタイベント"、「なし：テキスト選択で

CSS

.labs { 
    pointer-events: none; 
} 

javascriptの

chart.selectAll("text") 
    .data(data.points) 
    .enter() 
    .append("text") 
    .attr("class", "labs") 
    .attr("pointer-events", "none");