跳到主要内容

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 为 truefalse。返回当前 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)