Question

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

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

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

mousemove回调d3js中的路径元素

1 个答案: