[fix]知识图谱抖动效果处理

Author: luoxiao-supermap

package.json

@@ -148,6 +148,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.difference": "^4.5.0",
     "lodash.remove": "^4.7.0",
+    "lodash.throttle": "^4.1.1",
     "lodash.topairs": "4.3.0",
     "lodash.uniqby": "^4.7.0",
     "mapbox-gl": "1.13.2",

src/common/overlay/knowledge-graph/G6Render.js

@@ -1,5 +1,7 @@
 import G6 from '@antv/g6';
 import insertCss from 'insert-css';
+import throttle from 'lodash.throttle';
+
 /**
  * @private
  * @class G6Render
@@ -112,11 +114,9 @@ export class G6Render {
 
   _getGraphConfig(config) {
     const animateConfig = {
-      speed: 120,
-      maxIteration: 83,
-      tick: () => {
-        this.refreshPositions()
-      }
+      speed: 150,
+      maxIteration: 30,
+      tick: throttle(this.refreshPositions.bind(this), 150)
     };
     const defaultLayout = {
       type: 'fruchterman',

src/common/package.json

@@ -22,6 +22,7 @@
     "lodash.topairs": "4.3.0",
     "lodash.uniqby": "^4.7.0",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.throttle": "^4.1.1",
     "mapv": "2.0.62",
     "flatgeobuf": "3.31.1",
     "rbush": "^2.0.2",

test/common/overlay/KnowledgeGraphSpec.js

@@ -381,8 +381,22 @@ describe('KnowledgeGraph', () => {
     var graph = new KnowledgeGraph({ nodeLabelMaxWidth: 100, animate: false });
     expect(graph).not.toBeNull();
     expect(graph.data).not.toBeNull();
+    expect(graph.config.layout.tick).toBeUndefined();
+    expect(graph.config.layout.maxIteration).toBeUndefined();
+    expect(graph.config.layout.speed).toBeUndefined();
     done();
   });
+
+  it('nodeLabelMaxWidth animate true', (done) => {
+    var graph = new KnowledgeGraph({ animate: true });
+    expect(graph).not.toBeNull();
+    expect(graph.data).not.toBeNull();
+    expect(graph.config.layout.tick).not.toBeUndefined();
+    expect(graph.config.layout.maxIteration).not.toBeUndefined();
+    expect(graph.config.layout.speed).not.toBeUndefined();
+    done();
+  });
+
   it('expand collpase hidden Nodes', (done) => {
     var graph = new KnowledgeGraph();
     graph.setData(data);