[fix]知识图谱更新布局和字段 review by qiw

Author: luoxiao-supermap

src/common/iServer/KnowledgeGraphNodeParameter.js

@@ -20,11 +20,11 @@ import { Util } from '../commontypes/Util';
 //   "id": 5348024557502471,
 //   "properties": {
 //     "server": "test1",
-//     "labelfieldname": "FEATUREGUID",
-//     "entityname": "院落",
-//     "bindfindid": "院落@ST_YARDA@1",
+//     "_labelfieldname": "FEATUREGUID",
+//     "_entityname": "院落",
+//     "_bindfindid": "院落@ST_YARDA@1",
 //     "FEATUREGUID": "{409E615B-A545-4E07-872D-B12EDA0B4A1A}",
-//     "findid": 1,
+//     "_findid": 1,
 //     "ENTITYNAME": "公共管理与公共服务"
 //   },
 //   "labels": ["院落"]

src/common/overlay/KnowledgeGraph.js

@@ -26,6 +26,7 @@ import { G6Render } from './knowledge-graph/G6Render';
  * @property {number} [minZoom] - 最小缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例小于该值，则将使用该值进行缩放，并返回 false。
  * @property {number} [maxZoom] - 最大缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例大于该值，则将使用该值进行缩放，并返回 false。
  * @property {KnowledgeGraph.Layout} [layout] - 布局。
+ * @property {boolean} [animate=true] - 是否开启动画。
  * @property {boolean} [autoResize=true] - 当视口变换时，是否自动重绘。
  * @property {KnowledgeGraph.NodeStyle} [defaultNode] - 默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。
  * @property {KnowledgeGraph.EdgeStyle} [defaultEdge] - 默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。
@@ -43,7 +44,7 @@ import { G6Render } from './knowledge-graph/G6Render';
 
 /**
  * @typedef {Object} KnowledgeGraph.Layout - 布局。
- * @property {string} [type='force'] - 布局类型， 可选值：['force']。 默认'force'。
+ * @property {string} [type='fruchterman'] - 布局类型， 可选值：['fruchterman']。 默认'fruchterman'。
  */
 
 /**

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

@@ -113,12 +113,16 @@ export class G6Render {
   }
 
   _getGraphConfig(config) {
+    const animateConfig = {
+      speed: 120,
+      maxIteration: 83,
+      tick: () => {
+        this.refreshPositions()
+      }
+    };
     const defaultLayout = {
-      type: 'force',
-      linkDistance: 80,
-      nodeSpacing: 20,
-      preventOverlap: true,
-      nodeStrength: 0
+      type: 'fruchterman',
+      gravity: 5
     };
     const defaultNode = {};
     const defaultEdge = {
@@ -163,7 +167,7 @@ export class G6Render {
         height: dom.scrollHeight, // Number，必须，图的高度
         plugins: defaultPlugins,
         modes: defaultMode,
-        layout: defaultLayout,
+        layout: { ...defaultLayout, ...animateConfig },
         defaultNode,
         defaultEdge,
         nodeStateStyles: {
@@ -183,7 +187,7 @@ export class G6Render {
       typeof config.container === 'string' ? document.querySelector(`#${config.container}`) : config.container;
     config.width = config.width || dom.scrollWidth;
     config.height = config.height || dom.scrollHeight;
-    config.layout = { ...defaultLayout, ...(config.layout || {}) };
+    config.layout = { ...defaultLayout, ...(config.layout || {}), ...(config.animate !== false ? animateConfig : {}) };
     config.defaultNode = { ...defaultNode, ...(config.defaultNode || {}) };
     config.defaultEdge = { ...defaultEdge, ...(config.defaultEdge || {}) };
     config.modes = {

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

@@ -135,7 +135,7 @@ function getNodeStyle(entity, style) {
 
 function getNodeLabel(entity) {
   const { properties } = entity;
-  const name = properties.labelfieldname;
+  const name = properties._labelfieldname;
   return properties[name] || '';
 }
 

test/common/overlay/KnowledgeGraphSpec.js

@@ -213,8 +213,8 @@ describe('KnowledgeGraph', () => {
     done();
   });
 
-  it('nodeLabelMaxWidth', (done) => {
-    var graph = new KnowledgeGraph({ nodeLabelMaxWidth: 100 });
+  it('nodeLabelMaxWidth animate false', (done) => {
+    var graph = new KnowledgeGraph({ nodeLabelMaxWidth: 100, animate: false });
     expect(graph).not.toBeNull();
     expect(graph.data).not.toBeNull();
     done();