diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index 2a58fcc..b5490d0 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/index.vue @@ -328,8 +328,7 @@ export default { { selector: 'node', style: { - 'label': // 節點要顯示的文字 - function(node) { + 'label': function(node) { // 節點要顯示的文字 // node.data(this.dataLayerType+"."+this.dataLayerOption) 為原先陣列 node.data.key.value let optionValue = node.data(`${this.dataLayerType}.${this.dataLayerOption}`); let text = ''; @@ -339,6 +338,7 @@ export default { text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`; // 在 element 中 activity 歸類在 default,所以要先判斷 node 是否為 activeity 才裝入文字。 + // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字 // Relative 要轉為百分比 % if(node.data('type') === 'activity') { switch(this.dataLayerType) { @@ -388,36 +388,30 @@ export default { { selector: 'edge', style: { - 'content': function(edge) { - if(edge.data(key+"."+value) == ""){ - return edge.data(key+"."+value) - } - if(key == "duration"){ //Duration - if(value == "rel_duration"){ // % - return (parseFloat(edge.data(key+"."+value))*100).toFixed(2) + "%" - } - else{ //Timelabel - if(parseInt(edge.data(key+"."+value))==edge.data(key+"."+value)){ //Int - return TimeLabel(edge.data(key+"."+value)) - } - else{//Float - return TimeLabel(edge.data(key+"."+value).toFixed(2)) - } - } - } - else{ // Freq - if(parseInt(edge.data(key+"."+value))==edge.data(key+"."+value)){ - if(value == "rel_freq"){ - return edge.data(key+"."+value)*100 + "%" - } - return edge.data(key+"."+value) - } - else{ - if(value == "rel_freq"){ - return (parseFloat(edge.data(key+"."+value))*100).toFixed(2) + "%" - } - return parseFloat(edge.data(key+"."+value)).toFixed(2) - } + 'content': function(edge) { // 關係線顯示的文字 + let optionValue = edge.data(`${this.dataLayerType}.${this.dataLayerOption}`); + + if(optionValue === '') return optionValue; + + switch(this.dataLayerType) { + case 'freq': + let edgeInt = this.dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue; + let edgeFloat = this.dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2); + + // 判斷是否為整數,若非整數要取小數點後面兩個值。 + Math.trunc(optionValue) === optionValue ? edgeRelInt : edgeFloat; + break; + + case 'duration': // Duration 除了 Relative 為百分比 % ,其他要轉變時間單位。 + // Relative % + let edgeDurRel = (optionValue * 100).toFixed(2) + "%"; + // Timelabel + let timeLabelInt = TimeLabel(optionValue); + let timeLabelFloat = TimeLabel(optionValue).toFixed(2); + let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat; + + text = this.dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel; + break; } }, 'curve-style': 'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier