d3.js 树布局需要随着节点打开而扩展，而不是压缩答案

【问题标题】：d3.js tree layout need to expand as nodes open, not compressd3.js 树布局需要随着节点打开而扩展，而不是压缩
【发布时间】：2013-10-02 22:07:55
【问题描述】：

我正在使用类似于http://mbostock.github.io/d3/talk/20111018/tree.html的树形布局和代码

我将其修改为自上而下的方向。随着每个节点的打开/扩展，其他打开的节点会压缩以适应 SVG 元素中的所有内容。有可能防止这种情况吗？我认为修改每个节点的 x 组件将是一种方法，但无法实现。节点移动了，但仍被压缩在一起。

还想知道如何将连接线从贝塞尔曲线更改为直角/直线。也许需要一个单独的问题。

【问题讨论】：

标签： javascript layout tree d3.js

【解决方案1】：

压缩在树形布局中是自动的（以及它的一部分）。没有办法关闭它。但是，您可以简单地使您的 SVG 大到足以包含整个展开的树而无需压缩。请注意，这意味着除非您的屏幕足够大，否则即使可见的所有内容都适合屏幕，也会显示滚动条。

在示例中使用diagonal line generator 生成连接节点的链接。原则上，您可以将其替换为任何其他线生成器（例如d3.svg.line），但实际上需要进行一些更改，因为对角线生成器以特殊方式访问源节点和目标节点。对于法线生成器，您需要将此结构转换为二元素数组，并为每个元素指定如何访问 x/y 坐标。然后你可以使用任何插值来得到你想要的曲线。

【讨论】：

谢谢拉尔斯。我为 SVG 创建了一个更大的“画布”，但是树形图仍然会压缩。它似乎具有从根/父节点向下的第一级的大小，并试图保持在其大小范围内。至于链接，我发现了对角线生成器，并看到它创建了一个类似于“M 100 100 C 100 150 ....”的路径字符串产生路径。我需要进一步研究它。
您还需要明确设置size of the tree layout。
哦，给对角线生成器的参数是隐式的，即您为 d 指定的参数实际上是一个函数。
我在调整宽度时不正确 - 这是一个浏览器刷新问题，没有进行更改。用自定义函数替换对角函数似乎是创建自定义链接线的方法。只要函数返回路径“M 100 100 L 100 150....”的字符串，它就可以工作。