diff --git a/CHANGELOG.md b/CHANGELOG.md
index f83ea4b56f..2f61eb8d9b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # ChangeLog
 
+#### 4.6.17
+
+- fix: legend changeData problem, closes: #3561;
+- fix: redo and undo with an image node, closes: #3782;
+- fix: call refreshPositions instead of positionsAnimate while there is no layout configuration;
+
 #### 4.6.16
 
 - feat: ID check;
diff --git a/packages/core/package.json b/packages/core/package.json
index 9aeb5902de..c56c5e7ced 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
index d8b2e4822b..554726c19d 100644
--- a/packages/core/src/global.ts
+++ b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.6.16',
+  version: '0.6.17',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',
diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
index 5f3f89518b..42b5ca5405 100644
--- a/packages/core/src/graph/graph.ts
+++ b/packages/core/src/graph/graph.ts
@@ -2247,12 +2247,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       };
     });
 
-    if (self.isAnimating()) {
-      self.stopAnimate();
-    }
+    self.stopAnimate();
 
     const canvas: ICanvas = self.get('canvas');
 
+    self.animating = true;
     canvas.animate(
       (ratio: number) => {
         each(toNodes, data => {
@@ -2379,7 +2378,9 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
   }
 
   public stopAnimate(): void {
-    this.get('canvas').stopAnimate();
+    if (this.isAnimating()) {
+      this.get('canvas').stopAnimate();
+    }
   }
 
   public isAnimating(): boolean {
diff --git a/packages/element/package.json b/packages/element/package.json
index d271b7a029..5eb816b04f 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.6.16",
+    "@antv/g6-core": "0.6.17",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {
diff --git a/packages/g6/package.json b/packages/g6/package.json
index 7f72a44f77..6c985b9ba3 100644
--- a/packages/g6/package.json
+++ b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.6.16",
+  "version": "4.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.6.16"
+    "@antv/g6-pc": "0.6.17"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
index 571843d055..258852b2b6 100644
--- a/packages/g6/src/index.ts
+++ b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.6.16';
+G6.version = '4.6.17';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.6.16';
+export const version = '4.6.17';
diff --git a/packages/pc/package.json b/packages/pc/package.json
index 1c89a4d918..8368dccfcf 100644
--- a/packages/pc/package.json
+++ b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.6.16",
-    "@antv/g6-element": "0.6.16",
-    "@antv/g6-plugin": "0.6.16",
+    "@antv/g6-core": "0.6.17",
+    "@antv/g6-element": "0.6.17",
+    "@antv/g6-plugin": "0.6.17",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.2.5",
     "@antv/matrix-util": "^3.1.0-beta.3",
diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts
index f88a7e854c..c888b2f493 100644
--- a/packages/pc/src/global.ts
+++ b/packages/pc/src/global.ts
@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.6.16',
+  version: '0.6.17',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',
diff --git a/packages/pc/src/graph/controller/layout.ts b/packages/pc/src/graph/controller/layout.ts
index 8ef02e369a..8061cbda6c 100644
--- a/packages/pc/src/graph/controller/layout.ts
+++ b/packages/pc/src/graph/controller/layout.ts
@@ -305,7 +305,7 @@ export default class LayoutController extends AbstractLayout {
       });
     } else {
       // 无布局配置
-      this.refreshLayout();
+      graph.refreshPositions();
       success?.();
     }
 
diff --git a/packages/pc/src/graph/graph.ts b/packages/pc/src/graph/graph.ts
index 39bf83f16a..a9288af855 100644
--- a/packages/pc/src/graph/graph.ts
+++ b/packages/pc/src/graph/graph.ts
@@ -415,10 +415,7 @@ export default class Graph extends AbstractGraph implements IGraph {
    */
   public downloadImage(name?: string, type?: DataUrlType, backgroundColor?: string): void {
     const self = this;
-
-    if (self.isAnimating()) {
-      self.stopAnimate();
-    }
+    self.stopAnimate();
 
     const canvas = self.get('canvas');
     const renderer = canvas.getRenderer();
diff --git a/packages/pc/tests/unit/graph/svg-spec.ts b/packages/pc/tests/unit/graph/svg-spec.ts
index 65b0904f74..a5612745ca 100644
--- a/packages/pc/tests/unit/graph/svg-spec.ts
+++ b/packages/pc/tests/unit/graph/svg-spec.ts
@@ -2533,10 +2533,10 @@ describe('plugins', () => {
     const gridDom = document.getElementsByClassName('g6-grid')[0] as HTMLElement;
     expect(gridDom).not.toBe(undefined);
     const minZoom = graph.get('minZoom');
-    const width = (500 * 80) / minZoom;
-    const height = (500 * 80) / minZoom;
-    expect(gridDom.style.width).toBe(`${width}px`);
-    expect(gridDom.style.height).toBe(`${height}px`);
+    const width = (500 * 80) / minZoom; // 2000000
+    const height = (500 * 80) / minZoom; // 2000000
+    expect(gridDom.style.width).toBe("2e+06px");
+    expect(gridDom.style.height).toBe("2e+06px");
     // graph.destroy();
     // const parentDom = gridDom.parentNode.parentNode;
     // expect(parentDom).toBe(null);
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index 56b3abded9..8e50391193 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,8 +22,8 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.6.16",
-    "@antv/g6-element": "0.6.16",
+    "@antv/g6-core": "0.6.17",
+    "@antv/g6-element": "0.6.17",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",
diff --git a/packages/plugin/src/legend/index.ts b/packages/plugin/src/legend/index.ts
index 51ba0d2751..6e5a55370d 100644
--- a/packages/plugin/src/legend/index.ts
+++ b/packages/plugin/src/legend/index.ts
@@ -349,18 +349,14 @@ export default class Legend extends Base {
         width: 200,
         height: 200,
       });
-      const rootGroup = lc.addGroup({ name: 'root' });
-      rootGroup.addGroup({ name: 'node-group' });
-      rootGroup.addGroup({ name: 'edge-group' });
-      // nodeStateStyles: {
-      //   legendActive,
-      //   legendInactive
-      // }
-      this.set('legendCanvas', lc);
+    } else {
+      lc.clear();
     }
-    const group = lc.find(e => e.get('name') === 'root');
-    const nodeGroup = group.find(e => e.get('name') === 'node-group');
-    const edgeGroup = group.find(e => e.get('name') === 'edge-group')
+    const group = lc.addGroup({ name: 'root' });
+    const nodeGroup = group.addGroup({ name: 'node-group' });
+    const edgeGroup = group.addGroup({ name: 'edge-group' });
+    this.set('legendCanvas', lc);
+
     const itemsData = this.get('itemsData');
     const itemTypes = ['nodes', 'edges'];
     const itemGroup = [nodeGroup, edgeGroup];
diff --git a/packages/plugin/src/toolBar/index.ts b/packages/plugin/src/toolBar/index.ts
index 0ad901e53f..4b83e0dbed 100644
--- a/packages/plugin/src/toolBar/index.ts
+++ b/packages/plugin/src/toolBar/index.ts
@@ -257,6 +257,7 @@ export default class ToolBar extends Base {
             if (!array) return;
             array.forEach((model) => {
               const item = graph.findById(model.id);
+              delete model.id;
               graph.updateItem(item, model, false);
               if (item.getType() === 'combo') graph.updateCombo(item as ICombo)
             });
@@ -348,6 +349,7 @@ export default class ToolBar extends Base {
             if (!array) return;
             array.forEach((model) => {
               const item = graph.findById(model.id);
+              delete model.id;
               graph.updateItem(item, model, false);
               if (item.getType() === 'combo') graph.updateCombo(item as ICombo)
             });
diff --git a/packages/plugin/tests/unit/grid-spec.ts b/packages/plugin/tests/unit/grid-spec.ts
index 4b45534a93..b980a075c8 100644
--- a/packages/plugin/tests/unit/grid-spec.ts
+++ b/packages/plugin/tests/unit/grid-spec.ts
@@ -40,38 +40,38 @@ describe('grid', () => {
     const gridContainer: HTMLDivElement = container.childNodes[0] as HTMLDivElement;
 
     const minZoom = graph.get('minZoom');
-    const width = (800 * 80) / minZoom;
-    const height = (600 * 80) / minZoom;
-    expect(gridContainer.style.width).toBe(`${width}px`);
-    expect(gridContainer.style.height).toBe(`${height}px`);
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    const width = (800 * 80) / minZoom; // 3200000
+    const height = (600 * 80) / minZoom; // 2400000
+    expect(gridContainer.style.width).toBe('3.2e+06px'); // width
+    expect(gridContainer.style.height).toBe('2.4e+06px'); // height
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
     expect(gridContainer.style.backgroundImage).not.toEqual('');
 
     graph.translate(-100, -100);
 
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, -100, -100)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.zoom(0.5);
     expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, -50, -50)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.get('group').resetMatrix();
 
     graph.translate(100, 100);
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 100, 100)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.addItem('node', { x: -200, y: 200 });
 
     graph.translate(100, 100);
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 200, 200)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
   });
   it('grid destroy', () => {
     const container = graph.get('container');
diff --git a/packages/plugin/tests/unit/legend-spec.ts b/packages/plugin/tests/unit/legend-spec.ts
index 5038c4bf0a..107e1a1009 100644
--- a/packages/plugin/tests/unit/legend-spec.ts
+++ b/packages/plugin/tests/unit/legend-spec.ts
@@ -181,7 +181,7 @@ describe('legend', () => {
     setTimeout(() => {
       graph.addPlugin(legend)
       expect(document.getElementsByClassName('g6-legend-container').length).not.toBe(0);
-      
+
       const legendCanvas = legend.get('legendCanvas');
       const rootGroup = legendCanvas.get('children')[0];
       const nodeGroup = rootGroup.find(e => e.get('name') === 'node-group');
@@ -215,7 +215,7 @@ describe('legend', () => {
         y: 0,
       });
       expect(graph.findAllByState('edge', 'active').length).toBe(2)
-      
+
       legendCanvas.emit('click', {
         target: legendCanvas
       })
@@ -264,7 +264,7 @@ describe('legend', () => {
         }
       }
     });
-  
+
     const graph = new G6.Graph({
       container: div,
       width: 400,
@@ -286,7 +286,7 @@ describe('legend', () => {
     setTimeout(() => {
       graph.addPlugin(legend)
       expect(document.getElementsByClassName('g6-legend-container').length).not.toBe(0);
-      
+
       const legendCanvas = legend.get('legendCanvas');
       const rootGroup = legendCanvas.get('children')[0];
       const nodeGroup = rootGroup.find(e => e.get('name') === 'node-group');
@@ -331,16 +331,189 @@ describe('legend', () => {
         y: 0,
       });
       expect(graph.findAllByState('edge', 'active').length).toBe(2)
-      
+
       legendCanvas.emit('node-container:mouseleave', {
         target: legendEdge0Shape,
         x: 0,
         y: 0,
       });
-      
+
       graph.destroy()
       done();
     }, 500);
   });
+  it('legend changeData', () => {
+    const typeConfigs = {
+      'type1': {
+        type: 'circle',
+        size: 5,
+        style: {
+          fill: '#5B8FF9'
+        }
+      },
+      'type2': {
+        type: 'circle',
+        size: 20,
+        style: {
+          fill: '#5AD8A6'
+        }
+      },
+      'type3': {
+        type: 'rect',
+        size: [10, 10],
+        style: {
+          fill: '#5D7092'
+        }
+      },
+      'eType1': {
+        type: 'line',
+        style: {
+          width: 20,
+          stroke: '#F6BD16',
+        }
+      },
+      'eType2': {
+        type: 'cubic',
+      },
+      'eType3': {
+        type: 'quadratic',
+        style: {
+          width: 25,
+          stroke: '#6F5EF9'
+        }
+      }
+    }
+    const legendData = {
+      nodes: [{
+        id: 'type1',
+        label: 'node-type1',
+        order: 4,
+        ...typeConfigs['type1']
+      }, {
+        id: 'type2',
+        label: 'node-type2',
+        order: 0,
+        ...typeConfigs['type2']
+      }, {
+        id: 'type3',
+        label: 'node-type3',
+        order: 2,
+        ...typeConfigs['type3']
+      }],
+      edges: [{
+        id: 'eType1',
+        label: 'edge-type1',
+        order: 2,
+        ...typeConfigs['eType1']
+      }, {
+        id: 'eType2',
+        label: 'edge-type2',
+        ...typeConfigs['eType2']
+      }, {
+        id: 'eType3',
+        label: 'edge-type3',
+        ...typeConfigs['eType3']
+      }]
+    }
+    const legend = new Legend({
+      data: legendData,
+      align: 'center',
+      layout: 'horizontal', // vertical
+      position: 'bottom-right',
+      vertiSep: 12,
+      horiSep: 24,
+      offsetY: -24,
+      padding: [4, 16, 8, 16],
+      containerStyle: {
+        fill: '#ccc',
+        lineWidth: 1
+      },
+      title: 'Legend',
+      titleConfig: {
+        position: 'center',
+        offsetX: 0,
+        offsetY: 12,
+      },
+      filter: {
+        enable: true,
+        multiple: true,
+        trigger: 'click',
+        graphActiveState: 'activeByLegend',
+        graphInactiveState: 'inactiveByLegend',
+        filterFunctions: {
+          'type1': (d) => {
+            if (d.legendType === 'type1') return true;
+            return false
+          },
+          'type2': (d) => {
+            if (d.legendType === 'type2') return true;
+            return false
+          },
+          'type3': (d) => {
+            if (d.legendType === 'type3') return true;
+            return false
+          },
+          'eType1': (d) => {
+            if (d.legendType === 'eType1') return true;
+            return false
+          },
+          'eType2': (d) => {
+            if (d.legendType === 'eType2') return true;
+            return false
+          },
+          'eType3': (d) => {
+            if (d.legendType === 'eType3') return true;
+            return false
+          },
+        }
+      }
+    });
+
+    const graph = new G6.Graph({
+      container: div,
+      width: 400,
+      height: 400,
+      plugins: [legend],
+      modes: {
+        default: ['drag-canvas', 'zoom-canvas', 'drag-node']
+      },
+      edgeStateStyles: {
+        active: {
+          lineWidth: 3
+        },
+        inactive: {
+          opacity: 0.5
+        }
+      }
+    });
+    graph.read(data);
+    const legendCanvas = legend.get('legendCanvas');
+    let legendRoot = legendCanvas.find(e => e.get('name') === 'root');
+    let nodesGroup = legendRoot.find(e => e.get('name') === 'node-group')
+    let edgesGroup = legendRoot.find(e => e.get('name') === 'edge-group')
+    expect(nodesGroup.get('children').length).toBe(3);
+    expect(edgesGroup.get('children').length).toBe(3);
+
+    legend.changeData({
+      nodes: [{
+        id: 'type1',
+        label: 'node-type1',
+        order: 4,
+        ...typeConfigs['type1']
+      }],
+      edges: [{
+        id: 'eType1',
+        label: 'edge-type1',
+        order: 2,
+        ...typeConfigs['eType1']
+      }]
+    });
+    legendRoot = legendCanvas.find(e => e.get('name') === 'root');
+    nodesGroup = legendRoot.find(e => e.get('name') === 'node-group')
+    edgesGroup = legendRoot.find(e => e.get('name') === 'edge-group')
+    expect(nodesGroup.get('children').length).toBe(1);
+    expect(edgesGroup.get('children').length).toBe(1);
+    graph.destroy();
+  });
 });
 
diff --git a/packages/site/package.json b/packages/site/package.json
index 0dce2f2018..4d13b1070c 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/g6-site",
-  "version": "4.6.16",
+  "version": "4.6.17",
   "description": "G6 sites deployed on gh-pages",
   "keywords": [
     "antv",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.0.6",
     "@antv/chart-node-g6": "^0.0.3",
-    "@antv/g6": "4.6.16",
+    "@antv/g6": "4.6.17",
     "@antv/gatsby-theme-antv": "1.1.15",
     "@antv/util": "^2.0.9",
     "@antv/vis-predict-engine": "^0.1.1",