javascript - 加载时定位 D3 SVG Canvas x/y 和缩放级别

Question

我正在使用 D3 创建组织结构图。我已经很好地加载了数据，并且已经弄清楚如何通过拖动鼠标以及使用鼠标滚轮缩放来使 Canvas 移动。

我的问题是组织结构图相当大，因此当文档首次加载时，根节点超出了浏览器的 View 区域，并且缩放级别设置得相当高。

我需要弄清楚如何设置第一个节点周围 Canvas 的可视区域并将初始缩放级别设置为 100%。

Answer 1

感谢@Lars Kotthoff，我能够创建一个解决方案。

我从根节点的翻译属性(即翻译(x，y))中检索了根节点的x值，然后采用浏览器的宽度/2 - x值。我将此值应用于父组的翻译属性，该属性使文档以根节点为中心。

var windowWidth = $(window).width();
var node0 = d3.select("#node-0");
var translate = parseTranslate(node0.attr("transform"));
var translateX = translate.x - (windowWidth / 2);
var svgGroup = d3.select("#svg_g");
svgGroup.attr("transform", "translate(-" + translateX + ",22) scale(1)"); // with 20 y padding

注意:因为我是 SVG 和 D3 的新手，所以我仍然不确定如何获取节点翻译属性的“x”值，因此我创建了一个解析翻译属性的函数用正则表达式。 我确信有更好的方法来获取这个值，所以如果有人想更新我的答案或为 future 的读者添加评论，这会增加这个问题的值(value)。

我创建的函数是:

function parseTranslate(str) {
var translate = {
    x: 0,
    y: 0,
    scale: 0
}

var pattern = /\((.+?)\)/g;
var matches = [];

while (match = pattern.exec(str)) {
    matches.push(match[1]);
}

if (matches.length) {
    if (matches.length == 1) {
        if (matches[0].indexOf(",") > -1) {
            var p = matches[0].split(',');
            translate.x = p[0];
            translate.y = p[1];
        } else {
            translate.scale = matches[0];
        }
    } else if (matches.length == 2) {
        var p = matches[0].split(',');
        translate.x = p[0];
        translate.y = p[1];
        translate.scale = matches[1];
    }
}
return translate;
}

我还在我的项目中使用 jQuery 来获取浏览器的宽度(例如:$(window).width();)