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 points where the user's fingers intersect with the screen, so the user's fingers are represented by blue circles on the webpage (identical to this code: http://schnipz.github.io/leap-motion-demos/d3.js/index.html).

I also have a Force-Directed graph on the webpage, identical to this example: bl.ocks.org/mbostock/4062045

I would like to allow the user to "drag" a node when a finger (a blue circle) intersects with a node.

I'm able to get click simulation code working, but when I try to use X and Y positions such 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);
}

I get the desired console output, but no interaction with the graph happens.

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?

回答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?

回答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.

来源：https://stackoverflow.com/questions/18798672/is-it-possible-to-use-non-mouse-non-touch-events-to-interact-with-a-d3-js-graph

标签

javascript

d3.js

leap-motion