节点扩展之后树的位置

我最近为一个项目占用了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的高度，如果有超过一定数量的节点，但我认为这超出了我当前的问题的范围。

有什么我失踪？

来源

2016-02-23 Konstantin Hadzhiev

只是检查节点是否离开屏幕（< 0 || >高度）并相应地缩放svg – thatOneGuy

我可以看到试图解决这个问题有两种方法：自动

1.滚动你的容器避免跳跃，与gHeight变量您的解决方案：

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

我真的不确定这一点，所以我认为你会做得更好：

2.使用d3 zoom & pan方法缩放行为工作得很好，看到

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

它归结为

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

，所以你可以摆脱滚动条和gHeight S的，基本上不用再担心关于窗口边界。

来源

2016-02-23 14:56:25 tarulen

节点扩展之后树的位置

回答

相关问题