gpt4 book ai didi

javascript - 根据子节点数量动态调整 d3 树布局的大小

转载 作者:行者123 更新时间:2023-12-02 22:17:57 27 4
gpt4 key购买 nike

从这个例子 http://mbostock.github.com/d3/talk/20111018/tree.html我构建了一个 d3 树布局,其中根位于浏览器窗口的中间(root.x0 = width/2),而节点则位于向下方向面向右侧。

是否可以重新调整树的大小,使得树的宽度是相关的取决于树的节点数,如果节点数较少,则宽度较小否则如果节点数较多则宽度较大?

我还需要知道d3树布局当前如何计算“d.x”属性?如何操作“d.x”属性来调整间距d3 树布局的节点之间。

最佳答案

因此,当您设置树布局的“大小”时,您所做的就是设置树布局将插入 x 和 y 值的值。因此,您没有理由不能计算所需的宽度或高度,并在每次更新调用时在布局中更改它。

我将您提供的示例复制到 jsFiddle并在更新功能中添加了以下内容:

// compute the new height
var levelWidth = [1];
var childCount = function(level, n) {

if(n.children && n.children.length > 0) {
if(levelWidth.length <= level + 1) levelWidth.push(0);

levelWidth[level+1] += n.children.length;
n.children.forEach(function(d) {
childCount(level + 1, d);
});
}
};
childCount(0, root);
var newHeight = d3.max(levelWidth) * 20; // 20 pixels per line
tree = tree.size([newHeight, w]);

请注意,这是一个非常粗略的计算,没有考虑 child 与 parent 或其他任何人的关系 - 但你明白了。

对于操作节点的 x 值,最简单的可能是在布局完成后简单地修改节点。事实上,您可以看到这已经在示例中使用 y 坐标完成了:

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

他这样做是为了即使子节点被隐藏,给定级别的节点仍保持在相同的 y 位置,否则,如果您折叠所有子节点,则剩余级别将拉伸(stretch)以占据整个宽度(尝试注释掉该行并看看当您将整个级别切换为不可见时会发生什么)。

至于自上而下,我认为您几乎可以在看到 x 和 y(以及 x0 和 y0)的任何地方进行翻转。不要忘记对对 Angular 线投影执行相同的操作,以确保您的线条也翻转。

关于javascript - 根据子节点数量动态调整 d3 树布局的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13103748/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com