javascript - D3 : Constrained Semantic Zooming on a Tree Layout

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 .

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

编辑:

你的 fiddle 中进行了大量的翻译和抵消。其中大部分是嵌套的，这使得使用事件的绝对坐标变得困难。我重写了部分代码以删除嵌套偏移量，这使得处理起来更加容易，并且也无需像上面那样添加偏移量。我还修复了限制翻译的函数。

完整代码here .