d3.js工具提示不显示

时间:2020-04-15 17:01:23

标签: d3.js tooltip

我正在尝试添加工具提示,由于某些原因它没有显示。请帮忙。这是代码https://codepen.io/gladiator_kris/pen/pojgEyQ?editors=0010

 var tooltip = svg.append("div")
                      .attr("id", "tooltip")
                      .style("opacity", 0.8);

    .on("mouseover", function(d) {
      tooltip.style("display", "flex")
             .html(function() {return 'tooltip'})
             .style("left", (d3.event.pageX + 10)+"px")
             .style("top", (d3.event.pageY - 28) + "px")
    })
    .on("mouseout", () => {
      tooltip.style("display", "none")
});

非常感谢!

1 个答案:

答案 0 :(得分:0)

该问题是由于工具提示是HTML div,并被附加到SVG所致。 div不是有效的SVG标签,因此不会显示。

可以通过将div附加到div#graph来解决此问题,如下所示:

var tooltip = d3.select("#Graph").append("div")