Question

我一直在尝试修改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);

Answer 1

我认为你想调整你的bisectDate功能（可以在你链接的jsfiddle中看到）。

如果您使用：

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

（使用d.x代替d.date），它为我工作。

这是因为您将x坐标存储在x（formatted_data）中，而Mike Bostock的示例使用.date。因此，d3.bisect无法找到合适的值。

鼠标悬停效果D3.js

1 个答案: