d3. js подсказка не показывает - PullRequest
Новая
       16

d3. js подсказка не показывает

0 голосов
/ 15 апреля 2020

Я пытаюсь добавить всплывающую подсказку, по какой-то причине она не отображается. Пожалуйста помоги. Вот код 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 голосов
/ 16 апреля 2020

Проблема вызвана тем, что всплывающая подсказка является HTML div и добавляется в SVG. div не является допустимым тегом SVG, поэтому он не отображается.

Это можно исправить, добавив div к div#graph, как показано ниже: 

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