diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index f7f2b2b..0d2194e 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -122,7 +122,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu // 使用 data() 是因為在 cytoscape 中從陣列轉為 function 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(浮點數) 將字串轉為數字 // Relative 要轉為百分比 % if(node.data('type') === 'activity') { @@ -169,15 +169,16 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu 'text-margin-x': function(node) { return node.data('type') === 'activity' ? -5 : 0; }, + // 'text-justification': 'left', 'text-halign': 'center', 'text-valign': 'center', 'height': 'data(height)', 'width': 'data(width)', - 'color': '#001933', + 'color': 'data(textColor)', 'line-height': '0.7rem', 'font-size': function(node) { - return node.data('type') === 'activity' ? 14 : 22; + return node.data('type') === 'activity' ? 16 : 14; }, }, }, diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index 6e0438e..86513a5 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -331,10 +331,11 @@ export default { id:node.id, type:node.type, label:node.event_type, - height:60, - width:60, - backgroundColor:'#FFCCCC', - bordercolor:'#003366', + height: 48, + width: 48, + backgroundColor:'#FFFFFF', + bordercolor:'#0F172A', + textColor: '#FF3366', shape:"ellipse", freq:logFreq, duration:logDuration, @@ -350,6 +351,7 @@ export default { label:node.label, height: 48, width: 216, + textColor: '#0F172A', backgroundColor:'rgba(0, 0, 0, 0)', borderradius: 999, shape:"round-rectangle",