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 等人 改进后可在线性时间内运行。整洁树通常比 dendrograms 更紧凑。

¥Examples · The tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm, improved to run in linear time by Buchheim et al. Tidy trees are typically more compact than dendrograms.

tree()

源代码 · 使用默认设置创建一个新的树形布局。

¥Source · Creates a new tree layout with default settings.

tree(root) {#_tree}

源代码 · 布局指定的根 hierarchy,并在根及其后代上分配以下属性:

¥Source · Lays out the specified root hierarchy, assigning the following properties on root and its descendants:

  • node.x - 节点的 x 坐标

    ¥node.x - the x-coordinate of the node

  • node.y - 节点的 y 坐标

    ¥node.y - the y coordinate of the node

坐标 x 和 y 表示任意坐标系;例如,你可以将 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(size) {#tree_size}

源代码 · 如果指定了 size,则将此树形图布局的大小设置为指定的 [width, height] 双元素数组,并返回此树形图布局。如果未指定大小,则返回当前布局大小,默认为 [1, 1]。布局大小为 null 表示将改用 节点大小。坐标 x 和 y 表示任意坐标系;例如,要生成 径向布局,大小 [360, radius] 对应的宽度为 360°,深度为半径。

¥Source · If size is specified, sets this tree layout’s size to the specified two-element array of numbers [width, height] and returns this tree layout. If size is not specified, returns the current layout size, which defaults to [1, 1]. A layout size of null indicates that a node size will be used instead. The coordinates x and y represent an arbitrary coordinate system; for example, to produce a radial layout, a size of [360, radius] corresponds to a breadth of 360° and a depth of radius.

tree.nodeSize(size) {#tree_nodeSize}

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

¥Source · If size is specified, sets this tree layout’s node size to the specified two-element array of numbers [width, height] and returns this tree layout. If size is not specified, returns the current node size, which defaults to null. A node size of null indicates that a layout size will be used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩.

tree.separation(separation) {#tree_separation}

源代码 · 如果指定了 size,则将 和 的刻度大小设置为指定的值并返回轴。如果未指定分隔符,则返回当前分隔符访问器,默认为:

¥Source · If separation is specified, sets the separation accessor to the specified function and returns this tree layout. If separation is not specified, returns the current separation accessor, which defaults to:

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;
}

分离访问器用于分离相邻的节点。分离函数接收两个节点 a 和 b,并返回所需的分离值。这些节点通常是同级节点,但如果布局决定将这些节点相邻放置,则它们之间的关系可能更远。

¥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.