Question

我最近为一个项目拿了D3，我遇到了树形布局的问题。当我最初加载树形布局时，它在SVG中保持良好状态，如下面的屏幕截图所示。

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

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

正如你所看到的，我已经使svg垂直滚动，这样我就能看到更大的树木。

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

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

现在我通过增加“g＆＃39;”的高度来找到解决方案。每次点击有子节点的节点时都保存所有节点的元素，但这不是一个好的解决方案，因为这会导致整个树跳过＆＃34;跳转＆＃34;每次发生这种情况。

//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 zoom＆amp;平移方法缩放行为非常有效，请参阅

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

归结为

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

所以你可以摆脱滚动条和gHeight，基本上不必担心窗口边界。

节点扩展后树的位置

1 个答案: