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

Question

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

Answer 1

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

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

这里的工作示例。