如何在d3.js中将事件传递给较低级别​​？

Question

我有一个带有多边形的d3.js地图和一个超过多边形的文本。我有一个事件.on会在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");