单击重新定位根节点并调整窗口

Question

我已经构建了一个tree graph。

为了计算网页中的 div 高度，我计算了 json 对象中的端节点（叶子）并将结果乘以 25。
目前我有 150 片叶子，所以 div 高度是 3750px，这很好。

当我隐藏孩子时，我想将根节点重新定位在较小包装器的中心。所以我需要：

1. 计算最小树高（例如 3 个可见的端节点，min:3*50），
2. 调整包装高度 (div)
3. 垂直对齐包装器中心的根节点

4. 当用户单击父节点以显示子节点时返回原始高度

   // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; // Hide children and count visible end-nodes } else { // Show children, count visible nodes recalculate height d.children = d._children; d._children = null; } update(d); }

Answer 1

我刚刚找到了这段代码，你可以把它放在你的function(update) 中。这不是最好的解决方案，但它是一个开始：

// 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) * 50;//number of pixels per line

每次更新树时，它都会为您提供一个末端节点（叶子）数组，取该数组中的最大值并乘以一个值（这里我使用 50，每个叶子 50 个像素）。您可以使用此值来更改 div 的高度。

检查更新的小提琴并在每次单击时查看控制台：https://jsfiddle.net/gerardofurtado/b8hmwsm5/1/

同样，这不是最好的解决方案，但我认为在这里进行一些改进会很容易。