Question

我有以下散点图usind d3.js http://gkalliatakis.github.io./ 现在我想在每次鼠标悬停在三角形上时添加时间（x轴的值）的tootltip。我看了很多例子： 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")
  ...

工作示例here。

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

1 个答案: