相关疑难解决方法(0)

我正在用D3.js构建一个折线图.当用户将鼠标悬停在图表上时,我想在图表上绘制一条垂直线,突出显示其与图表线的交集,并显示工具提示,如此截图:

我已经走了这条路的一部分.这是我在JSFiddle上的代码:http://jsfiddle.net/BvuBV/1/

正如您所看到的,我正在侦听svg元素上的鼠标事件,并且行(正在显示)正确显示:

// Add mouseover events.
svg.on("mouseover", function() { 
  console.log('mouseover')
}).on("mousemove", function() {
  console.log('mousemove', d3.mouse(this));
  var x = d3.mouse(this)[0];
  hoverLine.attr("x1", x).attr("x2", x).style("opacity", 1);
}).on("mouseout", function() {
  console.log('mouseout');
  hoverLine.style("opacity", 1e-6);
});

但是,有几个问题:

1. 在mouseover和mousemove事件似乎并不火始终如一当我将鼠标放在SVG元素,只是有时-我做错了什么？
2. 我不知道如何将返回的值x和y值d3.mouse(this)转换为日期和inlet值,以便我可以在图表上绘制所需的圆圈,并显示所需的弹出窗口.

很感谢任何形式的帮助.

更新:感谢@Aegis的帮助,我解决了1和2的一部分:http://jsfiddle.net/BvuBV/4/

但我仍然不知道如何突出悬停线与两个图表线的交叉点,以及如何在该点检索图表线的值.