javascript - d3, 多个层叠的svg下实现鼠标的mouseover, 增加tooltip
访问量: 1078
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") })