程序搜索特定节点,一旦找到,函数 scrollToBottom 应该将视口移动到节点的 x 和 y 坐标并将其定位在视口的中心底部,而不管其初始位置如何。然而,结果是大部分时间树都在可见区域之外。
var margin = {
top: 25,
right: 700,
bottom: 20,
left: 700
},
width = 5000 - margin.right - margin.left,
height = 5000 - margin.top - margin.bottom;
var i = 0,
duration = 750,
rectW = 100,
rectH = 30,
root;
var zoom = d3.behavior.zoom()
.scaleExtent([.2, 10])
.on("zoom", zoomed);
zoom.translate([margin.left, margin.top]).scale(.7);
d3.select("svg").on("dblclick.zoom", null);
var tree = d3.layout.tree()
.nodeSize([110, 50]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.x + rectW / 2, d.y + rectH / 2];
});
var gElement = document.createElementNS(d3.ns.prefix.svg, 'g');
gElement.setAttribute("id", "fg");
var svg = d3.select("div.svg-container-en").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append(function() { return gElement; })
.attr("transform", "translate(" + margin.left + "," + margin.top + ")scale(.7,.7)")
zoom.translate([margin.left, margin.top]).scale(.7);
function findMember(data) {
opened_nodes = [];
collapse(root);
var maxDepth = 0;
for (var i = 0; i < data.length; i++) {
var pageMemberId = data[i].ID;
find(root, pageMemberId);
maxDepth = Math.max(maxDepth, last_d.depth);
}
update(root);
scrollToBottom();
}
function scrollToBottom() {
var svgContainer = $('.svg-container');
var svgWidth = svgContainer.width();
var svgHeight = svgContainer.height();
var fgElement = document.getElementById('fg');
var fgBBox = fgElement.getBBox();
var x = last_d.x + fgBBox.width / 2;
var dx = svgWidth / 2 - x;
var dy = svgHeight - fgBBox.y;
var scale = 0.7;
var duration = 1000;
svg.transition().duration(duration).call(
zoom.translate([dx, dy]).scale(scale).event);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>