D3组合选择与缩放/平移

Question

我想用缩放/平移实现树节点选择。 考虑到缩放/平移将与使用鼠标（拖动）选择节点发生冲突，我将其作为两个独立的侦听器实现，我可以在其间使用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，而是附加到元素本身。这样，只有当光标位于某个元素上并在别处选择时，您才能够缩放/平移。这将消除处理程序中对切换逻辑的需求，因为这两组事件是分开的。

这取决于您的特定应用程序哪种解决方案更适合。