Add Treemap Mark

[pepper-nice]

用于绘制矩阵树图的复合 Mark

API 设计

mark.layout

API	说明
tile	布局方式
size	节点宽高比
padding/paddingInner/...	布局节点间隙
ratio	节点大小比率

mark.encode

API	说明
name	节点的名称字段
value	节点占比字段

mark.label

节点 label 样式

案例验证

import { csv } from 'd3-fetch';
import { autoType } from 'd3-dsv';
import { G2Spec } from '../../../src';

export async function flareTreemapDefaults(): Promise<G2Spec> {
  const data = await csv('data/flare.csv', autoType);
  const mockData = data.map((d) => ({
    ...d,
    group: d.name.split('.')[0],
  }));

  return {
    type: 'view',
    width: 900,
    height: 600,
    padding: 10,
    children: [
      {
        type: 'treemap',
        data: {
          value: mockData,
        },
        layout: {
          tile: 'binary',
          size: [1, 1],
          padding: 2,
        },
        encode: {
          name: 'name',
          value: 'value',
        },
        style: {
          fillOpacity: 0.6,
          // ...
        },
      },
    ],
  };
}

[pearmini]

下面 node 前缀没有必要的，因为里面只有一种 mark。

const options = {
  style: {
    fillOpacity: 0.6
  }
}