8

我正在用 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 元素上时， mouseoverandmousemove事件似乎并没有持续触发，只是有时——我做错了什么吗？
  2. 我不知道如何将提供的x和y值转换d3.mouse(this)回日期和inlet值，以便我可以在图表上绘制所需的圆圈，并显示所需的弹出窗口。

很感谢任何形式的帮助。

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

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

4

2 回答 2

13

我知道这已经被标记为已回答，但对于未来的谷歌用户来说，这显示为最佳结果......可以在此处找到鼠标悬停垂直线的工作示例：http: //bl.ocks.org/威尔图曼/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")});
于 2014-04-07T20:16:52.877 回答
5

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

  1. 由于某种原因，您的事件绑定到路径，而不是基本 svg 元素。如果你这样做d3.select(".air-quality").on(..)，它似乎会像你期望的那样工作。
于 2013-09-18T21:53:05.600 回答