在鼠标悬停上在线图上画一条线？

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);
});

然而，有一些问题：

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

非常感谢任何帮助。

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

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

Answer 1

我知道这已被标记为已回答，但是对于未来的googlers来说，这会显示为最佳结果...有关鼠标悬停的垂直线的工作示例可以在此处找到：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")});

Answer 2

这可能会帮助你更进一步（我根本没有D3经验）：

1. 由于某种原因，您的事件绑定到路径，而不是基本svg元素。如果你做d3.select(".air-quality").on(..)它似乎按照你的预期工作。