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?

Rather than using a mouse, I'm using a Leap Motion. It's a motion sensing device than allows fingers, hands, and gestures to be used rather than a mouse. I have code that draws the

Solution 1:

Is it as simple as:

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
}

where you're simply passing the x and y to the force function after the interaction?

Solution 2:

You don't actually need to simulate events to achieve this (and simulating events probably makes it a bit harder than it needs to be). You simply need to match the leap pointable to a node, set its fixed property to true to prevent the force layout from updating its position and move the node according to the motion of the pointable.

If I understood what you're doing correctly, I think I've already implemented that here. The source is available here.