如何将事件传递到d3.js中的较低级别？

Question

我有一个d3js地图与多边形和一个文字在thoose多边形。并且我有一个事件。它在mouseover事件中改变了多边形的颜色。但是当鼠标放在文本上（文本位于多边形上）时，事件不会触发。 如何解决它？ 感谢

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来完成。这里有以下两种方法：

CSS

.labs { 
    pointer-events: none; 
} 

的JavaScript

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