javascript - d3, 多个层叠的svg下实现鼠标的mouseover, 增加tooltip
访问量: 1129
https://stackoverflow.com/questions/55173104/can-d3-pass-a-mouseover-event-to-a-layer-underneath
chart.selectAll("text")
.data(data.points)
.enter()
.append("text")
.attr("class", "labs")
.attr("pointer-events", "none"); // 顶层的SVG增加这个就可以了。就会让下层的接到事件
再来个例子:
tag_g.append("path")
.attr("d", path(e))
// 填充颜色
.attr('fill', linear(emission_of_current_province))
// 边框
.attr("stroke", linear(emission_of_current_province))
//.attr("stroke", 'red')
.attr("stroke-width", 0.1)
.on("mouseover", function(event,d){
// 改这里即可
tooltip.text(`${e.properties.name}: ${emission_of_current_province.toFixed(2)}`);
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(event,d){
return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(event,d){
return tooltip.style("visibility", "hidden")
})