d3.js - 在鼠标悬停时在折线图上画一条线？

Question

我正在用 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);
});

但是，有几个问题:

mouseover和 mousemove当我将鼠标悬停在 SVG 元素上时，事件似乎不会持续触发，只是有时 - 我做错了什么吗？

我不知道如何翻译 x和 y d3.mouse(this) 提供的值回到日期和inlet值，以便我可以在图表上绘制所需的圆圈，并显示所需的弹出窗口。

很感谢任何形式的帮助。

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

但我仍然不知道如何突出显示悬停线与两条图表线的交点，以及如何检索该点的图表线的值。

Answer 1

我知道这已经被标记为已回答，但对于 future 的谷歌用户来说，这会显示为最高结果......可以在此处找到鼠标悬停垂直线的工作示例:http://bl.ocks.org/WillTurman/4631136

这是垂直线代码的相关部分:

  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

  d3.select(".chart")
      .on("mousemove", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});