Skip to content

🌐 Tree

/Chaos/Chaos/Eros/Chaos/Erebus/Chaos/Tartarus/Chaos/Gaia/Chaos/Gaia/Mountains/Chaos/Gaia/Pontus/Chaos/Gaia/UranusEros/Chaos/ErosErebus/Chaos/ErebusTartarus/Chaos/TartarusMountains/Chaos/Gaia/MountainsPontus/Chaos/Gaia/PontusUranus/Chaos/Gaia/UranusChaos/ChaosGaia/Chaos/Gaia

示例 · 树布局使用Reingold–Tilford “tidy” 算法生成整齐的节点-链接树图,该算法由Buchheim 等人改进为线性时间运行。整齐树通常比树状图更紧凑。

tree()

来源 · 使用默认设置创建一个新的树状布局。

()

🌐 tree(root)

来源 · 列出指定的 层级,在 及其子代上分配以下属性:

  • node.x - 节点的 x 坐标
  • node.y - 节点的 y 坐标

坐标 xy 表示一个任意的坐标系统;例如,你可以将 x 视为角度,将 y 视为半径,以生成一个径向布局。在将层次结构传递给树布局之前,你可能希望先调用 root.sort

🌐 The coordinates x and y represent an arbitrary coordinate system; for example, you can treat x as an angle and y as a radius to produce a radial layout. You may want to call root.sort before passing the hierarchy to the tree layout.

tree.大小(size)

🌐 tree.size(size)

来源 · 如果指定了 size,则将此树布局的大小设置为指定的两个元素的数字数组 [width, height],并返回此树布局。如果未指定 size,则返回当前布局大小,默认值为 [1, 1]。布局大小为 null 表示将使用 节点大小。坐标 xy 表示任意坐标系统;例如,要生成 径向布局,大小为 [360, radius] 对应于 360° 的宽度和 radius 的深度。

tree.nodeSize(size)

来源 · 如果指定了size,则将此树布局的节点大小设置为指定的两个元素的数字数组 [width, height],并返回此树布局。如果未指定size,则返回当前节点大小,默认值为 null。节点大小为 null 表示将使用 布局大小。当指定节点大小时,根节点始终位于 ⟨0, 0⟩。

tree.separation(separation)

来源 · 如果指定了 separation,则将分离访问器设置为指定的函数并返回该树布局。如果未指定 separation,则返回当前的分离访问器,默认值为:

js
function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

更适合径向布局的变体是按半径比例缩小分隔间隙:

🌐 A variation that is more appropriate for radial layouts reduces the separation gap proportionally to the radius:

js
function separation(a, b) {
  return (a.parent == b.parent ? 1 : 2) / a.depth;
}

分离访问器用于分离相邻的节点。分离函数接收两个节点 ab,并必须返回所需的分离距离。节点通常是兄弟节点,不过如果布局决定将这样的节点放置在相邻位置,节点之间的关系也可能较为疏远。

🌐 The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.