diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index a3f93b9..20ec636 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -18,7 +18,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona }; // 註冊布局演算法 -cytoscape.use( dagre ); +cytoscape.use(dagre); cytoscape.use(spread); /** @@ -221,7 +221,18 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu "text-margin-y": "15rem", //"text-rotation": "autorotate", } - }, + },{ + selector: '.highlight-edge', + css: { + 'color': '#0099FF', + 'line-color': '#0099FF', + 'shadow-blur': 12, + 'shadow-color': '#0099FF', + 'shadow-offset-x': 0, + 'shadow-offset-y': 4, + 'z-index': 9999, + } + } ], }); @@ -231,6 +242,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu minDist: 40, // 設置最小節點間距 }).run(); + // 按下線條,線條及線條上數字有光暈效果 + cy.on('tap', 'edge', function(event) { + cy.edges().removeClass('highlight-edge'); + event.target.addClass('highlight-edge'); + }); + // creat tippy.js let tip; cy.on('mouseover', 'node', function(event) {