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

Question

我使用的是 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 图表进行交互？如果是这样，最有效的方法是什么？

Answer 1

是不是很简单:

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 传递给力函数？