|
|
|
@ -61,8 +61,9 @@ export default { |
|
|
|
|
featureAddRemCount: [], |
|
|
|
|
mode: 0, // this should be 0 |
|
|
|
|
KeepIDs: [], |
|
|
|
|
KeepIDTransform: '', |
|
|
|
|
keepNumberOfCompareNodes: 0 |
|
|
|
|
KeepIDTransform: [], |
|
|
|
|
keepNumberOfCompareNodes: 0, |
|
|
|
|
activeLeafNode: -1 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
@ -96,13 +97,14 @@ export default { |
|
|
|
|
setLayerExplore() { |
|
|
|
|
this.mode = 0 |
|
|
|
|
this.KeepIDs = [] |
|
|
|
|
this.KeepIDTransform = [] |
|
|
|
|
this.keepNumberOfCompareNodes = 0 |
|
|
|
|
//this.graphVizualization() |
|
|
|
|
EventBus.$emit('storeGeneration') |
|
|
|
|
}, |
|
|
|
|
setLayerCompare() { |
|
|
|
|
this.mode = 1 |
|
|
|
|
this.KeepIDTransform = '' |
|
|
|
|
this.KeepIDTransform = [] |
|
|
|
|
EventBus.$emit('brushLink', -1) |
|
|
|
|
this.graphVizualization() |
|
|
|
|
}, |
|
|
|
@ -732,11 +734,13 @@ export default { |
|
|
|
|
this.VIFRemaining = [...VIFRemainingLoc] |
|
|
|
|
this.MIRemaining = [...MIRemainingLoc] |
|
|
|
|
|
|
|
|
|
var activeNodeLoc = this.activeLeafNode |
|
|
|
|
|
|
|
|
|
var nodes = [] |
|
|
|
|
var groupID = 0 |
|
|
|
|
listofNodes.forEach( function(element) { |
|
|
|
|
groupID++ |
|
|
|
|
nodes.push({"name": element, "group": groupID+"_root", "active": true}) |
|
|
|
|
nodes.push({"name": element, "group": groupID+"_root"}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
var links = [] |
|
|
|
@ -753,39 +757,53 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
groupID = 0 |
|
|
|
|
var featureNumber = 0 |
|
|
|
|
listofNodes.forEach( function(element) { |
|
|
|
|
groupID++ |
|
|
|
|
nodes.push( |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+0], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+1], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+2], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+3], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+4], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+5], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+6], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+7], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+8], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+9], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+10], "group": groupID, "active": false}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+11], "group": groupID, "active": false}, |
|
|
|
|
) |
|
|
|
|
featureNumber++ |
|
|
|
|
}) |
|
|
|
|
if (activeNodeLoc != -1) { |
|
|
|
|
|
|
|
|
|
groupID = 0 |
|
|
|
|
var featureNumber = 0 |
|
|
|
|
listofNodes.forEach( function(element) { |
|
|
|
|
groupID++ |
|
|
|
|
if ((activeNodeLoc+1) == groupID) { |
|
|
|
|
nodes.push( |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+0], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+1], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+2], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+3], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+4], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+5], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+6], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+7], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+8], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+9], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+10], "group": groupID}, |
|
|
|
|
{"name": featureNames[(featureNumber)*numberOfTransformations+11], "group": groupID}, |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
featureNumber++ |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
Object.entries(pushEachFinal).forEach( |
|
|
|
|
function ([index, feature]) { |
|
|
|
|
feature.value.forEach(function (element, indexIns) { |
|
|
|
|
if (element.valueIns > 0) { |
|
|
|
|
links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) |
|
|
|
|
} else if (element.valueIns == 0) { |
|
|
|
|
links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) |
|
|
|
|
} else { |
|
|
|
|
links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) |
|
|
|
|
Object.entries(pushEachFinal).forEach( |
|
|
|
|
function ([index, feature]) { |
|
|
|
|
if (index == activeNodeLoc) { |
|
|
|
|
feature.value.forEach(function (element, indexIns) { |
|
|
|
|
// if (element.valueIns > 0) { |
|
|
|
|
// links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) |
|
|
|
|
// } else if (element.valueIns == 0) { |
|
|
|
|
// links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) |
|
|
|
|
// } else { |
|
|
|
|
// links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) |
|
|
|
|
// } |
|
|
|
|
if (element.valueIns > 0) { |
|
|
|
|
links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) |
|
|
|
|
} else if (element.valueIns == 0) { |
|
|
|
|
links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) |
|
|
|
|
} else { |
|
|
|
|
links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.jsonData = {"nodes": nodes, "links": links}; |
|
|
|
|
this.graphVizualization() |
|
|
|
@ -793,6 +811,11 @@ export default { |
|
|
|
|
}, |
|
|
|
|
graphVizualization () { |
|
|
|
|
|
|
|
|
|
var svg = d3.select("#FeatureGraph"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
var svg = d3.select('#chartID') |
|
|
|
|
svg.selectAll("*").remove() |
|
|
|
|
|
|
|
|
|
var legendCall = this.legendOnlyOnce |
|
|
|
|
|
|
|
|
|
var listofNodes = this.dataFS[34] |
|
|
|
@ -891,11 +914,6 @@ export default { |
|
|
|
|
.domain(d3.ticks([MIMin, MIMax, 5])) |
|
|
|
|
.range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); |
|
|
|
|
|
|
|
|
|
var svg = d3.select("#FeatureGraph"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
var svg = d3.select('#chartID') |
|
|
|
|
svg.selectAll("*").remove() |
|
|
|
|
|
|
|
|
|
var marginNodes = {top: 0, right: 0, bottom: 0, left: 0}; |
|
|
|
|
var width = 819 - marginNodes.right - marginNodes.left; |
|
|
|
|
var height = 819 - marginNodes.top - marginNodes.bottom; |
|
|
|
@ -942,91 +960,103 @@ export default { |
|
|
|
|
clearSendNode.push(clickedNode-1) |
|
|
|
|
EventBus.$emit('updateHistoryKey', 2) |
|
|
|
|
EventBus.$emit('updateValuesofHistory', clickedNode-1) |
|
|
|
|
EventBus.$emit('UpdateIDTrans', clickedNode+"_root") |
|
|
|
|
EventBus.$emit('UpdateIDTrans', [clickedNode-1]) |
|
|
|
|
EventBus.$emit('transformNodes', clearSendNode) |
|
|
|
|
} else { |
|
|
|
|
for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
numb = parseInt(numb.join("")) |
|
|
|
|
|
|
|
|
|
var items = document.getElementsByClassName(numb) |
|
|
|
|
|
|
|
|
|
items.forEach( function (it) { |
|
|
|
|
it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
var str = String(graph.nodes[i].group) |
|
|
|
|
if (!str.includes("root")) { |
|
|
|
|
graph.nodes[i].active = false |
|
|
|
|
} else { |
|
|
|
|
document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3" |
|
|
|
|
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#707070" |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
var labels = node.append("text") |
|
|
|
|
.text(function(d) { |
|
|
|
|
return d.name; |
|
|
|
|
}) |
|
|
|
|
.attr('x', 39) |
|
|
|
|
.attr('y', function(d) { |
|
|
|
|
if(d.active) |
|
|
|
|
return 8 |
|
|
|
|
else |
|
|
|
|
return 35 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
// var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
// numb = parseInt(numb.join("")) |
|
|
|
|
|
|
|
|
|
// var items = document.getElementsByClassName(numb) |
|
|
|
|
|
|
|
|
|
// items.forEach( function (it) { |
|
|
|
|
// it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
// it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
// it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
// it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
// var str = String(graph.nodes[i].group) |
|
|
|
|
// // if (!str.includes("root")) { |
|
|
|
|
// // graph.nodes[i].active = false |
|
|
|
|
// // } else { |
|
|
|
|
// document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3" |
|
|
|
|
// document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#969696" |
|
|
|
|
// //} |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
// var labels = node.append("text") |
|
|
|
|
// .text(function(d) { |
|
|
|
|
// return d.name; |
|
|
|
|
// }) |
|
|
|
|
// .attr('x', function(d) { |
|
|
|
|
// let characters = d.name.length |
|
|
|
|
// return 41-Math.pow(characters,1.5) |
|
|
|
|
// }) |
|
|
|
|
// .attr('y', function(d) { |
|
|
|
|
// if(d.active) |
|
|
|
|
// return 6 |
|
|
|
|
// else |
|
|
|
|
// return 32 |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
// node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
|
|
|
|
|
// var items = document.getElementsByClassName(groupLoc) |
|
|
|
|
// items.forEach( function (it) { |
|
|
|
|
// if (it.childNodes[0].style.visibility == "hidden") { |
|
|
|
|
// it.childNodes[0].style.visibility = "visible"; |
|
|
|
|
// it.childNodes[1].setAttribute("transform", "translate(50,50) scale(1) rotate(180)"); |
|
|
|
|
// it.childNodes[1].childNodes[0].style.fill = "none"; |
|
|
|
|
// it.childNodes[2].style.visibility = "visible"; |
|
|
|
|
// } else { |
|
|
|
|
// it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
// it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
// it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
// it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
// var regex = /\d+/g |
|
|
|
|
// var string = id.group |
|
|
|
|
// var matches = parseInt(string.match(regex)[0]) |
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
|
|
|
|
|
// if (graph.nodes[i].group == matches) { |
|
|
|
|
// graph.nodes[i].active = true |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
// var labels = node.append("text") |
|
|
|
|
// .text(function(d) { |
|
|
|
|
// return d.name; |
|
|
|
|
// }) |
|
|
|
|
// .attr('x', function(d) { |
|
|
|
|
// let characters = d.name.length |
|
|
|
|
// return 41-Math.pow(characters,1.5) |
|
|
|
|
// }) |
|
|
|
|
// .attr('y', function(d) { |
|
|
|
|
// if(d.active) |
|
|
|
|
// return 6 |
|
|
|
|
// else |
|
|
|
|
// return 32 |
|
|
|
|
// }); |
|
|
|
|
var groupLoc = index + 1 |
|
|
|
|
var items = document.getElementsByClassName(groupLoc) |
|
|
|
|
items.forEach( function (it) { |
|
|
|
|
if (it.childNodes[0].style.visibility == "hidden") { |
|
|
|
|
it.childNodes[0].style.visibility = "visible"; |
|
|
|
|
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(1) rotate(180)"); |
|
|
|
|
it.childNodes[1].childNodes[0].style.fill = "none"; |
|
|
|
|
it.childNodes[2].style.visibility = "visible"; |
|
|
|
|
} else { |
|
|
|
|
it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
var regex = /\d+/g |
|
|
|
|
var string = id.group |
|
|
|
|
var matches = parseInt(string.match(regex)[0]) |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
|
|
|
|
|
if (graph.nodes[i].group == matches) { |
|
|
|
|
graph.nodes[i].active = true |
|
|
|
|
} |
|
|
|
|
let length = document.getElementsByClassName(groupLoc).length |
|
|
|
|
// node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
if (length > 0) { |
|
|
|
|
EventBus.$emit('UpdateIDTrans', []) |
|
|
|
|
EventBus.$emit('brushLink', -1) |
|
|
|
|
} else { |
|
|
|
|
EventBus.$emit('UpdateIDTrans', [groupLoc-1]) |
|
|
|
|
EventBus.$emit('brushLink', groupLoc-1) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
var labels = node.append("text") |
|
|
|
|
.text(function(d) { |
|
|
|
|
return d.name; |
|
|
|
|
}) |
|
|
|
|
.attr('x', 39) |
|
|
|
|
.attr('y', function(d) { |
|
|
|
|
if(d.active) |
|
|
|
|
return 8 |
|
|
|
|
else |
|
|
|
|
return 35 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
EventBus.$emit('brushLink', groupLoc-1) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1] |
|
|
|
@ -1035,7 +1065,7 @@ export default { |
|
|
|
|
if (groupsColor.getAttribute('fill') == "#D3D3D3") { |
|
|
|
|
if (selectionCounter < 3) { |
|
|
|
|
// add here the different states of comparison! (=2 and =3) |
|
|
|
|
groupsColor.setAttribute('fill', '#707070') |
|
|
|
|
groupsColor.setAttribute('fill', '#969696') |
|
|
|
|
selectionCounter = selectionCounter + 1 |
|
|
|
|
EventBus.$emit('Counter', selectionCounter) |
|
|
|
|
IDsGather.push(idLocal); |
|
|
|
@ -1060,7 +1090,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
EventBus.$emit('UpdateIDs', IDsGather) |
|
|
|
|
if (selectionCounter == 1) { |
|
|
|
|
//EventBus.$emit('storeGeneration') |
|
|
|
|
EventBus.$emit('Default') |
|
|
|
|
} else if (selectionCounter == 2) { |
|
|
|
|
EventBus.$emit('UpdateIDs', IDsGather) |
|
|
|
|
EventBus.$emit('CompareTwo', IDsGather) |
|
|
|
@ -1069,50 +1099,52 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on("dblclick", function(id, index) { |
|
|
|
|
for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
numb = parseInt(numb.join("")) |
|
|
|
|
var items = document.getElementsByClassName(numb) |
|
|
|
|
items.forEach( function (it) { |
|
|
|
|
it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
var regex = /\d+/g |
|
|
|
|
var string = id.group |
|
|
|
|
var matches = parseInt(string.match(regex)[0]) |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
|
|
|
|
|
if (graph.nodes[i].group == matches) { |
|
|
|
|
graph.nodes[i].active = false |
|
|
|
|
} else { |
|
|
|
|
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3" |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
var labels = node.append("text") |
|
|
|
|
.text(function(d) { |
|
|
|
|
return d.name; |
|
|
|
|
}) |
|
|
|
|
.attr('x', 39) |
|
|
|
|
.attr('y', function(d) { |
|
|
|
|
if(d.active) |
|
|
|
|
return 8 |
|
|
|
|
else |
|
|
|
|
return 35 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
EventBus.$emit('brushLink', -1) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// .on("dblclick", function(id, index) { |
|
|
|
|
// for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
// var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
// numb = parseInt(numb.join("")) |
|
|
|
|
// var items = document.getElementsByClassName(numb) |
|
|
|
|
// items.forEach( function (it) { |
|
|
|
|
// it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
// it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
// it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
// it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
// var regex = /\d+/g |
|
|
|
|
// var string = id.group |
|
|
|
|
// var matches = parseInt(string.match(regex)[0]) |
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < graph.nodes.length; i++) { |
|
|
|
|
|
|
|
|
|
// if (graph.nodes[i].group == matches) { |
|
|
|
|
// graph.nodes[i].active = false |
|
|
|
|
// } else { |
|
|
|
|
// document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3" |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// node.selectAll('text').remove(); |
|
|
|
|
|
|
|
|
|
// var labels = node.append("text") |
|
|
|
|
// .text(function(d) { |
|
|
|
|
// return d.name; |
|
|
|
|
// }) |
|
|
|
|
// .attr('x', function(d) { |
|
|
|
|
// let characters = d.name.length |
|
|
|
|
// return 41-Math.pow(characters,1.5) |
|
|
|
|
// }) |
|
|
|
|
// .attr('y', function(d) { |
|
|
|
|
// if(d.active) |
|
|
|
|
// return 6 |
|
|
|
|
// else |
|
|
|
|
// return 32 |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
// node.append('title').text(function (d) { return d.name; }); |
|
|
|
|
// EventBus.$emit('brushLink', -1) |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
var chartWidth = 310; |
|
|
|
|
var chartHeight = 66; |
|
|
|
@ -1127,7 +1159,7 @@ export default { |
|
|
|
|
chartHeight = chartHeight - margin.top - margin.bottom; |
|
|
|
|
|
|
|
|
|
var x = d3.scaleLinear() |
|
|
|
|
.domain([75, 100]) |
|
|
|
|
.domain([0, 100]) |
|
|
|
|
.range([0, chartWidth]); |
|
|
|
|
|
|
|
|
|
chartSvg.append('g') |
|
|
|
@ -1142,7 +1174,8 @@ export default { |
|
|
|
|
.text("Weighted graph readability (%)"); |
|
|
|
|
|
|
|
|
|
var readabilityCircles = chartSvg.append('g').selectAll('circle'); |
|
|
|
|
// 32 parameter combinations |
|
|
|
|
|
|
|
|
|
// 48 parameter combinations |
|
|
|
|
var paramGroups = [ |
|
|
|
|
{name: 'chargeStrength', values: [-80]}, |
|
|
|
|
{name: 'linkDistance', values: [-80]}, |
|
|
|
@ -1170,31 +1203,32 @@ export default { |
|
|
|
|
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) |
|
|
|
|
.text(function (d) { return d + ' = ' + bestParams[d]; }); |
|
|
|
|
} |
|
|
|
|
// Plot the number line. |
|
|
|
|
readabilityCircles = readabilityCircles |
|
|
|
|
.data(readabilityCircles.data().concat(params)) |
|
|
|
|
.enter().append('circle') |
|
|
|
|
.attr('cx', function (d) { return x(d.graphReadability*100); }) |
|
|
|
|
.attr('cy', 5) |
|
|
|
|
.attr('r', 4) |
|
|
|
|
.on('click', function (d) { |
|
|
|
|
selectedParams = d; |
|
|
|
|
readabilityCircles.classed('selected', false); |
|
|
|
|
d3.select(this).classed('selected', true).raise(); |
|
|
|
|
|
|
|
|
|
bestSoFar |
|
|
|
|
.data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) |
|
|
|
|
.text(function (d) { return d + ' = ' + selectedParams[d]; }); |
|
|
|
|
|
|
|
|
|
drawGraph(); |
|
|
|
|
}) |
|
|
|
|
.merge(readabilityCircles) |
|
|
|
|
.classed('selected', function (d) { return d === selectedParams; }); |
|
|
|
|
|
|
|
|
|
readabilityCircles.filter(function (d) { return d === selectedParams; }) |
|
|
|
|
.raise(); |
|
|
|
|
// Plot the number line. |
|
|
|
|
readabilityCircles = readabilityCircles |
|
|
|
|
.data(readabilityCircles.data().concat(params)) |
|
|
|
|
.enter().append('circle') |
|
|
|
|
.attr('cx', function (d) { return x(d.graphReadability*100); }) |
|
|
|
|
.attr('cy', 5) |
|
|
|
|
.attr('r', 4) |
|
|
|
|
.on('click', function (d) { |
|
|
|
|
selectedParams = d; |
|
|
|
|
readabilityCircles.classed('selected', false); |
|
|
|
|
d3.select(this).classed('selected', true).raise(); |
|
|
|
|
|
|
|
|
|
bestSoFar |
|
|
|
|
.data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) |
|
|
|
|
.text(function (d) { return d + ' = ' + selectedParams[d]; }); |
|
|
|
|
|
|
|
|
|
drawGraph(); |
|
|
|
|
}) |
|
|
|
|
.merge(readabilityCircles) |
|
|
|
|
.classed('selected', function (d) { return d === selectedParams; }); |
|
|
|
|
|
|
|
|
|
readabilityCircles.filter(function (d) { return d === selectedParams; }) |
|
|
|
|
.raise(); |
|
|
|
|
|
|
|
|
|
drawGraph(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var i = 0; |
|
|
|
@ -1242,8 +1276,8 @@ export default { |
|
|
|
|
|
|
|
|
|
var data = [] |
|
|
|
|
var barchartData = [] |
|
|
|
|
if (IDsGather.includes(indexNode)) { |
|
|
|
|
data.push({value: VIFVarFormatted[indexNode], color: '#707070'}) |
|
|
|
|
if (IDsGather.includes(indexNode) || IDsGatherTrans.includes(indexNode)) { |
|
|
|
|
data.push({value: VIFVarFormatted[indexNode], color: '#969696'}) |
|
|
|
|
} else { |
|
|
|
|
data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'}) |
|
|
|
|
} |
|
|
|
@ -1330,6 +1364,7 @@ export default { |
|
|
|
|
var margin = {top: 0, right: 0, bottom: 0, left: 0}, |
|
|
|
|
width = 45 - margin.left - margin.right, |
|
|
|
|
height = 45 - margin.top - margin.bottom; |
|
|
|
|
|
|
|
|
|
g.each(function (d, index) { |
|
|
|
|
var el = d3.select(this); |
|
|
|
|
var path = el.selectAll('path').each(function (r, i) { |
|
|
|
@ -1394,12 +1429,14 @@ export default { |
|
|
|
|
}) |
|
|
|
|
//x position is 3 pixels to the right of the bar |
|
|
|
|
.attr("x", function (d) { |
|
|
|
|
return x(0); |
|
|
|
|
return x(38); |
|
|
|
|
}) |
|
|
|
|
.text(function (d) { |
|
|
|
|
return d.value; |
|
|
|
|
}).style("font-size", "10px") |
|
|
|
|
.style("fill", "white") |
|
|
|
|
.style("fill", function(d) { |
|
|
|
|
return "black" |
|
|
|
|
}) |
|
|
|
|
.attr("visibility", "hidden") |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -1461,59 +1498,59 @@ export default { |
|
|
|
|
.text(function(d) { |
|
|
|
|
return d.name; |
|
|
|
|
}) |
|
|
|
|
.attr('x', 39) |
|
|
|
|
.attr('x', function(d) { |
|
|
|
|
let characters = d.name.length |
|
|
|
|
return 41-Math.pow(characters,1.5) |
|
|
|
|
}) |
|
|
|
|
.attr('y', function(d) { |
|
|
|
|
if(d.active) |
|
|
|
|
return 8 |
|
|
|
|
else |
|
|
|
|
return 35 |
|
|
|
|
return 6 |
|
|
|
|
}); |
|
|
|
|
node.append('title').text(function (d, i) { |
|
|
|
|
return 'Target COR: '+String(corrGlobFormatted[i])+'%'; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//add zoom capabilities |
|
|
|
|
var zoom_handler = d3.zoom() |
|
|
|
|
.on("zoom", zoom_actions); |
|
|
|
|
// var zoom_handler = d3.zoom() |
|
|
|
|
// .on("zoom", zoom_actions); |
|
|
|
|
|
|
|
|
|
zoom_handler(svg); |
|
|
|
|
// zoom_handler(svg); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
numb = parseInt(numb.join("")) |
|
|
|
|
var items = document.getElementsByClassName(numb) |
|
|
|
|
items.forEach( function (it) { |
|
|
|
|
it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// for (let i = 0; i < listofNodes.length; i++) { |
|
|
|
|
// var numb = graph.nodes[i]['group'].match(/\d/g) |
|
|
|
|
// numb = parseInt(numb.join("")) |
|
|
|
|
// var items = document.getElementsByClassName(numb) |
|
|
|
|
// items.forEach( function (it) { |
|
|
|
|
// it.childNodes[0].style.visibility = "hidden"; |
|
|
|
|
// it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); |
|
|
|
|
// it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; |
|
|
|
|
// it.childNodes[2].style.visibility = "hidden"; |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
//Zoom functions |
|
|
|
|
function zoom_actions(){ |
|
|
|
|
svg.attr("transform", d3.event.transform) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function drag_start(d) { |
|
|
|
|
if (!d3.event.active) forceSim.alphaTarget(0.3).restart(); |
|
|
|
|
d.fx = d.x; |
|
|
|
|
d.fy = d.y; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//make sure you can't drag the circle outside the box |
|
|
|
|
function drag_drag(d) { |
|
|
|
|
d.fx = d3.event.x; |
|
|
|
|
d.fy = d3.event.y; |
|
|
|
|
tickActions(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function drag_end(d) { |
|
|
|
|
if (!d3.event.active) forceSim.alphaTarget(0); |
|
|
|
|
d.fx = null; |
|
|
|
|
d.fy = null; |
|
|
|
|
} |
|
|
|
|
// function zoom_actions(){ |
|
|
|
|
// svg.attr("transform", d3.event.transform) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// function drag_start(d) { |
|
|
|
|
// if (!d3.event.active) forceSim.alphaTarget(0.3).restart(); |
|
|
|
|
// d.fx = d.x; |
|
|
|
|
// d.fy = d.y; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// //make sure you can't drag the circle outside the box |
|
|
|
|
// function drag_drag(d) { |
|
|
|
|
// d.fx = d3.event.x; |
|
|
|
|
// d.fy = d3.event.y; |
|
|
|
|
// tickActions(); |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// function drag_end(d) { |
|
|
|
|
// if (!d3.event.active) forceSim.alphaTarget(0); |
|
|
|
|
// d.fx = null; |
|
|
|
|
// d.fy = null; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
if (legendCall) { |
|
|
|
|
|
|
|
|
@ -1764,11 +1801,11 @@ export default { |
|
|
|
|
.text("MI") |
|
|
|
|
} |
|
|
|
|
stepper.stop(); |
|
|
|
|
if (IDsGatherTrans != '') { |
|
|
|
|
let ID = document.getElementsByClassName(IDsGatherTrans)[0].parentElement.getAttribute('id') |
|
|
|
|
d3.select('#'+ID).dispatch('click'); |
|
|
|
|
IDsGatherTrans = '' |
|
|
|
|
} |
|
|
|
|
// if (IDsGatherTrans != '') { |
|
|
|
|
// let ID = document.getElementsByClassName(IDsGatherTrans)[0].parentElement.getAttribute('id') |
|
|
|
|
// d3.select('#'+ID).dispatch('click'); |
|
|
|
|
// IDsGatherTrans = '' |
|
|
|
|
// } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
@ -1783,8 +1820,8 @@ export default { |
|
|
|
|
node |
|
|
|
|
.attr("id", function(d, i) { return "g" + (i); }) |
|
|
|
|
.attr("transform", function(d, i) { |
|
|
|
|
d.x = d.x - 50 |
|
|
|
|
d.y = d.y - 50 |
|
|
|
|
d.x = d.x - 52 |
|
|
|
|
d.y = d.y - 45 |
|
|
|
|
return "translate(" + d.x + "," + d.y + ")"; |
|
|
|
|
}) |
|
|
|
|
}; |
|
|
|
@ -1868,6 +1905,8 @@ export default { |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
EventBus.$on('brushLink', data => { this.activeLeafNode = data }) |
|
|
|
|
EventBus.$on('brushLink', this.initializeNetwork) |
|
|
|
|
|
|
|
|
|
EventBus.$on('Counter', data => { this.keepNumberOfCompareNodes = data }) |
|
|
|
|
EventBus.$on('UpdateIDs', data => { this.KeepIDs = data }) |
|
|
|
|