是否可以使用非鼠标、非触摸事件与 D3.js 图形进行交互?如果是这样，最有效的方法是什么

Is it possible to use non-mouse, non-touch events to interact with a D3.js graph? If so, what is the most efficient way to go about it?

本文关键字：如果 是什么 方法 有效 交互 触摸 鼠标 可以使 事件 是否 图形      更新时间：2023-09-26

我没有使用鼠标，而是使用Leap Motion。它是一种运动感应设备，允许使用手指、手和手势而不是鼠标。

我有代码绘制用户手指与屏幕相交的点，因此用户的手指在网页上由蓝色圆圈表示（与此代码相同：http://schnipz.github.io/leap-motion-demos/d3.js/index.html）。

我在网页上还有一个力导向图，与此示例相同：bl.ocks.org/mbostock/4062045

我想允许用户在手指（蓝色圆圈）与节点相交时"拖动"节点。

我能够让点击模拟代码工作，但是当我尝试使用 X 和 Y 位置时，例如......

function mouseSim(type, x, y)
{
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
            x, y,
            x, y, false,
            false, false, false, 0/*left*/, null);
    document.dispatchEvent(simulatedEvent);
    console.log(type + " at " + x + ", " + y);
}

我得到了所需的控制台输出，但没有与图形发生交互。

是否可以使用非鼠标、非触摸事件与 D3.js 图形进行交互？如果是这样，最有效的方法是什么？

它像以下一样简单吗：

function mouseSim(type, x, y)
{
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
            x, y,
            x, y, false,
            false, false, false, 0/*left*/, null);
    document.dispatchEvent(simulatedEvent);
    console.log(type + " at " + x + ", " + y);
    doStuffInD3(x,y);
}
function doStuffInD3 (x,y) {
   force directed stuff dependent on x and y
}

在交互之后，您只是将 x 和 y 传递给力函数？

您实际上不需要模拟事件来实现此目的（模拟事件可能会使它比需要的更难一些）。您只需将可指向的跳跃匹配，将其fixed属性设置为 true 以防止力布局更新其位置并根据可指向的运动移动节点。

如果我正确理解你在做什么，我想我已经在这里实现了它。来源可在此处获得。

相关文章：