WIP: cytoscape edge text can be highlighted

This commit is contained in:
Cindy Chang
2024-08-16 16:05:00 +08:00
parent 3c6644bc63
commit 6fcd7efbfc

View File

@@ -221,7 +221,18 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
"text-margin-y": "15rem", "text-margin-y": "15rem",
//"text-rotation": "autorotate", //"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, // 設置最小節點間距 minDist: 40, // 設置最小節點間距
}).run(); }).run();
// 按下線條,線條及線條上數字有光暈效果
cy.on('tap', 'edge', function(event) {
cy.edges().removeClass('highlight-edge');
event.target.addClass('highlight-edge');
});
// creat tippy.js // creat tippy.js
let tip; let tip;
cy.on('mouseover', 'node', function(event) { cy.on('mouseover', 'node', function(event) {