Back

javascript - d3, 多个层叠的svg下实现鼠标的mouseover, 增加tooltip

发布时间: 2021-06-18 07:14:00

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

Back