setData不会保留顺序 #6094

Describe the bug / 问题描述

使用setData更新顺序时会不生效，如果布局与顺序相关则布局会混乱

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

以官网自定义布局二分图布局为例

import { BaseLayout, ExtensionCategory, Graph, register } from '@antv/g6';

const data = {
  nodes: [
    { id: '0', data: { cluster: 'A' } },
    { id: '1', data: { cluster: 'A' } },
    { id: '2', data: { cluster: 'A' } },
    { id: '3', data: { cluster: 'A' } },
    { id: '4', data: { cluster: 'A' } },
    { id: '5', data: { cluster: 'A' } },
    { id: '6', data: { cluster: 'B' } },
    { id: '7', data: { cluster: 'B' } },
    { id: '8', data: { cluster: 'B' } },
    { id: '9', data: { cluster: 'B' } },
  ],
  edges: [
    { source: '0', target: '6' },
    { source: '0', target: '7' },
    { source: '0', target: '9' },
    { source: '1', target: '6' },
    { source: '1', target: '9' },
    { source: '1', target: '7' },
    { source: '2', target: '8' },
    { source: '2', target: '9' },
    { source: '2', target: '6' },
    { source: '3', target: '8' },
    { source: '4', target: '6' },
    { source: '4', target: '7' },
    { source: '5', target: '9' },
  ],
};

class BiLayout extends BaseLayout {
  id = 'bi-layout';

  async execute(data, options) {
    const { sep = 100, nodeSep = 20, nodeSize = 32 } = { ...this.options, ...options };

    const [A, B] = data.nodes.reduce(
      (acc, curr) => {
        acc[curr.data.cluster === 'A' ? 0 : 1].push(curr);
        return acc;
      },
      [[], []],
    );

    return {
      nodes: [
        ...A.map((node, i) => ({
          id: node.id,
          style: {
            x: i * (nodeSep + nodeSize),
            y: 0,
          },
        })),
        ...B.map((node, i) => ({
          id: node.id,
          style: {
            x: i * (nodeSep + nodeSize),
            y: sep,
          },
        })),
      ],
    };
  }
}

register(ExtensionCategory.LAYOUT, 'bi', BiLayout);

const graph = new Graph({
  container: 'container',
  data,
  animation: false,
  autoFit: 'center',
  node: {
    style: {
      labelText: (d) => d.id,
    },
    palette: {
      type: 'group',
      field: 'cluster',
    },
  },
  layout: {
    type: 'bi',
    biSep: 300,
    nodeSep: 20,
    nodeSize: 32,
  },
  behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas'],
});

graph.render();
graph.setData({
  nodes: [
    { id: '0', data: { cluster: 'A' } },
    { id: '1', data: { cluster: 'A' } },
    { id: '2', data: { cluster: 'A' } },
    { id: '3', data: { cluster: 'A' } },
    { id: '4', data: { cluster: 'A' } },
    { id: '5', data: { cluster: 'A' } },
    { id: '6', data: { cluster: 'B' } },
    { id: '7', data: { cluster: 'B' } },
    { id: '9', data: { cluster: 'B' } },
    { id: '8', data: { cluster: 'B' } },
  ],
  edges: [
    { source: '0', target: '6' },
    { source: '0', target: '7' },
    { source: '0', target: '9' },
    { source: '1', target: '6' },
    { source: '1', target: '9' },
    { source: '1', target: '7' },
    { source: '2', target: '8' },
    { source: '2', target: '9' },
    { source: '2', target: '6' },
    { source: '3', target: '8' },
    { source: '4', target: '6' },
    { source: '4', target: '7' },
    { source: '5', target: '9' },
  ],
})
graph.render();

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response