鼠标悬停效果 D3.js

Mouseover Effect D3.js

本文关键字：D3 js 悬停 鼠标      更新时间：2023-09-26

我一直在尝试修改 D3 提供的示例.js以创建一个阶跃图，我可以将鼠标悬停在每个步骤上以获取值的详细信息。

目前我正在查看：

http://bl.ocks.org/mbostock/3902569

我的情节是这样的：

http://jsfiddle.net/q47r3pyk/

在玩了几个小时的 JavaScript 之后。它接近我的最终结果，但如果您尝试将鼠标悬停在点上，则只会在屏幕的左侧手柄侧获得一个值。

如何让悬停效果显示在放置鼠标的位置上？

任何关于我做错了什么的建议将不胜感激。

我的鼠标悬停部分如下所示：

var focus = svg.append("g")
  .attr("class", "focus")
  .style("display", "none");
focus.append("circle")
  .attr("r", 4.5);
focus.append("text")
  .attr("x", 9)
  .attr("dy", ".35em");
svg.append("rect")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height)
  .on("mouseover", function() { focus.style("display", null); })
  .on("mouseout", function() { focus.style("display", "none"); })
  .on("mousemove", mousemove);
function mousemove() {
  var x0 = x.invert(d3.mouse(this)[0]),
      i = bisectDate(formatted_data, x0, 1),
      d0 = formatted_data[i - 1],
      d1 = formatted_data[i],
      d = x0 - d0.x > d1.x - x0 ? d1 : d0;
  focus.attr("transform", "translate(" + x(d.x) + "," + y(d.y) + ")");
  focus.select("text").text(d.y);

我认为你想调整你的bisectDate函数（如你链接的jsfiddle所示）。

如果您使用： 

bisectDate = d3.bisector(function(d) { return d.x; }).left;

（使用 d.x 而不是 d.date ），它对我有用。

这是因为您将x坐标存储在x（以 formatted_data 为单位），而 Mike Bostock 的示例使用 .date 。因此，d3.bisect找不到适当的值。

相关文章：