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

【问题标题】：OpenSeaDragon with D3 svg-overlay draggable elements带有 D3 svg-overlay 可拖动元素的 OpenSeaDragon
【发布时间】：2018-03-21 13:20:55
【问题描述】：

我使用 OpenSeaDragon (OSD) 2.3.1 和 D3v4 在图像上绘制点。当用户点击图片时会绘制这些点。

问题是如何使这些 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，但我不知道如何应用它

【问题讨论】：

标签： javascript d3.js openseadragon

【解决方案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也讨论了这个问题

【讨论】：