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

Discover: cy edge style done

Browse Source
This commit is contained in:
chiayin
2023-02-25 20:01:51 +08:00
parent c4008db665
commit 7e4d7b1e1f
1 changed files with 26 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/Discover/index.vue
View File

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