D3 объединение выбора с масштабированием/панорамированием

Question

Я хочу реализовать выбор узла дерева вместе с масштабированием/панорамированием. Учитывая, что зум/панорама конфликтует с выбором узлов с помощью мыши (перетаскивание) I реализовано как два отдельных прослушивателя, между которыми я могу переключаться с помощью клавиши CTRL . Как это:

function toggleSelectZoom() { 
    if (useZoom) { 
     useZoom = false; 
     zoomListener.on("zoom", null); 
     container.classed("select", true) 
      .on("mousedown.select", startNodeSelection) 
      .on("mousemove.select", nodeSelection) 
      .on("mouseup.select", endNodeSelection); 
    } else { 
     useZoom = true; 
     container.classed("select", false) 
      .on("mousedown.select", null) 
      .on("mousemove.select", null) 
      .on("mouseup.select", null); 
     zoomListener.on("zoom", zoom); 
    } 
} 

document.onkeydown = function(e) { if (e.ctrlKey) { toggleSelectZoom(); }}; 

Но есть проблема: при переключении для увеличения/панорамирования режима после рисования рамки выбора в режиме выбора, дерево (при запуске панорамирования) переходит на положение, в котором он бы после тех же манипуляций в режиме масштабирования/панорамирования. Здесь находится скрипка http://jsfiddle.net/PSVW6/2/

Answer 1

Проблема в том, что поведение зума по-прежнему будет обновлять его внутреннее состояние, даже если вы не действуете на нем. Чтобы решить, у вас есть в основном два варианта.

• Сбросить внутреннее состояние режима масштабирования, если оно не обрабатывает событие таким образом. Это потребует, чтобы вы сами отслеживали состояние масштабирования/перевода.
• Прикрепите режим масштабирования не ко всему SVG, а только к самим элементам. Таким образом, вы сможете масштабировать/панорамировать только тогда, когда курсор находится над элементом и выбирается в другом месте. Это устраняет необходимость в вашей логике переключения в обработчике, поскольку два набора событий будут раздельными.

Это зависит от вашего конкретного применения, которое более подходит для одного из этих решений.