API

矩阵树图根据每个节点的关联值递归地将空间划分为矩形,适用于展示带权的树形数据。 矩形树图适合展现具有层级关系的数据,能够直观体现同级之间的比较。一个 Tree 状结构转化为平面空间矩形的状态。矩形树图的好处在于,相比起传统的树形结构图,矩形树图能更有效得利用空间,并且拥有展示占比的功能。

开始使用

treemap

import { schemeTableau10 } from 'd3-scale-chromatic'; 
 
{ 
  data: { 
    type: 'fetch', 
    value: 'https://assets.antv.antgroup.com/g2/flare-treemap.json', 
  }, 
  valueField: 'size', 
  scale: { 
    color: { 
      range: schemeTableau10 
    } 
  }, 
  layout: { 
    path: (d) => d.name.replace(/\./g, '/'), 
    tile: 'treemapBinary', 
    paddingInner: 1, 
  }, 
  style: { 
    labelText: (d) => 
      d.data.name 
        .split('.') 
        .pop() 
        .split(/(?=[A-Z][a-z])/g)[0], 
    labelFill: '#000', 
    labelPosition: 'top-left', 
    fillOpacity: 0.5 
  } 
} 
选项