跳到主要内容

Treemap

常见使用场景:

const root = hierarchy(data)
root.sum((d) => d.value)
const treemapGenerator = treemap().size([width, height])
const result = treemapGenerator(root)
const leaves = result.leaves()

treemap()​

treemap(root)​

返回 Node 对象。

interface Node {
data: any // 原始数据
height: number
depth: number
parent: Node | null
children: Node[]
value: number
y0: number
x0: number
x1: number
y1: number
}

treemap.tile(tile)​

  • 指定 tile 方法:设置 tiling 算法,见 Treemap tiling。返回当前 treemap 布局。
  • 未指定 tile 方法:返回当前 tiling 算法,默认为黄金比例(1.61803)的 treemapSquarify。
const PHI = (1 + Math.sqrt(5)) / 2 // 1.618033988749895

treemap.size(size)​

  • 指定 size :设置尺寸,size 格式为 [width, height]。返回当前 treemap 布局。
  • 未指定 size :返回当前尺寸,默认尺寸为 [1, 1]。

treemap.round(round)​

  • 指定 round :启用/不启用位置取整,round 为 true 或 false。返回当前 treemap 布局。
  • 未指定 round :返回当前是否启用位置取整,默认为 false。

treemap.padding(padding)​

  • 指定 padding :同时设置内外的边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前边距。默认为 0。

treemap.paddingInner(padding)​

  • 指定 padding :设置内边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前内边距。默认为 0。

同时设置内边距。padding 为数值。默认为 0。

treemap.paddingOuter(padding)​

  • 指定 padding :设置上下左右外边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前外边距。默认为 0。

treemap.paddingTop(padding)​

  • 指定 padding :设置上边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前上边距。默认为 0。

treemap.paddingRight(padding)​

  • 指定 padding :设置右边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前右边距。默认为 0。

treemap.paddingBottom(padding)​

  • 指定 padding :设置下边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前下边距。默认为 0。

treemap.paddingLeft(padding)​

  • 指定 padding :设置左边距,padding 为数值或函数。返回当前 treemap 布局。
  • 未指定 padding :返回当前左边距。默认为 0。

Treemap tiling​

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

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

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

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

如果节点深度为奇数,则使用 treemapSlice,否则使用 treemapDice。

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

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

squarify.ratio(ratio)​