树形图

¥Treemap

示例 · 树形图由 Ben Shneiderman 于 1991 年引入，它根据每个节点的关联值，以递归方式将区域细分为矩形。D3 的树状图实现支持可扩展的 平铺方法：默认的 squarified 方法旨在生成具有 golden 宽高比的矩形；与 slice-and-dice 相比，这提供了更好的可读性和尺寸估计，slice-and-dice 只是简单地按深度在水平和垂直细分之间交替。

¥Examples · Introduced by Ben Shneiderman in 1991, a treemap recursively subdivides area into rectangles according to each node’s associated value. D3’s treemap implementation supports an extensible tiling method: the default squarified method seeks to generate rectangles with a golden aspect ratio; this offers better readability and size estimation than slice-and-dice, which simply alternates between horizontal and vertical subdivision by depth.

treemap()

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

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

treemap(root) {#_treemap}

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

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

• node.x0 - 矩形的左边界

  ¥node.x0 - the left edge of the rectangle

• node.y0 - 矩形的上边缘

  ¥node.y0 - the top edge of the rectangle

• node.x1 - 矩形的右边缘

  ¥node.x1 - the right edge of the rectangle

• node.y1 - 矩形的底边

  ¥node.y1 - the bottom edge of the rectangle

在将层次结构传递给树形图布局之前，必须调用 root.sum。你可能还需要在计算布局之前调用 root.sort 来对层次结构进行排序。

¥You must call root.sum before passing the hierarchy to the treemap layout. You probably also want to call root.sort to order the hierarchy before computing the layout.

treemap.tile(tile) {#treemap_tile}

源代码 · 如果指定了 tile，则将 平铺方法 设置为指定的函数并返回此树形图布局。如果未指定 tile，则返回当前的平铺方法，默认为采用黄金比例的 treemapSquarify。

¥Source · If tile is specified, sets the tiling method to the specified function and returns this treemap layout. If tile is not specified, returns the current tiling method, which defaults to treemapSquarify with the golden ratio.

treemap.size(size) {#treemap_size}

源代码 · 如果指定了 size，则将此树形图布局的大小设置为指定的 [width, height] 两个元素的数组，并返回此树形图布局。如果未指定 size，则返回当前大小，默认为 [1, 1]。

¥Source · If size is specified, sets this treemap layout’s size to the specified two-element array of numbers [width, height] and returns this treemap layout. If size is not specified, returns the current size, which defaults to [1, 1].

treemap.round(round) {#treemap_round}

源代码 · 如果指定了 scale ，则设置 并返回轴。如果未指定 round，则返回当前的舍入状态，默认为 false。

¥Source · If round is specified, enables or disables rounding according to the given boolean and returns this treemap layout. If round is not specified, returns the current rounding state, which defaults to false.

treemap.padding(padding) {#treemap_padding}

源代码 · 如果指定了 padding，则将 inner 和 outer padding 设置为指定的数字或函数，并返回此树形图布局。如果 padding 未指定，则返回当前的内部填充函数。

¥Source · If padding is specified, sets the inner and outer padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current inner padding function.

treemap.paddingInner(padding) {#treemap_paddingInner}

源代码 · 如果指定了 padding，则将内部 padding 设置为指定的数字或函数，并返回此树形图布局。如果 padding 未指定，则返回当前的内部填充函数，默认为常量零。如果 padding 是一个函数，则为每个有子节点的节点调用该函数，并将当前节点作为参数。内边距用于分隔节点的相邻子节点。

¥Source · If padding is specified, sets the inner padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current inner padding function, which defaults to the constant zero. If padding is a function, it is invoked for each node with children, being passed the current node. The inner padding is used to separate a node’s adjacent children.

treemap.paddingOuter(padding) {#treemap_paddingOuter}

源代码 · 如果指定了 padding，则将 top、right、bottom 和 left 的 padding 设置为指定的数字或函数，并返回此树形图布局。如果未指定 padding，则返回当前顶部 padding 函数。

¥Source · If padding is specified, sets the top, right, bottom and left padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current top padding function.

treemap.paddingTop(padding) {#treemap_paddingTop}

源代码 · 如果指定了 padding，则将顶部 padding 设置为指定的数字或函数，并返回此树形图布局。如果未指定 padding，则返回当前顶部 padding 函数，默认为常量零。如果 padding 是一个函数，则为每个有子节点的节点调用该函数，并将当前节点作为参数。顶部填充用于将节点的顶部边缘与其子节点分隔开。

¥Source · If padding is specified, sets the top padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current top padding function, which defaults to the constant zero. If padding is a function, it is invoked for each node with children, being passed the current node. The top padding is used to separate the top edge of a node from its children.

treemap.paddingRight(padding) {#treemap_paddingRight}

源代码 · 如果指定了 padding，则将右侧 padding 设置为指定的数字或函数，并返回此树形图布局。如果未指定 padding，则返回当前右侧 padding 函数，默认为常量零。如果 padding 是一个函数，则为每个有子节点的节点调用该函数，并将当前节点作为参数。右填充用于将节点的右边缘与其子节点分隔开。

¥Source · If padding is specified, sets the right padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current right padding function, which defaults to the constant zero. If padding is a function, it is invoked for each node with children, being passed the current node. The right padding is used to separate the right edge of a node from its children.

treemap.paddingBottom(padding) {#treemap_paddingBottom}

源代码 · 如果指定了 padding，则将底部 padding 设置为指定的数字或函数，并返回此树形图布局。如果 padding 未指定，则返回当前的底部填充函数，默认为常量零。如果 padding 是一个函数，则为每个有子节点的节点调用该函数，并将当前节点作为参数。底部填充用于将节点的底部边缘与其子节点分隔开。

¥Source · If padding is specified, sets the bottom padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current bottom padding function, which defaults to the constant zero. If padding is a function, it is invoked for each node with children, being passed the current node. The bottom padding is used to separate the bottom edge of a node from its children.

treemap.paddingLeft(padding) {#treemap_paddingLeft}

源代码 · 如果指定了 padding，则将左侧 padding 设置为指定的数字或函数，并返回此树形图布局。如果未指定 padding，则返回当前左边距函数，默认为常量零。如果 padding 是一个函数，则为每个有子节点的节点调用该函数，并将当前节点作为参数。左填充用于将节点的左边缘与其子节点分隔开。

¥Source · If padding is specified, sets the left padding to the specified number or function and returns this treemap layout. If padding is not specified, returns the current left padding function, which defaults to the constant zero. If padding is a function, it is invoked for each node with children, being passed the current node. The left padding is used to separate the left edge of a node from its children.

树形图平铺

¥Treemap tiling

提供了几种内置的平铺方法供 treemap.tile 使用。

¥Several built-in tiling methods are provided for use with treemap.tile.

treemapBinary(node, x0, y0, x1, y1)

源代码 · 递归地将指定的节点划分为近似平衡的二叉树，对于宽矩形选择水平划分，对于高矩形选择垂直划分。

¥Source · Recursively partitions the specified nodes into an approximately-balanced binary tree, choosing horizontal partitioning for wide rectangles and vertical partitioning for tall rectangles.

treemapDice(node, x0, y0, x1, y1)

源代码 · 根据指定节点的每个子节点的值，水平划分由 x0、y0、x1、y1 指定的矩形区域。子节点按顺序排列，从给定矩形的左边缘 (x0) 开始。如果子节点值的总和小于指定节点的值（即，如果指定节点的内部值非零），则剩余的空白空间将位于给定矩形的右边缘 (x1)。

¥Source · Divides the rectangular area specified by x0, y0, x1, y1 horizontally according the value of each of the specified node’s children. The children are positioned in order, starting with the left edge (x0) of the given rectangle. If the sum of the children’s values is less than the specified node’s value (i.e., if the specified node has a non-zero internal value), the remaining empty space will be positioned on the right edge (x1) of the given rectangle.

treemapSlice(node, x0, y0, x1, y1)

源代码 · 根据指定节点的每个子节点的值，垂直划分由 x0, y0, x1, y1 指定的矩形区域。子节点按顺序排列，从给定矩形的上边缘 (y0) 开始。如果子节点值的总和小于指定节点的值（即，如果指定节点的内部值非零），则剩余的空白空间将位于给定矩形的下边缘 (y1)。

¥Source · Divides the rectangular area specified by x0, y0, x1, y1 vertically according the value of each of the specified node’s children. The children are positioned in order, starting with the top edge (y0) of the given rectangle. If the sum of the children’s values is less than the specified node’s value (i.e., if the specified node has a non-zero internal value), the remaining empty space will be positioned on the bottom edge (y1) of the given rectangle.

treemapSliceDice(node, x0, y0, x1, y1)

源代码 · 如果指定节点的深度为奇数，则委托给 treemapSlice；否则委托给 treemapDice。

¥Source · If the specified node has odd depth, delegates to treemapSlice; otherwise delegates to treemapDice.

treemapSquarify(node, x0, y0, x1, y1)

源代码 · 实现 Bruls 等人提出的 平方树形图 算法，该算法旨在生成给定 宽高比 的矩形。

¥Source · Implements the squarified treemap algorithm by Bruls et al., which seeks to produce rectangles of a given aspect ratio.

treemapResquarify(node, x0, y0, x1, y1)

示例 · 源代码 · 与 treemapSquarify 类似，但 except 会保留由 d3.treemapResquarify 计算的先前布局的拓扑结构（节点邻接关系）（如果存在该拓扑结构且使用了相同的 目标宽高比）。这种平铺方法非常适合动画化树形图的变化，因为它只会改变节点的大小，而不会改变它们的相对位置，从而避免了干扰性的移动和遮挡。然而，稳定更新的缺点是后续更新的布局不够理想：只有第一个布局使用 Bruls 等人的方法。平方算法。

¥Examples · Source · Like treemapSquarify, except preserves the topology (node adjacencies) of the previous layout computed by d3.treemapResquarify, if there is one and it used the same target aspect ratio. This tiling method is good for animating changes to treemaps because it only changes node sizes and not their relative positions, thus avoiding distracting shuffling and occlusion. The downside of a stable update, however, is a suboptimal layout for subsequent updates: only the first layout uses the Bruls et al. squarified algorithm.

squarify.ratio(ratio) {#squarify_ratio}

源代码 · 指定生成的矩形所需的宽高比。比率必须指定为大于或等于 1 的数字。请注意，生成的矩形的方向（高或宽）并非由比例暗示；例如，比例为 2 时，将尝试生成宽高比为 2:1 或 1:2 的矩形混合。（但是，你可以通过生成不同维度的方形树形图，然后将 拉伸树形图 调整到所需的宽高比来近似地实现此结果。）此外，指定的比率仅仅是对平铺算法的一个提示；矩形不保证具有指定的宽高比。如果未指定，则纵横比默认为黄金比例，φ = (1 + sqrt(5)) / 2，每个 Kong 等人。

¥Source · Specifies the desired aspect ratio of the generated rectangles. The ratio must be specified as a number greater than or equal to one. Note that the orientation of the generated rectangles (tall or wide) is not implied by the ratio; for example, a ratio of two will attempt to produce a mixture of rectangles whose width:height ratio is either 2:1 or 1:2. (However, you can approximately achieve this result by generating a square treemap at different dimensions, and then stretching the treemap to the desired aspect ratio.) Furthermore, the specified ratio is merely a hint to the tiling algorithm; the rectangles are not guaranteed to have the specified aspect ratio. If not specified, the aspect ratio defaults to the golden ratio, φ = (1 + sqrt(5)) / 2, per Kong et al.