javascript - 节点展开后树的位置

Question

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

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

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

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

这是我创建树布局的方式:

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

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

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

因此您可以摆脱滚动条和 gHeight，基本上不必再担心窗口边界了。