fix(sankey): shape order same with data, layout space (#2354)

* fix(sankey): 图形和数据顺序不一致,布局存在空白区域 * chore: remove window.sankey * fix: ci
antvis · Feb 25, 2021 · c86625c · c86625c
1 parent 15e1603
commit c86625c
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 4 deletions.
diff --git a/__tests__/bugs/issue-2352-spec.ts b/__tests__/bugs/issue-2352-spec.ts
@@ -0,0 +1,67 @@
+import { Sankey } from '../../src';
+import { pick } from '../../src/utils/pick';
+import { createDiv } from '../utils/dom';
+
+describe('#2352', () => {
+  const DATA = [
+    {
+      source: 's1',
+      target: 't1',
+      weight: 10,
+    },
+    {
+      source: 's2',
+      target: 't2',
+      weight: 20,
+    },
+    {
+      source: 's3',
+      target: 't3',
+      weight: 30,
+    },
+  ];
+
+  it('data order should be keep', () => {
+    const sankey = new Sankey(createDiv(), {
+      data: DATA,
+      padding: 0,
+      appendPadding: 0,
+      width: 500,
+      height: 500,
+      autoFit: false,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'weight',
+    });
+
+    sankey.render();
+
+    // 1. 图形镜像
+    // @ts-ignore
+    expect(sankey.chart.getCoordinate().isReflectY).toBe(true);
+    const s1BBox = sankey.chart.views[1].geometries[0].elements[0].shape.getBBox();
+    // 顶着左上角
+    expect(s1BBox.x < 1).toBe(true);
+    expect(s1BBox.y < 1).toBe(true);
+
+    // 2. 空白
+    const xScale = sankey.chart.getScaleByField('x');
+    const yScale = sankey.chart.getScaleByField('y');
+    expect(pick(xScale, ['min', 'max', 'minLimit', 'maxLimit', 'sync'])).toEqual({
+      sync: true,
+      min: 0,
+      max: 1,
+      minLimit: 0,
+      maxLimit: 1,
+    });
+    expect(pick(yScale, ['min', 'max', 'minLimit', 'maxLimit', 'sync'])).toEqual({
+      sync: true,
+      min: 0,
+      max: 1,
+      minLimit: 0,
+      maxLimit: 1,
+    });
+
+    sankey.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/sankey/index-spec.ts b/__tests__/unit/plots/sankey/index-spec.ts
@@ -62,8 +62,8 @@ describe('sankey', () => {
 
     // tooltip
     sankey.chart.showTooltip({ x: 100, y: 100 });
-    expect(document.querySelector('.g2-tooltip-name').textContent).toBe('Oil imports -> Oil');
-    expect(document.querySelector('.g2-tooltip-value').textContent).toBe('504.287');
+    expect(document.querySelector('.g2-tooltip-name').textContent).toBe('Nuclear -> Thermal generation');
+    expect(document.querySelector('.g2-tooltip-value').textContent).toBe('839.978');
 
     sankey.destroy();
   });

diff --git a/src/plots/sankey/adaptor.ts b/src/plots/sankey/adaptor.ts
@@ -37,6 +37,8 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
   chart.legend(false);
   chart.tooltip(tooltip);
   chart.axis(false);
+  // y 镜像一下，防止图形顺序和数据顺序反了
+  chart.coordinate().reflect('y');
 
   // 2. 转换出 layout 前数据
   const sankeyLayoutInputData = transformDataToNodeLinkData(
@@ -132,8 +134,8 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
 
   // scale
   chart.scale({
-    x: { sync: true, nice: true },
-    y: { sync: true, nice: true },
+    x: { sync: true, nice: true, min: 0, max: 1, minLimit: 0, maxLimit: 1 },
+    y: { sync: true, nice: true, min: 0, max: 1, minLimit: 0, maxLimit: 1 },
     name: { sync: 'color' },
   });