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

Question

我有一个 d3.js map ，其中包含多边形和这些多边形上的文本。我有一个事件 .on ，它可以在鼠标悬停事件上更改多边形的颜色。但是当鼠标位于文本上方(文本位于多边形上方)时，事件不会触发。 如何修复它？ 谢谢

 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");