时间戳

首页 > 解决方案 > 将鼠标坐标发送到 d3 图表

javascript - 将鼠标坐标发送到 d3 图表

问题描述

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

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

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

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

标签： javascriptd3.jscharts

解决方案

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

  1. 容器 - 触发器

创建自定义 jquery func - 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.

  1. 容器 - 接收器

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

非常感谢@thatOneGuy

推荐阅读