0

示例链接：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 中是否有实现我的目标的功能，还是我必须手动处理事件坐标？

提前致谢 ：）

4

1 回答 1

2

我认为您可能必须这样做，但是使用天平并不太难：

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 中很时髦。

于 2013-05-22T17:57:36.093 回答