javascript - d3js 中路径元素上的 mousemove 回调

Question

链接到示例:http://bl.ocks.org/mbostock/1667367

我正在尝试扩展以下示例，以便当我将鼠标移动到图表上并注册 mousemove 回调时，我将获取光标位置的相应数据。在最好的情况下，如果我将鼠标悬停在该位置上，我将获得 2000 年 1 月的当前价格。我尝试了以下方法:

focus.append("path")
  .on('mousemove', function(d) {
      console.log(d);
  })
  .datum(data)
  .attr("clip-path", "url(#clip)")
  .attr("d", area);

但是如果我这样做，每次触发事件时我得到的只是完整的数据。 d3.js 中是否实现了功能来实现我的目标，或者我是否必须手动使用事件坐标？

提前致谢:)

Answer 1

我认为你可能必须这样做，但使用秤并不太难:

focus.append("path")
  .on('click', function(d) {
    console.log(event.offsetX - margin.left);
    var date = x.invert(event.offsetX - margin.left);
    console.log(date);

    var i = 0;
    while (d[i+1].date < date){
      i++;
    }
    console.log(d[i].date);
    console.log(d[i].price);
  })


1104.49 
893 
Sun Feb 28 2010 11:11:52 GMT-0600 (Central Standard Time) 
Mon Feb 01 2010 00:00:00 GMT-0600 (Central Standard Time) 
1104.49 

或者，除了面积图之外，您还可以绘制显示月份/价格的标记，并向每个标记添加 onclick 事件。

可能有更好的方法来做到这一点； offsetX 对于 Firefox 来说很时髦。