Javascript 将D3 SVG画布x/y定位，并在加载时缩放级别

我正在使用D3创建一个组织结构图。我已经很好地完成了数据加载，并且已经知道了如何通过拖动鼠标以及使用鼠标滚轮进行缩放来移动画布

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

---

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

多亏了@Lars Kotthoff，我才能够创建一个解决方案

我从根节点的translate属性（即translate（x，y））中检索到根节点的x值，然后取浏览器的宽度/2-x值。我将此值应用于父组的translate属性，该属性使文档围绕根节点居中

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，我仍然不知道如何只获取节点的translate属性的“x”值，所以我创建了一个函数，用regex解析translate属性我确信有更好的方法获得这个值，因此如果有人想更新我的答案或为未来读者添加评论，这将增加这个问题的价值。

我创建的函数是：

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（）；）

如果您使用缩放行为，您可以在加载时将translate/scale设置为您喜欢的值。感谢您的帮助！我可以设置缩放，但我的问题仍然是调整可视区域。您所说的“可视区域”是什么意思？我渲染的svg的前几行是：

，但是node-0显示在屏幕外，所以要查看它，您必须用鼠标单击或缩小，然后放大。我需要弄清楚如何在节点0位于顶部的情况下加载文档。如果可以选择根节点及其坐标，则可以相应地进行转换——类似于

d3.select（.svg_g”）.attr（“transform”，d3.select（“#node-0”）.attr（“transform”）+“translate”（+width/2+），“+height/2+”）。