数据地图tag2

package.json

@@ -16,7 +16,6 @@
     "crypto-js": "^4.0.0",
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
-    "lodash": "^4.17.21",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.1.0",

src/view/Manage/Map/Component/Org.jsx

@@ -169,7 +169,6 @@ class Org extends React.Component {
       width,
       height,
       linkCenter: true,
-      fitCenter: true,
       maxZoom: 1,
       plugins: [tooltip],
       modes: {

src/view/Manage/Map/Component/Relation.jsx

@@ -15,6 +15,27 @@ const colors = [
   '#FFD6E7',
 ];
 
+const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
+  return [
+    ['M', x - r, y - r],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x + 2 - r, y - r],
+    ['L', x + r - 2, y - r],
+  ];
+};
+const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
+  return [
+    ['M', x - r, y - r],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x + 2 - r, y - r],
+    ['L', x + r - 2, y - r],
+    ['M', x, y - 2 * r + 2],
+    ['L', x, y - 2],
+  ];
+};
+
 const globalFontSize = 12;
 
 let graph = null;
@@ -31,11 +52,63 @@ class Relation extends React.Component {
       const width = container.scrollWidth || 500;
       const height = container.scrollHeight || 500;
 
-      function refreshDragedNodePosition(e) {
-        const model = e.item.get('model');
-        model.fx = e.x;
-        model.fy = e.y;
-      }
+      G6.registerNode(
+        'relation-node',
+        {
+          draw(cfg, group) {    
+            group.addShape('circle', {
+              attrs: {
+                x: 0,
+                y: 0,
+                r: cfg.size/2,
+                fill: colors[cfg.cluster % colors.length],
+              },
+            });
+              
+            const text = group.addShape('text', {
+              attrs: {
+                x: 0,
+                y: 0,
+                fill: '#000',
+                fontSize: globalFontSize,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                text: (cfg.label||''),
+              }
+            });
+  
+            const bbox = text.getBBox();
+  
+            if (!cfg.children) {
+              group.addShape('marker', {
+                attrs: {
+                  x: bbox.maxX + 8,
+                  y: bbox.height/2,
+                  r: 6,
+                  symbol: EXPAND_ICON,
+                  stroke: '#73d13d',
+                  lineWidth: 2,
+                }
+              });
+            } else if ((cfg.children||[]).length>0) {
+              group.addShape('marker', {
+                attrs: {
+                  x: bbox.maxX + 8,
+                  y: bbox.height/2,
+                  r: 6,
+                  symbol:  cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
+                  stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
+                  lineWidth: 2,
+                }
+              });
+            }
+      
+            return group;
+          },
+          update: undefined,
+        },
+        'single-node'
+      ); 
 
       const tooltip = new G6.Tooltip({
         offsetX: 10,
@@ -56,48 +129,61 @@ class Relation extends React.Component {
         },
       });
 
-      graph = new G6.Graph({
+      graph = new G6.TreeGraph({
         container: `container${type||''}`,
         width,
         height,
         plugins: [tooltip],
+        linkCenter: true,
+        maxZoom: 1,
+        modes: {
+          default: [
+            {
+              type: 'collapse-expand',
+              onChange: function onChange(item, collapsed) {
+                const data = item.get('model');
+                graph.updateItem(item, {
+                  collapsed,
+                });
+                data.collapsed = collapsed;
+                return true;
+              },
+            },
+            'drag-canvas',
+            'zoom-canvas',
+          ],
+        },
         layout: {
-          type: 'force',
-          preventOverlap: true,
-          linkDistance: (d) => {
-            return 200;
+          type: 'compactBox',
+          direction: 'RL',
+          getId: function getId(d) {
+            return d.id;
           },
-          nodeStrength: (d) => {
-            if (d.isLeaf) {
-              return -50;
-            }
-            return -10;
+          getHeight: () => {
+            return 26;
+          },
+          getWidth: () => {
+            return 26;
           },
-          edgeStrength: (d) => {
-            return 0.7;
+          getVGap: () => {
+            return 20;
           },
+          getHGap: () => {
+            return 30;
+          },
+          radial: true,
         },
         defaultNode: {
-          color: '#5B8FF9',
-        },
-        modes: {
-          default: ['drag-canvas'],
+          type: 'relation-node',
+          anchorPoints: [
+            [0, 0.5],
+            [1, 0.5],
+          ],
         },
       });
 
       this.layoutGraph();
 
-      graph.on('node:dragstart', function (e) {
-        graph.layout();
-        refreshDragedNodePosition(e);
-      });
-      graph.on('node:drag', function (e) {
-        refreshDragedNodePosition(e);
-      });
-      graph.on('node:dragend', function (e) {
-        e.item.get('model').fx = null;
-        e.item.get('model').fy = null;
-      });
       graph.on('node:click', function (e) {
         const node = e.item;
         const model = node.getModel();
@@ -152,34 +238,38 @@ class Relation extends React.Component {
         return res;
       };
 
-      const nodes = data.nodes;
-      const clusterMap = new Map();
-      let clusterId = 0;
-      nodes.forEach(function (node) {
-        // cluster
-        if (node.cluster && clusterMap.get(node.cluster) === undefined) {
-          clusterMap.set(node.cluster, clusterId);
-          clusterId++;
-        }
-        const cid = clusterMap.get(node.cluster);
-        if (!node.style) {
-          node.style = {};
-        }
-        node.style.fill = colors[cid % colors.length];
-      });
+      function recursionTreeData(treeData, depth, cluster = '') {
+        if ((treeData||[]).length === 0) return;
+  
+        (treeData||[]).forEach((item, index) => {
+  
+          let _cluster = 0;
+          if (depth === 1) {
+            _cluster = (index + 1);
+          } else {
+            _cluster = cluster;
+          }
+  
+          item.size = (100-depth*20)>60?(100-depth*20):60;
+          item.cluster = _cluster;
+          recursionTreeData(item.children||[], depth+1, _cluster);
+        })
+      }
+  
+      data.size = 100;
+      data.cluster = 0;
+      recursionTreeData(data.children||[], 1);
 
-      data.nodes.forEach(function (node) {
-        node.label = fittingString(node.label||'', node.size, globalFontSize);
+      graph.node(function (node) {
+        return {
+          label: fittingString(node.text||'', node.size-32, globalFontSize),
+        };
       });
 
-      graph.data({
-        nodes,
-        edges: data.edges.map(function (edge, i) {
-          edge.id = 'edge' + i;
-          return Object.assign({}, edge);
-        }),
-      });
+      graph.data(data);
       graph.render();
+      graph.fitView();
+
     }
   }
 

src/view/Manage/Map/MapContent.jsx

@@ -7,7 +7,6 @@ import Org from './Component/Org';
 import Tree from './Component/Tree';
 import Relation from './Component/Relation';
 import { dispatchLatest } from '../../../model';
-import lodash from 'lodash';
 
 const column = 3;
 
@@ -42,7 +41,7 @@ class MapContent extends React.Component {
             curTableModelData: data||[],
             breadcrumbContents: [{ data: data||[] }]
           }, () => {
-            this.setTreeAndRelationState(data||[]);
+            this.setAllTreeGraphState(data||[]);
           });
         }
       })
@@ -71,39 +70,6 @@ class MapContent extends React.Component {
     };
   }
 
-  convertRelationModelData = (data) => {
-
-    const _relationData = {
-      nodes: [],
-      edges: []
-    }
-
-    function recursionTreeData(treeData, sid, depth, cluster = '') {
-      if ((treeData||[]).length === 0) return;
-
-      (treeData||[]).forEach((item, index) => {
-
-        let _cluster = '';
-        if (depth === 1) {
-          _cluster = (index + 1).toString();
-        } else {
-          _cluster = cluster;
-        }
-
-        _relationData.nodes.push({...item, ...{ label: item.text||'', size: (80-depth*20)>20?(80-depth*20):20, cluster: _cluster, isLeaf: (item.childSize===null || item.childSize===0)}});
-        _relationData.edges.push({ source: sid, target: item.id });
-        recursionTreeData(item.children||[], item.id, depth+1, _cluster);
-      })
-    }
-
-    if (data && data.id) {
-      _relationData.nodes.push({...data, ...{ label: data.text||'', size: 80, cluster: '0', isLeaf: (data.childSize===null || data.childSize===0)}});
-      recursionTreeData(data.children||[], data.id, 1);
-    }
-
-    return _relationData;
-  }
-
   setSquareGraphState = (item) => {
     const { breadcrumbContents } = this.state;
 
@@ -123,14 +89,14 @@ class MapContent extends React.Component {
           this.convertRemoteData(data||[]);
           item.children = (data||[]);
           this.setSquareGraphState(item);
-          this.setTreeAndRelationState(tableModelData);
+          this.setAllTreeGraphState(tableModelData);
         }
       })
       return;
     }
 
     this.setSquareGraphState(item);
-    this.setTreeAndRelationState(tableModelData);
+    this.setAllTreeGraphState(tableModelData);
   }
 
   onBreadcrumbItemClick = (content, index) => {
@@ -167,17 +133,17 @@ class MapContent extends React.Component {
 
         recursionData(tableModelData);
 
-        this.setTreeAndRelationState(tableModelData);
+        this.setAllTreeGraphState(tableModelData);
       }
     })
   }
 
-  setTreeAndRelationState = (tableModelData) => {
+  setAllTreeGraphState = (tableModelData) => {
     const _treeData = this.convertTreeModelData(tableModelData);
     this.setState({ 
-      orgModelData: lodash.cloneDeep(_treeData),
-      treeModelData: lodash.cloneDeep(_treeData),
-      relationModelData: this.convertRelationModelData(lodash.cloneDeep(_treeData))
+      orgModelData: JSON.parse(JSON.stringify(_treeData)),
+      treeModelData: JSON.parse(JSON.stringify(_treeData)),
+      relationModelData: JSON.parse(JSON.stringify(_treeData))
     });
   }