将工具提示添加到d3散点图中

Add tooltip to d3 scatter plot

本文关键字：散点图 d3 工具提示 添加      更新时间：2023-09-26

我在d3.js中得到了以下散点图http://gkalliatakis.github.io./现在我想每次鼠标在三角形上时添加时间提示（x轴的值）。我读了很多例子：http://bl.ocks.org/weiglemc/6185069但我无法为我的项目修改它们。有什么想法吗？

我已经修改了您的代码，以包含示例链接中的工具提示。关键是：

1.）将div工具提示附加到您的html正文（注意，您的html格式错误，没有正文，我添加了这些标签）：

 var tooltip = d3.select('body')
      .append('div')
      .attr('class', 'tooltip')
      .style("opacity", 0);

2.）在鼠标悬停/鼠标移出点时，更新div的html并显示/隐藏工具提示：

svg.selectAll(".point")
  .data(session_data)
  .enter()
  .append("path")
  .on("mouseover", function(d, i) { // show it and update html
    d3.select('.tooltip')
    tooltip.transition()
      .duration(200)
      .style("opacity", .9);
    tooltip.html(d.x)
      .style("left", (d3.event.pageX + 5) + "px")
      .style("top", (d3.event.pageY - 28) + "px");
  })
  .on("mouseout", function(d, i) {
    tooltip.transition()
      .duration(500)
      .style("opacity", 0);
  })
  .attr("class", "point")
  ...

这里的工作示例。

相关文章：