1

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

4

2 回答 2

0

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

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

于 2013-09-14T09:38:42.980 回答
0

是不是很简单：

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 函数？

于 2013-09-14T08:48:27.283 回答