带有 D3 svg-overlay 可拖动元素的 OpenSeaDragon

Question

我使用带有 D3v4 的 OpenSeaDragon (OSD) 2.3.1 在图像上绘制点。当用户点击图像时绘制此点。

问题是如何使这些 d3 对象在 OSD 中可拖动。

问题出在 OSD 必须处理与图像查看器交互的所有鼠标活动。

目前我捕获事件的鼠标处理程序是

var click_handler= function(event) {        
    if(event.quick){
        drawMarker(...); //this works fine     
    }else{            
        ...
    }
};

然后我使用 OSD MouseTracker 来设置处理程序

var fixed_mouse_tracker = new OpenSeadragon.MouseTracker({
    element: OSDviewer.canvas,
    clickHandler: click_handler
}).setTracking(true);

如果我不需要拖动元素，这很好用。从现在开始，所有的点击都将由 OSD 处理，而 D3 对象不知道它们被点击了。我尝试使用

d3.select("elementclass").on('mouseup', function(){console.log(d3.mouse(this)[0], d3.mouse(this)[1])});

但它不起作用。

另一种可能性是使用 OSD 的 event.originalEvent。而且我需要知道如何捕获指向被单击的 d3 元素的 this 指针。

我找到了 this exmaple of D3 但我不知道如何应用它

Answer 1

我没有尝试过这样的事情，但我想如果你允许 OSD 进行事件跟踪而不是尝试使用 D3 的事件跟踪，它会工作得更好。查看 SVG 叠加插件的 onClick，它看起来只是 MouseTracker 的薄包装，因此您可以像这样绕过它：

function addTracking(node) {
  new $.MouseTracker({
    element: node,
    dragHandler: function(event) {
      var viewportDelta = viewer.viewport.deltaPointsFromPixels(event.delta);
      // Move node by viewportDelta
    }
  }).setTracking(true);
}

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

https://github.com/openseadragon/openseadragon/issues/1425

中也讨论了这个问题

带有 D3 svg-overlay 可拖动元素的 OpenSeaDragon

OpenSeaDragon with D3 svg-overlay draggable elements

javascript

d3.js

openseadragon