如何管理大型分层数据（可折叠树形结构），并自动缩放至展开节点？

使用D3.js库实现可折叠树形结构，利用动态缩放功能在展开节点时自动缩放视图。 代码示例：

//创建一个具有旋转功能的树形图布局 var tree = d3.layout.tree().size([height, width - 160]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

//创建一个SVG元素，并添加分层组元素 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//打开根节点并设置其坐标 function toggle(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); }

//更新树形布局 function update(source) { var nodes = tree.nodes(root).reverse(), links = tree.links(nodes);

//将节点的坐标从上一个位置过渡到新位置 var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); });

//创建新节点 var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", toggle);

nodeEnter.append("circle") .attr("r", 1e-6) .style("stroke", function(d) { return d._children ? "blue" : "#ff7f0e"; }) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1e-6);

//