Question

我构建了tree graph。

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

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

计算最小树高（例如，3个可见的终端节点，min:3*50），
调整包装器高度（div）
垂直对齐包装器中心的根节点
当用户单击父节点以显示子项
时，返回到原始高度
// 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/

时，请检查更新的小提琴并查看控制台

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

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

1 个答案: