D3可折叠树，节点合并问题

Question

I am using collapsible tree as shown in this link. My data is very big so the view come out of this is collapsing with each other. screenshot is given below :-

Currently I am looking into this link . It is helping me to increase size of the tree dynamically. By this, I can change the merging of node as shown below :-

Now my question is how to increase the frame height dynamically?. When I expand all the nodes then the tree size is more than canvas/frame height.

Answer 1

I have find a solution of this. I am changing the update function of Collapsible tree code. Below is my code:-

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

}