节点展开后树的位置

Question

我最近为一个项目使用了 D3，我遇到了树布局的问题。当我最初加载树布局时，它很好地保留在 SVG 中，如下面的屏幕截图所示。

但是，一旦我开始打开节点，打开的节点越多，开始上升的节点就越多，因此变得不可见，如下图所示。

当我开始打开节点时：当所有节点都打开时：

如您所见，我已将 svg 设置为可垂直滚动，以便我可以看到更大的树。

下面是我创建树布局的方法：

var tree = d3.layout.tree()
         .nodeSize([55,30]);

现在我找到了一个解决方案，方法是增加 'g' 元素的高度，每次我点击一个有子节点的节点时，它都会包含所有节点，但这不是一个好的解决方案，因为这会导致每次发生这种情况时，整棵树 "jump"。

//creates the <g> element
var gWidth = 90;
var gHeight = 250;   
var vis = svg.append("g")
            .attr('id', 'group')
            .attr("transform", "translate(" + gWidth + "," + gHeight + ")");


function updateSvg(node){
 //moves the g element 50px down on each click that has a child
                  if(node.children){
                    gHeight +=50;
                    vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
                   }
                   else{
                    gHeight-=50;
                    vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
                  // }

}

如果有超过一定数量的节点，我也会增加 SVG 高度，但我认为这超出了我当前问题的范围。

有什么我遗漏的吗？

Answer 1

我可以看到两种尝试解决此问题的方法：

1.自动滚动你的容器以避免跳转，在你的解决方案中使用gHeight变量：

  document.getElementById("container").scrollTop += 50;

虽然我真的不确定，所以我认为你会做得更好：

2。使用 d3 缩放和平移方法 缩放行为效果很好，请参阅

https://github.com/mbostock/d3/wiki/Zoom-Behavior

归结为

var zoom = d3.behavior.zoom();
svg.call(zoom);

所以你可以摆脱滚动条和 gHeights，基本上不用再担心 window 边界。

节点展开后树的位置

Position of tree after node expansion

javascript

tree

svg

d3.js