Question

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

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

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

Answer 1

感谢@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”值，所以我创建了一个解析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（）;）

位置D3 SVG Canvas x / y和Zoom Level On Load

1 个答案: