self-loop control-point-step-size

src/module/cytoscapeMap.js

@@ -77,7 +77,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
             let text = '';
             const STRING_LIMIT = 8;
             if (node.data('label').length > STRING_LIMIT) {
-              // 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
+             // 若文字超過 STRING_LIMIT長度，則字尾巴要加「...」，style 要換兩行(\n 換行符號)
              // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
               text = `${node.data('label').substr(0, STRING_LIMIT)}...\n\n`;
             } else { // 補空白直到撐寬label的寬度，這是為了統一所有label的寬度
@@ -213,6 +213,13 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'overlay-opacity': 0.01,
           'overlay-padding': '5px',
         },
+      },{
+        selector: 'edge[source = target]', // 選擇 self-loop 的邊
+        style: {
+          'loop-direction': '0deg',  // 控制 loop 的方向
+          'loop-sweep': '-90deg',   // 控制 loop 的弧度，這裡可以調整弧度以改變大小
+          'control-point-step-size': 70 // 控制 loop 的半徑大小，增加這個值可以增大 loop
+        }
       },
     ],
   });