feat: 为 treemap 新增rectstyle 和 hierarchyConfig 属性

__tests__/unit/plots/treemap/rect-style-spec.ts

@@ -0,0 +1,54 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+describe('treemap rectStyle', () => {
+  it('rectStyle', () => {
+    // 默认值
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+    });
+
+    treemapPlot.render();
+
+    const geometry = treemapPlot.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.styleOption.cfg).toEqual({ lineWidth: 1, stroke: '#fff' });
+
+    // 设置 rectStyle 对象
+    treemapPlot.update({
+      rectStyle: {
+        fill: '#f00',
+        lineWidth: 5,
+      },
+    });
+
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].styleOption.cfg).toEqual({ lineWidth: 5, fill: '#f00', stroke: '#fff' });
+
+    // 设置 rectStyle 回调函数
+    treemapPlot.update({
+      rectStyle: (data) => {
+        if (data.value > 100) {
+          return {
+            fill: '#f00',
+            stroke: '#fff',
+          };
+        }
+        return {
+          fill: '#0f0',
+          stroke: '#fff',
+        };
+      },
+    });
+
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[0].model.style).toEqual({ fill: '#f00', stroke: '#fff' });
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[10].model.style).toEqual({ fill: '#0f0', stroke: '#fff' });
+
+    treemapPlot.destroy();
+  });
+});

__tests__/unit/plots/treemap/utils-spec.ts

@@ -161,4 +161,23 @@ describe('treemap transformData', () => {
       expect(d.category).toEqual(d.expectCategory);
     });
   });
+
+  it('transformData, hierarchyConfig', () => {
+    const data = transformData({
+      data: data1,
+      colorField: 'name',
+      hierarchyConfig: {
+        tile: 'treemapDice',
+      },
+    });
+
+    const lineArr = data.map((dt) => {
+      const w = dt.x[1] - dt.x[0];
+      return Number(w.toFixed(3));
+    });
+
+    expect(data.length).toBe(3);
+    expect(lineArr[1] / lineArr[0]).toEqual(data1.children[1].value / data1.children[0].value);
+    expect(lineArr[2] / lineArr[1]).toEqual(data1.children[2].value / data1.children[1].value);
+  });
 });

docs/api/plots/treemap.en.md

@@ -48,6 +48,53 @@ const data = {
 
 `markdown:docs/common/color.zh.md`
 
+#### rectStyle
+
+<description>**optional** _object_</description>
+
+矩形图形样式。rectStyle 中的`fill`会覆盖 `color` 的配置。rectStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。
+
+默认配置：
+
+| 细分配置      | 类型   | 功能描述   |
+| ------------- | ------ | ---------- |
+| fill          | string | 填充颜色   |
+| stroke        | string | 描边颜色   |
+| lineWidth     | number | 线宽       |
+| lineDash      | number | 虚线显示   |
+| opacity       | number | 透明度     |
+| fillOpacity   | number | 填充透明度 |
+| strokeOpacity | number | 描边透明度 |
+
+```ts
+// 直接指定
+{
+  rectStyle: {
+    fill: 'red',
+  },
+}
+// Function
+{
+  rectStyle: (data) => {
+    if (data.value > 10) {
+      return {
+        fill: 'green',
+      }
+    }
+    return {
+      fill: 'red',
+    }
+  }
+}
+```
+
+#### hierarchyConfig
+
+<description>**optional** _object_</description>
+
+层级布局配置，例如 `tile`等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。
+默认为 `{tile: 'treemapResquarify'}`
+
 ### 图表组件
 
 `markdown:docs/common/component-polygon.zh.md`

docs/api/plots/treemap.zh.md

@@ -40,10 +40,56 @@ const data = {
 颜色映射字段名。
 
 
-
 ### 图形样式
 
 `markdown:docs/common/color.zh.md`
+#### rectStyle
+
+<description>**optional** _object_</description>
+
+矩形图形样式。rectStyle 中的`fill`会覆盖 `color` 的配置。rectStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。
+
+默认配置：
+
+| 细分配置      | 类型   | 功能描述   |
+| ------------- | ------ | ---------- |
+| fill          | string | 填充颜色   |
+| stroke        | string | 描边颜色   |
+| lineWidth     | number | 线宽       |
+| lineDash      | number | 虚线显示   |
+| opacity       | number | 透明度     |
+| fillOpacity   | number | 填充透明度 |
+| strokeOpacity | number | 描边透明度 |
+
+
+```ts
+// 直接指定
+{
+  rectStyle: {
+    fill: 'red',
+  },
+}
+// Function
+{
+  rectStyle: (data) => {
+    if (data.value > 10) {
+      return {
+        fill: 'green',
+      }
+    }
+    return {
+      fill: 'red',
+    }
+  }
+}
+```
+
+#### hierarchyConfig
+
+<description>**optional** _object_</description>
+
+层级布局配置，例如 `tile`等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。
+默认为 `{tile: 'treemapResquarify'}`
 
 ### 图表组件
 

src/plots/treemap/adaptor.ts

@@ -18,6 +18,13 @@ function defaultOptions(params: Params<TreemapOptions>): Params<TreemapOptions>
       options: {
         // 默认按照 name 字段对颜色进行分类
         colorField: 'name',
+        rectStyle: {
+          lineWidth: 1,
+          stroke: '#fff',
+        },
+        hierarchyConfig: {
+          tile: 'treemapResquarify',
+        },
         label: {
           fields: ['name'],
           layout: {
@@ -47,7 +54,7 @@ function defaultOptions(params: Params<TreemapOptions>): Params<TreemapOptions>
  */
 function geometry(params: Params<TreemapOptions>): Params<TreemapOptions> {
   const { chart, options } = params;
-  const { color, colorField } = options;
+  const { color, colorField, rectStyle } = options;
   const data = transformData(options);
   chart.data(data);
 
@@ -58,12 +65,10 @@ function geometry(params: Params<TreemapOptions>): Params<TreemapOptions> {
         xField: 'x',
         yField: 'y',
         seriesField: colorField,
+        rawFields: ['value'],
         polygon: {
           color,
-          style: {
-            lineWidth: 1,
-            stroke: '#fff',
-          },
+          style: rectStyle,
         },
       },
     })

src/plots/treemap/types.ts

@@ -1,7 +1,13 @@
-import { Options } from '../../types';
+import { Options, StyleAttr } from '../../types';
+import { HierarchyOption } from '../../utils/hierarchy/types';
 
 export interface TreemapOptions extends Omit<Options, 'data'> {
   /** 颜色字段 */
   readonly colorField?: string;
+  /** 数据字段 */
   readonly data?: Record<string, any>;
+  /** 图形样式 */
+  readonly rectStyle?: StyleAttr;
+  /** 层级布局配置 */
+  readonly hierarchyConfig?: Omit<HierarchyOption, 'as' | 'type' | 'field'>;
 }

src/plots/treemap/utils.ts

@@ -2,12 +2,12 @@ import { treemap } from '../../utils/hierarchy/treemap';
 import { TreemapOptions } from './types';
 
 export function transformData(options: TreemapOptions) {
-  const { data, colorField } = options;
+  const { data, colorField, hierarchyConfig } = options;
 
   const nodes = treemap(data, {
+    ...hierarchyConfig,
     // @ts-ignore
     type: 'hierarchy.treemap',
-    tile: 'treemapResquarify',
     field: 'value',
     as: ['x', 'y'],
   });