【v5】矩形树图 encode.value 使用字段列完整写法渲染异常 #5281

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

初级任务

任务介绍

更新矩阵树图文档的描述。大概就是目前 treemap 会把数据绑定到 d.data 上，所以如下去写：

.encode('value', (d) => d.data.size)

而不是：

.encode('value, d => d.size)

也不是：

.encode('value', 'size')

具体如何说明形式不定。

参考说明

• 防止用户提出以下的问题：

只改了图中标出的代码，渲染异常:

<img width="1171" alt="image" src="https://github.com/antvis/G2/assets/1549118/3c96ee98-1708-4db4-b21c-8d20439abd19">

import { Chart } from '@antv/g2';
import { schemeTableau10 } from 'd3-scale-chromatic';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  height: 900,
  width: 1100,
});

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

chart.render();

• 文档：https://g2.antv.antgroup.com/spec/graph/treemap