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，而仅附加到元素本身。这样，您只能在光标位于元素上并选择其他位置时进行缩放/平移。这将消除处理程序中对切换逻辑的需求，因为两组事件将是分开的。

这取决于您的特定应用，这些解决方案中的哪一种更合适。