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

Question

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

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

我在网页上也有一个Force-Directed图，与这个示例相同: 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传递给force函数？

Answer 2

实际上，您不需要模拟事件来实现这一点(并且模拟事件可能会使它比需要的更难一些)。您只需将leap pointable与节点匹配，将其fixed属性设置为true，以防止强制布局更新其位置，并根据pointable的运动移动节点。

如果我理解正确的话，我想我已经实现了那个here。来源是here。