D3可折疊樹，節點合並問題

Question

我正在使用此鏈接中顯示的可折疊樹。 我的數據非常大，所以從中看到的視圖是相互折疊的。 截圖如下： -

目前我正在調查此鏈接 。 它幫助我動態增加樹的大小。 通過這個，我可以改變節點的合並，如下所示： -

現在我的問題是如何動態增加幀高度？ 當我展開所有節點時，樹大小超過畫布/幀高度。

Answer 1

我找到了解決方案。 我正在更改可折疊樹代碼的更新功能。 以下是我的代碼： -

function update(source) {

var duration = d3.event && d3.event.altKey ? 5000 : 500;    

// compute the new height
var levelWidth = [1];
var childCount = function(level, n) {
if(n.children && n.children.length > 0) {
  if(levelWidth.length <= level + 1) levelWidth.push(0);      
  levelWidth[level+1] += n.children.length;
  n.children.forEach(function(d) {`
    childCount(level + 1, d);
  });
}
};

childCount(0, root);  

newHeight = d3.max(levelWidth) * 60; // 20 pixels per line    

tree = tree.size([newHeight, width]);

d3.select("svg").remove();//TO REMOVE THE ALREADY SVG CONTENTS AND RELOAD ON EVERY UPDATE

svg = d3.select("body").append("svg");

svg.attr("width", width + margin.right + margin.left)
.attr("height", newHeight + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
  .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + source.y0 + "," +                     source.x0 + ")"; })
  .on("click", click);

nodeEnter.append("circle")
  .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", "-.75em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-2);

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

// Transition nodes to their new position.
var nodeUpdate = node.transition()
  .duration(duration)
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
  .attr("r", 6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeUpdate.selectAll("text")
  .style("fill-opacity", 4);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
  .duration(duration)
  .attr("transform", function(d) { return "translate(" + source.y + "," +     source.x + ")"; })
  .remove();

nodeExit.selectAll("text")
  .style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
  .data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  });

// Transition links to their new position.
link.transition()
  .duration(duration)
  .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
  .duration(duration)
  .attr("d", function(d) {
    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
  })
  .remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});

}