尽管有数据,但工具提示未显示

时间:2019-03-04 10:21:18

标签: javascript d3.js svg tooltip

我有这个d3项目,在其中创建了条形图。我有几个栏,当我将鼠标悬停在特定栏上时,我想显示数据。但是,由于某种原因,尽管存在数据和css,它也不会显示内容。我创建了rects元素为bar和一个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 codepen

1 个答案:

答案 0 :(得分:1)

简单地说:您不能<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/5768908https://stackoverflow.com/a/40720100/5768908)。