Подсказка не отображается несмотря на наличие данных - PullRequest
Новая
       42

Подсказка не отображается несмотря на наличие данных

0 голосов
/ 04 марта 2019

У меня есть проект d3, где я создал гистограмму.У меня есть несколько баров, и я хочу, чтобы данные отображались при наведении указателя мыши на определенный столбец.Однако по какой-то причине он не отображает содержимое, несмотря на наличие данных и CSS.Я создал элементы rects в виде столбцов и элемент div с классом всплывающей подсказки, включающей данные.Пожалуйста помоги.

Вот мой код: 

  chart.selectAll("rect")
    .data(json.data)
    .enter()
    .append("rect")
    .attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
    .attr("y", (d) => yScale(d[1]))
    .attr("height", (d) => height - yScale(d[1]))
    .attr("width", xScale.bandwidth())
    .attr("class", "rect-col")

    .append("div")
    .attr("class", "tooltip")
    .text((d) => d[0] + d[1])
    .on("mouseenter", function (d, i) {
      //d3.select(this).style("fill", "#EE9A2F");
      d3.select(this).style("visibility", "visible");


    })
    .on("mouseleave", function (d, i) {
      //d3.select(this).style("fill", "#EECF10");
      d3.select(this).style("visibility", "visible");
    });

мой css: 

.tooltip {           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: green;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;    
  color: red;
  visibility: hidden;

}

ссылка на мой кодовый блок codepen

1 Ответ

0 голосов
/ 04 марта 2019

Проще говоря: вы не можете добавить <div> в SVG <rect>.

Решение здесь заключается в создании выделения для div ... 

const tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip");

... и затем внутри "mouseenter" слушателя прямоугольников: 

tooltip.style("visibility", "visible")
    .text(d[0] + d[1])

Вот ваш обновленный CodePen, под диаграммой вы увидите всплывающую подсказку: https://codepen.io/anon/pen/LaZgvp?editors=0010. Это, вероятно, приведет к следующему вопросу: «Как расположить всплывающую подсказку над / рядом с соответствующим прямоугольником?» Ответ на этот вопрос, конечно же, дубликат, можно найти с помощью простого поиска(например: https://stackoverflow.com/a/41625629/5768908 и https://stackoverflow.com/a/40720100/5768908).

...