imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine nodes

Browse Source
This commit is contained in:
Cindy Chang
2024-08-21 15:33:55 +08:00
parent 85b8536f3a
commit 23a21f1b0a
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/module/cytoscapeMap.js
View File

@@ -122,7 +122,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
// 使用 data() 是因為在 cytoscape 中從陣列轉為 function // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`; text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`;
// 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activeity 才裝入文字。 // 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activity 才裝入文字。
// 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字 // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字
// Relative 要轉為百分比 % // Relative 要轉為百分比 %
if(node.data('type') === 'activity') { if(node.data('type') === 'activity') {
@@ -169,15 +169,16 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
'text-margin-x': function(node) { 'text-margin-x': function(node) {
return node.data('type') === 'activity' ? -5 : 0; return node.data('type') === 'activity' ? -5 : 0;
}, },
// 'text-justification': 'left',
'text-halign': 'center', 'text-halign': 'center',
'text-valign': 'center', 'text-valign': 'center',
'height': 'data(height)', 'height': 'data(height)',
'width': 'data(width)', 'width': 'data(width)',
'color': '#001933', 'color': 'data(textColor)',
'line-height': '0.7rem', 'line-height': '0.7rem',
'font-size': 'font-size':
function(node) { function(node) {
return node.data('type') === 'activity' ? 14 : 22; return node.data('type') === 'activity' ? 16 : 14;
}, },
}, },
}, },

10
src/views/Discover/Map/Map.vue
View File

@@ -331,10 +331,11 @@ export default {
id:node.id, id:node.id,
type:node.type, type:node.type,
label:node.event_type, label:node.event_type,
height:60, height: 48,
width:60, width: 48,
backgroundColor:'#FFCCCC', backgroundColor:'#FFFFFF',
bordercolor:'#003366', bordercolor:'#0F172A',
textColor: '#FF3366',
shape:"ellipse", shape:"ellipse",
freq:logFreq, freq:logFreq,
duration:logDuration, duration:logDuration,
@@ -350,6 +351,7 @@ export default {
label:node.label, label:node.label,
height: 48, height: 48,
width: 216, width: 216,
textColor: '#0F172A',
backgroundColor:'rgba(0, 0, 0, 0)', backgroundColor:'rgba(0, 0, 0, 0)',
borderradius: 999, borderradius: 999,
shape:"round-rectangle", shape:"round-rectangle",