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

Question

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

Answer 1

我已经修改了您的代码以合并您示例中的工具提示 link。关键是：

1.) 将 div 工具提示附加到您的 html body（注意，您的 html 格式错误，它没有 body，我添加了这些标签):

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

2.) 在 mouseover/mouseout 点更新 div 的 html 和 show/hide 工具提示：

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")
  ...

工作示例here。

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

Add tooltip to d3 scatter plot

javascript

tooltip

scatter-plot

d3.js