fix(label): 处理venn图label遮挡问题 (#2861)

* fix(label): 处理venn图label遮挡问题

* refactor(lint): 处理lint的问题，删去多余变量

* fix(label): 修复标签文字呈现问题

* refactor(demo): 修改venn图的demo数据

* refactor(demo): 修改venn图的demo数据

* refactor: 调整包大小

* fix(label): 修复labelsContainer的单测问题

Co-authored-by: 酥云 <[email protected]>

Author: Angelii

__tests__/unit/plots/funnel/label-spec.ts

@@ -42,7 +42,7 @@ describe('label', () => {
       },
     });
 
-    labelsContainer.cfg.children.forEach((item, index) => {
+    funnel.chart.geometries[0].labelsContainer.cfg.children.forEach((item, index) => {
       expect(item.get('children')[0].attr('text')).toBe(`行为:${data[index].action}`);
     });
     // @ts-ignore

__tests__/unit/plots/venn/index-spec.ts

@@ -31,12 +31,9 @@ describe('venn', () => {
     expect((elements[0].getData() as any).size).toBe(10);
     // path: [['M', ...], ['A', rx ry 0 1 0 x y], ...]
     const path = (elements[0].shape as IGroup).getChildren()[0].attr('path');
-    const label = (elements[0].shape as IGroup).getChildren()[1];
-    expect(label.get('name')).toBe('venn-label');
     expect(path[0][0]).toBe('M');
     expect(path[1][0]).toBe('A');
     expect(path[2][0]).toBe('A');
-    expect((elements[0].getData() as any).radius).toBe(400 / 2);
     expect(path[1][1]).toBe(400 / 2);
   });
 
@@ -53,8 +50,6 @@ describe('venn', () => {
     expect(elements[1].getModel().size).toBe(1);
     // path: [['M', ...], ['A', rx ry 0 1 0 x y], ...]
     const path = (elements[0].shape as IGroup).getChildren()[0].attr('path');
-    const label = (elements[0].shape as IGroup).getChildren()[1];
-    expect(label.get('name')).toBe('venn-label');
     expect(path[0][0]).toBe('M');
     expect(path[1][0]).toBe('A');
     expect(path[2][0]).toBe('A');
@@ -85,8 +80,6 @@ describe('venn', () => {
     expect((elements[2].getData() as any).size).toBe(4);
     // path: [['M', ...], ['A', rx ry 0 1 0 x y], ...]
     const path = (elements[0].shape as IGroup).getChildren()[0].attr('path');
-    const label = (elements[0].shape as IGroup).getChildren()[1];
-    expect(label.get('name')).toBe('venn-label');
     expect(path[0][0]).toBe('M');
     expect(path[1][0]).toBe('A');
     expect(path[2][0]).toBe('A');
@@ -125,8 +118,8 @@ describe('venn', () => {
     // 中心点
     expect((elements[6].getData() as any).x).toBeCloseTo(200);
     // 元素对齐
-    expect(elements[2].getData().x).toBeCloseTo((elements[6].getData() as any).x);
-    expect(elements[0].getData().y).toBeCloseTo((elements[1].getData() as any).y);
+    expect(elements[2].getData().x).toBeCloseTo((elements[6].getData() as any).x, 1);
+    expect(elements[0].getData().y).toBeCloseTo((elements[1].getData() as any).y, 1);
   });
 
   it('defaultOptions 保持从 constants 中获取', () => {

__tests__/unit/plots/venn/label-spec.ts

@@ -19,14 +19,23 @@ describe('venn: label', () => {
   });
   plot.render();
 
+  it('label', () => {
+    const geometries = plot.chart.geometries[0];
+    // @ts-ignore
+    expect(geometries.labelOption.cfg).not.toBeUndefined();
+    expect(geometries.labelsContainer.getChildren().length).toBe(6);
+  });
+
   it('label: offset', () => {
     plot.update({
       label: {
         offsetY: 6,
       },
     });
+
+    const geometries = plot.chart.geometries[0];
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label.offsetY).toBe(6);
+    expect(geometries.labelOption.cfg.offsetY).toBe(6);
   });
 
   it('label: style', () => {
@@ -39,12 +48,14 @@ describe('venn: label', () => {
         },
       },
     });
+
+    const geometries = plot.chart.geometries[0];
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label.style.textAlign).toBe('center');
+    expect(geometries.labelOption.cfg.style.textAlign).toBe('center');
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label.style.fill).toBe('red');
+    expect(geometries.labelOption.cfg.style.fill).toBe('red');
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label.style.lineHeight).toBe(18);
+    expect(geometries.labelOption.cfg.style.lineHeight).toBe(18);
   });
 
   it('label: formatter', () => {
@@ -60,16 +71,18 @@ describe('venn: label', () => {
         formatter,
       },
     });
+    const geometries = plot.chart.geometries[0];
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label.formatter).toEqual(formatter);
+    expect(geometries.labelOption.cfg.formatter).toEqual(formatter);
   });
 
   it('label: false', () => {
     plot.update({
       label: false,
     });
+    const geometries = plot.chart.geometries[0];
     // @ts-ignore
-    expect(plot.chart.geometries[0].customOption.label).toEqual(false);
+    expect(geometries.labelOption).toEqual(false);
   });
 
   afterAll(() => {

__tests__/unit/plots/venn/padding-spec.ts

@@ -133,9 +133,6 @@ describe('venn padding', () => {
       padding: 250,
     });
     plot.chart.geometries[0].data.forEach((datum) => {
-      if (datum.sets.length === 1) {
-        expect(datum.radius).toBe(0);
-      }
       expect(datum.x).toBe(0);
       expect(datum.y).toBe(0);
     });
@@ -147,9 +144,6 @@ describe('venn padding', () => {
       padding: 200,
     });
     plot.chart.geometries[0].data.forEach((datum) => {
-      if (datum.sets.length === 1) {
-        expect(datum.radius).toBe(0);
-      }
       expect(datum.x).toBe(200);
       expect(datum.y).toBe(0);
     });

examples/more-plots/venn/demo/customize.ts

@@ -1,6 +1,6 @@
 import { Venn } from '@antv/g2plot';
 
-fetch('https://gw.alipayobjects.com/os/antfincdn/yzC3ZiBbhM/venn-data.json')
+fetch('https://gw.alipayobjects.com/os/bmw-prod/c4c17fe9-0a93-4255-bc1e-1ff84966d24a.json')
   .then((data) => data.json())
   .then((data) => {
     const sum = data.reduce((a, b) => a + b.size, 0);

src/plots/venn/adaptor.ts

@@ -3,13 +3,22 @@ import { isArray, get, deepMix, isEqual } from '@antv/util';
 import { interaction, animation, theme, tooltip, scale } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { schema as schemaGeometry } from '../../adaptor/geometries';
-import { deepAssign, flow, getAdjustAppendPadding, normalPadding, resolveAllPadding } from '../../utils';
+import {
+  deepAssign,
+  flow,
+  findGeometry,
+  transformLabel,
+  getAdjustAppendPadding,
+  normalPadding,
+  resolveAllPadding,
+} from '../../utils';
 import { Datum } from '../../types';
 import { log, LEVEL } from '../../../src/utils';
 import { getColorMap, layoutVennData, islegalSets } from './utils';
 import { CustomInfo, VennData, VennOptions } from './types';
 import { ID_FIELD } from './constant';
 import './shape';
+import './label';
 
 /** 图例默认预留空间 */
 export const LEGEND_SPACE = 40;
@@ -99,12 +108,12 @@ function data(params: Params<VennOptions>): Params<VennOptions> {
  */
 function geometry(params: Params<VennOptions>): Params<VennOptions> {
   const { chart, options } = params;
-  const { pointStyle, label, setsField, sizeField } = options;
+  const { pointStyle, setsField, sizeField } = options;
 
   // 获取容器大小
   const [t, r, b, l] = normalPadding(chart.appendPadding);
   // 处理 legend 的位置. 默认预留 40px, 业务上可以通过 appendPadding 增加
-  const customInfo: CustomInfo = { offsetX: l, offsetY: t, label };
+  const customInfo: CustomInfo = { offsetX: l, offsetY: t };
   // coordinateBBox + appendPadding = viewBBox, 不需要再计算 appendPadding 部分，因此直接使用 viewBBox
   const { width, height } = chart.viewBBox;
   // 处理padding输入不合理的情况， w 和 h 不能为负数
@@ -119,8 +128,6 @@ function geometry(params: Params<VennOptions>): Params<VennOptions> {
         sizeField: sizeField,
         seriesField: ID_FIELD,
         rawFields: [setsField, sizeField],
-        // 不使用 G2 的label，直接在自定义 shape 中实现
-        label: false,
         schema: {
           shape: 'venn',
           style: pointStyle,
@@ -136,6 +143,39 @@ function geometry(params: Params<VennOptions>): Params<VennOptions> {
   return params;
 }
 
+/**
+ * 处理 label
+ * @param params
+ */
+function label(params: Params<VennOptions>): Params<VennOptions> {
+  const { chart, options } = params;
+  const { label } = options;
+
+  // 获取容器大小
+  const [t, r, b, l] = normalPadding(chart.appendPadding);
+  // 传入 label 布局函数所需的 自定义参数
+  const customLabelInfo = { offsetX: l, offsetY: t };
+
+  const geometry = findGeometry(chart, 'schema');
+
+  if (!label) {
+    geometry.label(false);
+  } else {
+    const { callback, ...cfg } = label;
+    geometry.label({
+      fields: ['id'],
+      callback,
+      cfg: deepMix({}, transformLabel(cfg), {
+        // 使用 G2 的 自定义label 修改位置
+        type: 'venn',
+        customLabelInfo,
+      }),
+    });
+  }
+
+  return params;
+}
+
 /**
  * legend 配置
  * @param params
@@ -174,6 +214,7 @@ export function adaptor(params: Params<VennOptions>) {
     theme,
     data,
     geometry,
+    label,
     scale({}),
     legend,
     axis,

src/plots/venn/constant.ts

@@ -20,7 +20,6 @@ export const DEFAULT_OPTIONS: Partial<VennOptions> = {
   },
   legend: { position: 'top-left' },
   label: {
-    offsetY: 6,
     style: {
       textAlign: 'center',
       fill: '#fff',

src/plots/venn/label.ts

@@ -0,0 +1,26 @@
+import { registerGeometryLabel, GeometryLabel } from '@antv/g2';
+
+// Step 1
+// 自定义 Label 类
+// 需要继承 GeometryLabel 基类
+class VennLabel extends GeometryLabel {
+  /**
+   * 获取每个 label 的位置
+   * @param labelCfg
+   * @param mappingData
+   * @param index
+   * @returns label point
+   */
+  protected getLabelPoint(labelCfg, mappingData, index: number) {
+    const { x, y } = labelCfg.data;
+    const { offsetX, offsetY } = labelCfg.customLabelInfo;
+    return {
+      content: labelCfg.content[index],
+      x: x + offsetX,
+      y: y + offsetY,
+    };
+  }
+}
+
+// Step 2: 注册 CustomLabel
+registerGeometryLabel('venn', VennLabel);

src/plots/venn/shape.ts

@@ -1,7 +1,6 @@
 import { IGroup } from '@antv/g-base';
 import { registerShape, Types, Util } from '@antv/g2';
 import { parsePathString } from '@antv/path-util';
-import { get } from '@antv/util';
 import { deepAssign } from '../../utils';
 import { Datum, Point } from '../../types';
 import { CustomInfo } from './types';
@@ -32,23 +31,7 @@ registerShape('schema', 'venn', {
       name: 'venn-path',
     });
 
-    const { offsetX, offsetY, label } = cfg.customInfo as CustomInfo;
-
-    if (label !== false) {
-      const formatter = get(label, 'formatter');
-      const offsetX = get(label, 'offsetX', 0);
-      const offsetY = get(label, 'offsetY', 0);
-      group.addShape('text', {
-        attrs: {
-          ...label,
-          ...get(label, 'style', { textAlign: 'center', fill: '#fff' }),
-          x: data.x + offsetX,
-          y: data.y + offsetY,
-          text: formatter ? formatter(data) : `${data.id}: ${data.size}`,
-        },
-        name: 'venn-label',
-      });
-    }
+    const { offsetX, offsetY } = cfg.customInfo as CustomInfo;
 
     const matrix = Util.transform(null, [['t', offsetX, offsetY]]);
     group.setMatrix(matrix);

src/plots/venn/utils.ts

@@ -2,7 +2,7 @@ import { assign, memoize } from '@antv/util';
 import { blend } from '../../utils/color/blend';
 import { log, LEVEL } from '../../../src/utils';
 import { venn, scaleSolution } from './layout/layout';
-import { circlePath, intersectionAreaPath, computeTextCentres } from './layout/diagram';
+import { intersectionAreaPath, computeTextCentres } from './layout/diagram';
 import { ID_FIELD, PATH_FIELD } from './constant';
 import { VennData, VennOptions } from './types';
 
@@ -71,20 +71,15 @@ export function layoutVennData(options: VennOptions, width: number, height: numb
     const sets = row.sets;
     const id = sets.join(',');
     row[ID_FIELD] = id;
-    if (sets.length === 1) {
-      const circle = circles[id];
-      row[PATH_FIELD] = circlePath(circle.x, circle.y, circle.radius);
-      assign(row, circle);
-    } else {
-      const setCircles = sets.map((set) => circles[set]);
-      let path = intersectionAreaPath(setCircles);
-      if (!/[zZ]$/.test(path)) {
-        path += ' Z';
-      }
-      row[PATH_FIELD] = path;
-      const center = textCenters[id] || { x: 0, y: 0 };
-      assign(row, center);
+    // 保留 vennText 布局方法
+    const setCircles = sets.map((set) => circles[set]);
+    let path = intersectionAreaPath(setCircles);
+    if (!/[zZ]$/.test(path)) {
+      path += ' Z';
     }
+    row[PATH_FIELD] = path;
+    const center = textCenters[id] || { x: 0, y: 0 };
+    assign(row, center);
   });
   return vennData;
 }