Custom Geometry

Customizing the geometry allows for adjusting the padding, text padding, and line height of the Treemap.

This provides control over the visual spacing and layout of the Treemap elements.

Usage

<Treemap
  geometry={{
    lineHeight: 25,
    paddingInner: 10,
    paddingOuter: 5,
    textPadding: 15,
  }}
  {items}
  {keyToColorFn}
  {keyToColorLabelFn}
  valueAccessor={getDocCount}
/>

Props

`geometry`

▶ { lineHeight: 25 ,paddingInner: 10 ,paddingOuter: 5 ,textPadding: 15 }

lineHeight: 25
paddingInner: 10
paddingOuter: 5
textPadding: 15

`items`

▶ (12) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]

0: { key: "2007 onwards" ,doc_count: 21230 }
1: { key: "1950-1966" ,doc_count: 15088 }
2: { key: "England and Wales: before 1900" ,doc_count: 12206 }
3: { key: "1965-1975" ,doc_count: 10334 }
4: { key: "1930-1949" ,doc_count: 7671 }
5: { key: "1983-1991" ,doc_count: 5652 }
6: { key: "1900-1929" ,doc_count: 5572 }
7: { key: "1976-1983" ,doc_count: 4656 }
8: { key: "1996-2002" ,doc_count: 3708 }
9: { key: "1991-1998" ,doc_count: 3464 }
10: { key: "2003-2007" ,doc_count: 2769 }
11: { key: "Scotland: before 1919" ,doc_count: 1836 }
length: 12

`keyToColorFn`

▶ ƒ scale(d)

length: 1
name: "scale"
prototype: { constructor: ƒ }
[[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
[[Prototype]]: ƒ ()

`keyToColorLabelFn`

▶ ƒ scale(d)

length: 1
name: "scale"
prototype: { constructor: ƒ }
[[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
[[Prototype]]: ƒ ()

`valueAccessor`

▶ ƒ (b)

length: 1
prototype: { constructor: ƒ }
[[Function]]: function (b) { return isRightCurry ? fn.call(this, b, a) : fn.call(this, a, b); }
[[Prototype]]: ƒ ()