force-directed layout

src/module/cytoscapeMap.js

@@ -1,6 +1,7 @@
 import cytoscape from 'cytoscape';
 import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
+import fcose from 'cytoscape-fcose';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import MapPathStore from '@/stores/mapPathStore';
@@ -22,6 +23,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 // 註冊布局演算法
 cytoscape.use(dagre);
 cytoscape.use(spread);
+cytoscape.use(fcose);
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -169,13 +171,19 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'text-margin-x': function(node) {
             return node.data('type') === 'activity' ? -5 : 0;
           },
+          'text-margin-y': function(node) {
+            return node.data('type') === 'activity' ? 0 : 0;
+          },
+          'padding':  function(node) {
+            return node.data('type') === 'activity' ? 0 : 0;
+          },          
           // 'text-justification': 'left',
           'text-halign': 'center',
           'text-valign': 'center',
           'height': 'data(height)',
           'width': 'data(width)',
           'color': 'data(textColor)',
-          'line-height': '0.7rem',
+          'line-height': '1',
           'font-size':
           function(node) {
             return node.data('type') === 'activity' ? 16 : 14;
@@ -226,7 +234,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離
           'width':'data(lineWidth)',
           'line-style':'data(style)',
-          "text-margin-y": "15rem",
+          "text-margin-y": "0.9rem",
           //"text-rotation": "autorotate",
         }
       },{
@@ -252,7 +260,22 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   // 讓節點不要左右重疊的演算法
   cy.layout({
     name: 'spread',
-    minDist: 40, // 設置最小節點間距
+    minDist: 60, // 設置最小節點間距
+  }).run();
+
+  cy.layout({
+    name: 'fcose',
+    randomize: false,
+    padding: 60,
+    // nodeRepulsion: 100000,
+    idealEdgeLength: 300,
+    // edgeElasticity: 0.7,
+    // gravity: 5,
+    nestingFactor: 5,
+    gravityCompound: 20,
+    // gravityRangeCompound: 30,
+    // nodeDimensionsIncludeLabels: true,
+    fit: true,
   }).run();
 
   // 按下線條，線條及線條上數字有光暈效果

src/views/Discover/Map/Map.vue

@@ -350,7 +350,7 @@ export default {
                   type:node.type,
                   label:node.label,
                   height: 60,
-                  width: 242,
+                  width: 226,
                   textColor: '#0F172A',
                   backgroundColor:'rgba(0, 0, 0, 0)',
                   borderradius: 999,