OpenSeaDragon с перетаскиваемыми элементами D3 svg-overlay

Я использую 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. И мне нужно знать, как захватить указатель this, указывающий на элемент d3, по которому щелкнули.

Я нашел этот пример D3, но не знаю, как его применить


javascript d3.js openseadragon
person lesolorzanov    schedule 21.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не пытался сделать это, но думаю, будет лучше, если вы разрешите OSD отслеживать события и не будете пытаться использовать отслеживание событий D3. Глядя на onClick плагина оверлея SVG, кажется, что это просто тонкая оболочка вокруг 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< /а>

person iangilman    schedule 23.03.2018