在鼠标悬停上画线上的一行？

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. 在mouseover和mousemove事件似乎并不火始终如一当我将鼠标放在SVG元素,只是有时-我做错了什么？
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(..)它似乎像你期望的那样工作。