Add Treemap Mark #4237

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

API 设计

mark.layout

mark.encode

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,
          // ...
        },
      },
    ],
  };
}