[Bug] treemap transform 不支持 number 字符串

[xiaoluoHe]

Version

--

Link to Minimal Reproduction

--

Steps to Reproduce

const spec = {
  padding: { top: 30, right: 5, bottom: 30, left: 5 },

  data: [
    {
      id: 'table',
      values:  [
            {
                "name": "办公用品",
                "children": [
                    {
                        "name": "用品",
                        "value": "2266",
                    },
                    {
                        "name": "信封",
                        "value": "2271",
                    },
                    {
                        "name": "美术",
                        "value": "2016",
                    },
                    {
                        "name": "标签",
                        "value": "2116",
                    },
                    {
                        "name": "装订机",
                        "value": "3352",
                    },
                    {
                        "name": "收纳具",
                        "value": "2938",
                    },
                    {
                        "name": "器具",
                        "value": "2142",
                    },
                    {
                        "name": "纸张",
                        "value": "2055",
                    },
                    {
                        "name": "系固件",
                        "value": "2278",
                    }
                ],
            },
            {
                "name": "技术",
                "col_fld_tmp_mg_2": "技术",
                "children": [
                    {
                        "name": "配件",
                        "value": "2092",
                    },
                    {
                        "name": "电话",
                        "value": "2180",
                    },
                    {
                        "name": "设备",
                        "value": "1244",
                    },
                    {
                        "name": "复印机",
                        "value": "2135",
                    }
                ],
            },
            {
                "name": "家具",
                "col_fld_tmp_mg_2": "家具",
                "children": [
                    {
                        "name": "书架",
                        "value": "2396",
                    },
                    {
                        "name": "用具",
                        "value": "2308",
                    },
                    {
                        "name": "桌子",
                        "value": "619",
                    },
                    {
                        "name": "椅子",
                        "value": "3182",
                    }
                ],
            }
        ],
      transform: [
        {
          type: 'treemap',
          width: { signal: 'viewWidth' },
          height: { signal: 'viewHeight' },
          padding: 4,
          gapWidth: 2,
          labelPadding: 20
        }
      ]
    },
    {
      id: 'flattenData',
      source: 'table',
      transform: [
        {
          type: 'map',
          all: true,
          callback: datum => {
            const res = [];
            flattenNodes(datum, res);

            return res;
          }
        }
      ]
    },
    {
      id: 'textData',
      source: 'flattenData',
      transform: [
        {
          type: 'filter',
          callback: datum => {
            return !!datum.labelRect;
          }
        }
      ]
    }
  ],

  scales: [
    {
      id: 'colorScale',
      type: 'ordinal',
      domain: { data: 'table', field: 'name' },
      range: [
        '#6690F2',
        '#70D6A3',
        '#B4E6E2',
        '#63B5FC',
        '#FF8F62',
        '#FFDC83',
        '#BCC5FD',
        '#A29BFE',
        '#63C4C7',
        '#F68484'
      ]
    }
  ],

  marks: [
    {
      type: 'group',
      dependency: ['viewBox'],
      encode: {
        update: (datum, el, params) => {
          return {
            x: params.viewBox.x1,
            y: params.viewBox.y1
          };
        }
      },

      marks: [
        {
          type: 'rect',
          from: { data: 'flattenData' },
          key: 'flattenIndex',
          dependency: ['colorScale'],
          encode: {
            update: {
              x: { field: 'x0' },
              x1: { field: 'x1' },
              y: { field: 'y0' },
              y1: { field: 'y1' },
              fill: (datum, el, params) => {
                const color = params.colorScale.scale(datum.datum[0].name);

                // const rgb = new ColorUtil.Color(color).color;
                // const hsl = ColorUtil.rgbToHsl(rgb.r, rgb.g, rgb.b);

                // return new ColorUtil.Color(`hsl(${hsl.h}, ${hsl.s}, ${40 + datum.depth * 10})`).toString();

                return color;
              },
              fillOpacity: (datum, el, params) => {
                return 0.2 + 0.2 * datum.depth;
              }
            }
          }
        },

        {
          type: 'text',
          from: { data: 'flattenData' },
          key: 'flattenIndex',
          encode: {
            update: {
              x: datum => {
                if (datum.labelRect) {
                  return (datum.labelRect.x0 + datum.labelRect.x1) / 2;
                }
                return (datum.x0 + datum.x1) / 2;
              },
              y: datum => {
                if (datum.labelRect) {
                  return (datum.labelRect.y0 + datum.labelRect.y1) / 2;
                }
                return (datum.y0 + datum.y1) / 2;
              },
              text: datum => {
                return datum.datum[datum.datum.length - 1].name;
              },
              maxLineWidth: datum => {
                return Math.abs(datum.x1 - datum.x0);
              }, 
              fontSize: 16,
              fill: 'black',
              textAlign: 'center',
              textBaseline: 'middle'
            }
          }
        }
      ]
    }
  ]
};

Current Behavior

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response