在mouseover上的linegraph上绘制一条线？ [英] drawing a line on linegraph on mouseover?

问题描述

我正在使用D3.js建立一个折线图。当用户将鼠标悬停在图表上时，我想在图表上绘制一条垂直线，突出显示其与图表线的交集，并显示工具提示，如下图所示：

I am building a line graph with D3.js. When the user mouses over the graph, I would like to draw a vertical line on the graph, highlight its intersection with the chart lines, and show a tooltip, like this screenshot:

我有部分路沿着这条路。这是我的JSFiddle代码： http://jsfiddle.net/BvuBV/1/

I have got part of the way down this road. Here is my code on JSFiddle: http://jsfiddle.net/BvuBV/1/

正如你所看到的，我在 svg 元素上监听鼠标事件，行是（sort of）正确显示：

As you can see, I am listening for mouse events on the svg element, and the line is (sort of) displaying correctly:

// 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


2. 我不知道如何翻译 x y 由 d3.mouse（this）提供的值<回到日期和 c $ c>值，以便我可以在图形上绘制所需的圆，并显示所需的弹出窗口。



1. The mouseover and mousemove events don't seem to fire consistently when I mouse over the SVG element, only sometimes - am I doing something wrong?
2. I don't know how to translate the x and y values provided by d3.mouse(this) back into date and inlet values, so that I can draw the desired circles on the graph, and show the desired popup.

任何帮助都非常感谢。

Any help is very much appreciated.

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

UPDATE: Thanks to help from @Aegis I have solved 1 and part of 2: http://jsfiddle.net/BvuBV/4/

但我还是不知道如何突出交集的悬浮线与两条图线，以及如何检索该点的图线的值。

But I still don't know how to highlight the intersection of the hover line with the two chart lines, and how to retrieve the values of the chart lines at that point.

推荐答案

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

This might help you to get a bit further (I have no experience with D3 at all):

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

1. For some reason your events are bound to the paths, not the base svg element. If you do d3.select(".air-quality").on(..) it seems to work as you would expect.

这篇关于在mouseover上的linegraph上绘制一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！