fix(word-cloud): 修复错误的边界值导致的重叠及间隙过大问题 (#1976)

* fix(word-cloud): 修复错误的边界值导致的重叠及间隙过大问题

* chore(word-cloud): 更改最小字体默认值

Author: zhangzhonghe

__tests__/bugs/issue-1970-spec.ts

@@ -0,0 +1,28 @@
+import { WordCloud } from '../../src';
+import { CountryEconomy } from '../data/country-economy';
+import { createDiv } from '../utils/dom';
+
+describe('issue 1970', () => {
+  it('bounds', () => {
+    const cloud = new WordCloud(createDiv(), {
+      width: 400,
+      height: 300,
+      data: CountryEconomy,
+      wordField: 'Country',
+      weightField: 'GDP',
+    });
+
+    cloud.render();
+
+    const width = cloud.chart.ele.clientWidth;
+    const height = cloud.chart.ele.clientHeight;
+
+    // 最终的数据之中必须有这两个点表示画布的边界，才能正常渲染词云图
+    // @ts-ignore
+    expect(cloud.chart.filteredData.some((v) => v.x === 0 && v.y === 0)).toBe(true);
+    // @ts-ignore
+    expect(cloud.chart.filteredData.some((v) => v.x === width && v.y === height)).toBe(true);
+
+    cloud.destroy();
+  });
+});

src/plots/word-cloud/index.ts

@@ -33,7 +33,7 @@ export class WordCloud extends Plot<WordCloudOptions> {
         fontFamily: 'Verdana',
         fontWeight: 'normal',
         padding: 1,
-        fontSize: [20, 60],
+        fontSize: [12, 60],
         rotation: [0, 90],
         rotationSteps: 2,
         rotateRatio: 0.5,

src/utils/transform/word-cloud.ts

@@ -63,30 +63,28 @@ export function transform(words: Word[], options: Options) {
   const result = layout.start();
   const tags: any[] = result._tags;
 
-  const bounds = result._bounds || [
-    { x: 0, y: 0 },
-    { x: options.size[0], y: options.size[1] },
-  ];
-
   tags.forEach((tag) => {
     tag.x += options.size[0] / 2;
     tag.y += options.size[1] / 2;
   });
 
   const [w, h] = options.size;
-  const hasImage = result.hasImage;
+  // 添加两个参照数据，分别表示左上角和右下角。
+  // 不添加的话不会按照真实的坐标渲染，而是以
+  // 数据中的边界坐标为边界进行拉伸，以铺满画布。
+  // 这样的后果会导致词语之间的重叠。
   tags.push({
     text: '',
     value: 0,
-    x: hasImage ? 0 : bounds[0].x,
-    y: hasImage ? 0 : bounds[0].y,
+    x: 0,
+    y: 0,
     opacity: 0,
   });
   tags.push({
     text: '',
     value: 0,
-    x: hasImage ? w : bounds[1].x,
-    y: hasImage ? h : bounds[1].y,
+    x: w,
+    y: h,
     opacity: 0,
   });