位置D3 SVG画布x / y和加载时的缩放级别

Question

I'm using D3 to create an organization chart. I've got the data loading fine and have figured out how to make the canvas move by dragging the mouse as well a zoom with the mouse wheel.

My problem is that the org chart is rather large so when the document first loads the root node is out of the browser's view area and the zoom level is set fairly high.

I need to figure out how to set the viewable area of the canvas around the first node and set the initial zoom level to 100%.

Answer 1

I was able to create a solution thanks to @Lars Kotthoff.

I retrieved the root node's x value from it's translate attribute (ie translate(x,y)) and then took the browser's width / 2 - the x value. I applied this value to the parent group's translate attribute which centers the document around the root node.

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

NOTE: Because I'm new to SVG and D3 I am still not sure how to get just the "x" value of a node's translate attribute so I created a function that parses the translate attribute with regex. I'm sure there is a better way of getting this value so if anyone wants to update my answer or add a comment for future readers that would increase the value of this question.

The function I created is:

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;
}

I'm also using jQuery in my project to get the width of the browser (ex: $(window).width();)