谷歌图表和svg线的交叉点

Question

Svg line not displayed on google charts?

参考这个问题，我想找出svg线切割谷歌图表的点。

这是http://jsfiddle.net/nc6uf/

的小提琴链接

我想找到鼠标在鼠标移动事件中与谷歌图表相交的点

  graph.on('mousemove', function() {
            line.attr("y1", d3.event.y - 50);
            line.attr("y2", d3.event.y - 50);
        });

Answer 1

每张Google图表都是在自己的div中的SVG中绘制的。 SVG对象只能在元素中绘制，并且由于您的示例中有两个SVG画布（一个在顶部，一个在底部），因此您的线条将仅绘制在您添加线条的元素中。因为您使用了d3.select（），所以您选择了满足条件的第一个元素＆＃34; svg＆＃34;。

您可以通过在示例中更改此行来看到第二个SVG画布与您的鼠标移动进行交互：

 var graph = d3.select('svg');

为：

 var graph = d3.selectAll('svg');

如果您希望线条通过两个图表，则需要在同一个SVG画布上绘制图表。