D3 svg-overlay with draggable elements

I am using SVG overlay and calling D3 to draw elements on top of the the image when the user clicks on top of it. I understand from svg-overlay that I can use onClick(node, handler) to accept click events on a sub-node and it raises an OpenSeadragon.MouseTracker click event.

The thing is that I need to tell D3 and OSD that this a draggable element.

In this super cool OSD+D3 example there is a working example on D3 elements that it is possible to click and get an OSD event that provides a reference to the D3 element which can be called using D3 calls to do a click dependent action. But since dragging is another type of event I am not really sure what to do.

D3 dragging is done like so and I am trying to use the previous example and doing some kind of monster like this:

d3.selectAll(".aClass").each(function() { 
    return svg-overlay.onClick(this,
        d3.select(this.element)
            .call(d3.drag().on("start",dragged))
    ); 
} );

So I wonder if anyone has tried such a thing, dragging the elements created on top of the SVG-overlay. Any ideas or suggestions are welcome.

[iangilman]

Oh, of course! I’m just not used to having the constrain turned on like that, I suppose.

Looking good! 😃

[iangilman]

I’ve not tried to do such a thing, but I imagine it’ll work better if you allow OSD to do the event tracking and not try to use D3’s event tracking. Looking at onClick it looks like it’s just a thin wrapper around MouseTracker, so you can probably just go around it like so:

function addTracking(node) {
  new $.MouseTracker({
    element: node,
    dragHandler: function(event) {
      // Move node by event.delta 
    }
  }).setTracking(true);
}

d3.selectAll(".aClass").each(function() {
  addTracking(this); 
});