D3：树布局上的约束语义缩放

Question

我正在尝试基于以下两个示例应用约束和语义缩放行为：Constrained Zoom 和 SVG Semantic Zooming，用于我的树可视化。我可能一直在正确应用受约束的缩放部分，但是当我尝试集成语义缩放部分时它变得复杂和可疑：光标不会停留在特定的我缩放到的节点。我开始认为我应该只选择受限缩放或语义缩放，但不能同时选择两者。是否真的可以在树布局上结合两者（约束+语义缩放）？

这是我目前所做的努力：http://jsfiddle.net/glenn/GpjFN/。

缩放相关代码：

...

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 5])
    .on('zoom', move);

function move() {
    var t = d3.event.translate,
        s = d3.event.scale,
        width = viewportSize[0],
        height = viewportSize[1];

    t[0] = Math.min(width * (s - 1), Math.max(width * (1 - s), t[0]));
    t[1] = Math.min(height * (s - 1), Math.max(height * (1 - s), t[1]));

    zoom.translate(t);

    viewport.attr('transform',
        'translate(' + t + ')' + ' scale(' + s + ')');

    // TODO: ???
};

svg.call(zoom);

Answer 1

问题是您有几个嵌套的g 元素并应用了翻译。也就是说，您应用到viewport 元素的任何翻译都相对 到您应用到父g 元素的翻译。然而，事件坐标 (d3.event) 由 绝对 鼠标位置决定。您看到的是放大时两个g 元素之间的偏移量——即位置偏移了多少。

不过有一个简单的解决方法，只需将此偏移量添加到 move 函数中的偶数平移坐标即可：

t[0] += translationVector[0];
t[1] += translationVector[1];

这会将绝对事件坐标转换为相对容器坐标。完整示例here。

哦，原则上对如何组合不同的东西没有限制，所以是的，约束缩放和语义缩放当然是可能的。

编辑：

在你的小提琴中有相当多的翻译和抵消。其中大部分是嵌套的，这使得很难使用事件中的绝对坐标。我已经重写了您的部分代码以删除嵌套的偏移量，这使得它更易于处理，并且还消除了添加上述偏移量的需要。我还修复了限制翻译的函数。

完整代码here。