将鼠标坐标发送到 d3 图表

Question

>我有一个 d3 图表，我想从另一个图表发送鼠标坐标，

我在目标图表上远程触发鼠标事件。 直到那里，一切都很好。 问题是在下面的代码中获取鼠标坐标。

$chart.on('mousemove', function () {
var mouse = d3.mouse(this);

鼠标值始终为 NaN。 我怀疑是因为鼠标在另一个容器上。 有没有办法在这里获取这些鼠标值？

Answer 1

所以这个想法实际上是"如何从一个容器触发另一个容器的事件"。

1. 容器 - 触发器

创建自定义 jquery 函数 - jquery 效果很好，因为它是选择 html 元素的最简单方法。

$.fn.triggerSVGEvent = function(eventName, extraParameter) {
var event = document.createEvent('SVGEvents');
event.initEvent(eventName, true, true);
event.extraParameter = extraParameter;  //this can be extended how you like
this[0].dispatchEvent(event);
return $(this);
};

然后从要触发事件的位置，

var $el = $('#chart-two');
$el.triggerSVGEvent('mousemove', mouse); 
//I am sending out mouse coordinates as that was my main challenge.

2. 容器 - 接收器

   var $el = $('#chart-two'(; $el.on('mousemove'， function(( { var mouse = d3.event.extraParameter; }

非常感谢@thatOneGuy