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元素的任何翻译都是 relative 到您已应用于父g元素的翻译。但事件坐标（d3.event）由绝对鼠标位置确定。您所看到的是放大时两个g元素之间的偏移量 - 即位置偏移的位置。

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

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

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

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

编辑：

你的小提琴中有相当多的翻译和抵消。其中大部分是嵌套的，这使得难以使用事件的绝对坐标。我已经重写了部分代码来删除嵌套的偏移量，这使得它更容易处理，并且无需像上面那样添加偏移量。我还修复了限制翻译的功能。

完整代码here。

D3 - 树形布局的约束语义缩放

1 个答案: