ISOVIS
/
FeatureEnVi
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 530d38e7fd
commit b936d51c7f
4 changed files with 375 additions and 104 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 183
      frontend/src/components/DataSpace.vue
  2. 207
      frontend/src/components/FeatureSpaceDetail.vue
  3. 83
      frontend/src/components/FeatureSpaceOverview.vue
  4. 6
      frontend/src/components/Heatmap.vue

183
frontend/src/components/DataSpace.vue
Unescape View File

@ -2,6 +2,7 @@
<div id="AllClass">
<div id="BeeSwarm"></div>
<div id="Sliders"></div>
<div id="TextLabels"></div>
<div id="NoAction" style="width: 2525px !important; height: 225px !important;"></div>
</div>
</template>
@ -19,7 +20,8 @@ export default {
PositiveValue: 75,
NegativeValue: 25,
storeColor: [],
status: true
status: true,
rootIDSelected: 1,
}
},
methods: {
@ -155,7 +157,7 @@ export default {
.data(data)
beeswarm()
nodes.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) { return xScale(d.x) })
@ -163,7 +165,7 @@ export default {
.attr("r", dr)
.attr("fill", colorX)
.style("stroke", "black")
.style("stroke-width", 4)
.style("stroke-width", 1)
.on("mouseover", function(d) {
tooltip.select(".system").html(d.system)
return tooltip.select(".label").html(d.label)
@ -305,30 +307,6 @@ export default {
.attr(lineAttributes)
.call(drag);
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
function dragstarted() {
if (d3.select(this)[0][0].id == 2) {
d3.select(this).classed(activeClassName, false);
@ -402,6 +380,153 @@ export default {
d3.select(this).classed(activeClassName, false);
}
},
updateSliders () {
var svg = d3.select("#TextLabels");
svg.selectAll("*").remove();
var width = 2525
var height = 225
var svgLines = d3.select('#TextLabels').append('svg');
svgLines.attr('width', width);
svgLines.attr('height', height);
if (this.rootIDSelected == 1) {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best")
.style("font-weight", "bold");
} else if (this.rootIDSelected == 2) {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best")
.style("font-weight", "bold");
} else if (this.rootIDSelected == 3) {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
} else if (this.rootIDSelected == 4) {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
} else {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
}
},
reset () {
var svg = d3.select("#BeeSwarm");
svg.selectAll("*").remove();
@ -411,6 +536,9 @@ export default {
},
},
mounted () {
EventBus.$on('keepRootFun', data => { this.rootIDSelected = data })
EventBus.$on('dataSpace', this.updateSliders)
EventBus.$on('ConfirmDataSet', data => {this.status = false})
EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data})
@ -438,6 +566,7 @@ text {
#BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1}
#Sliders { position: absolute; top: 0; left: 0; z-index: 2}
#NoAction { position: absolute; top: 0; left: 0; z-index: -1}
#TextLabels {position: absolute; top: 0; left: 0; z-index: 3}
.active-d3-item {
cursor: pointer;

207
frontend/src/components/FeatureSpaceDetail.vue
Unescape View File

@ -1,27 +1,29 @@
<template>
<div class="column">
<svg id="chartID" class="chart"></svg>
<div id="FeatureGraph" style="border-style: solid; border-width: 3px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div>
<div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px">
<svg id="chartID" class="chart" style="min-height: 66px !important; max-height: 66px !important; min-width:318px !important;"></svg>
<div id="FeatureGraph" style="border-style: solid; border-width: 3px; border-color: black; min-height: 819px; max-height: 819px; min-width: 819px !important; max-width: 819px !important"></div>
<div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px; max-width: 819px !important">
<div class="panel panel-default" data-placement="center">
<div class="panel-body" id="resetAllFilters" data-placement="center" style="margin-top: -20px">
<table class="table table-borderless centerTable" >
<tbody>
<tr>
<div style="border: 1px solid black; height:70px; margin-top:19px">
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-top: 3px; margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-top: 3px; margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td>
<div style="border: 1px solid black; height:68px; margin-top:19px">
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-top: 3px; margin-left: 0px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Feature Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-top: 3px; margin-left: -15px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Feature Generation</button></td>
</div>
<td>
<div id="buildLegend" style="min-width: 160px;">
<div id="legend" style="margin-top: 2px; "></div>
<div id="legendText" style="border: 1px solid black; min-height: 70px; max-height: 70px; min-width:181px; margin-top: 16px; margin-left:-12px;"></div>
<div id="glyphLegend">
<div id="buildLegend">
<div id="legend" style="margin-top: 2px; margin-left: -6px"></div>
<div id="legendText" title="MI: Mutual Information (range: light blue to dark blue); COR: Correlation (range: 0%-100%); VIF: Variance Influence Factor (range: ... < 2.5 < 5 < 10 < ...)" style="border: 1px solid black; min-height: 68px; max-height: 68px; min-width:170px; margin-top: 17px; margin-left: -12px"></div>
</div>
</div>
</td>
<td>
<div class="row align-items-center " style="height: 70px; margin-top:7px; border: 1px solid black">
<div class="col-lg-4"><p>Fs COR (>)</p></div>
<div class="col-lg-7"><div id="thres"></div></div>
<div id="floatingPanel" class="row align-items-center " style="height: 66px; margin-top:11px; border: 1px solid black; max-width: 260px">
<div class="col-lg-4" style="margin-top:3px; margin-left: -5px"><p>Fs COR (>)</p></div>
<div class="col-lg-7" style="margin-top:1px; margin-left: -15px"><div id="thres"></div></div>
</div>
</td>
</tr>
@ -83,10 +85,10 @@ export default {
var gStepPos = d3
.select('div#thres')
.append('svg')
.attr('width', 200)
.attr('width', 176)
.attr('height', 80)
.append('g')
.attr('transform', 'translate(18,20)');
.attr('transform', 'translate(15,15)');
gStepPos.call(sliderStepPos);
@ -555,6 +557,7 @@ export default {
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) {
@ -570,7 +573,8 @@ export default {
if (!str.includes("root")) {
graph.nodes[i].active = false
} else {
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "black"
document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3"
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#707070"
}
}
@ -640,7 +644,7 @@ export default {
if (groupsColor.getAttribute('fill') == "#D3D3D3") {
if (selectionCounter < 3) {
// add here the different states of comparison! (=2 and =3)
groupsColor.setAttribute('fill', '#black')
groupsColor.setAttribute('fill', '#707070')
selectionCounter = selectionCounter + 1
EventBus.$emit('Counter', selectionCounter)
IDsGather.push(idLocal);
@ -720,8 +724,8 @@ export default {
var chartWidth = 310;
var chartHeight = 65;
var margin = {left: 8, right: 15, top: 10, bottom: 40};
var chartHeight = 66;
var margin = {left: 16, right: 15, top: 5, bottom: 45};
var chartSvg = d3.select('svg.chart')
.attr('width', chartWidth)
.attr('height', chartHeight)
@ -831,6 +835,7 @@ export default {
dispatch.call('layoutend', forceSim, p, i);
++i;
if (i >= paramList.length) {
var widthLoc = 100;
@ -847,7 +852,7 @@ export default {
var data = []
var barchartData = []
if (IDsGather.includes(indexNode)) {
data.push({value: VIFVarFormatted[indexNode], color: 'black'})
data.push({value: VIFVarFormatted[indexNode], color: '#707070'})
} else {
data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'})
}
@ -930,7 +935,7 @@ export default {
insideRadius = 1
return 'none'
}
});
})
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 45 - margin.left - margin.right,
height = 45 - margin.top - margin.bottom;
@ -938,7 +943,7 @@ export default {
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
if (i === 1) {
gText.append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
@ -970,21 +975,41 @@ export default {
.attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color})
.attr('opacity', "0.5")
.on("mouseover", function(d) {
document.getElementsByClassName("bar"+d.class).forEach (function (element) {
element.setAttribute("fill", "yellow")
element.setAttribute("opacity", "1.0")
})
document.getElementsByClassName("label"+d.class).forEach (function (element) {
element.setAttribute("visibility", "visible")
})
d3.select(this)
.attr("fill", "yellow");
})
.on("mouseout", function(d, i) {
var colorPrevious = d.color
document.getElementsByClassName("bar"+d.class).forEach (function (element) {
element.setAttribute("fill", colorPrevious)
element.setAttribute("opacity", "0.5")
})
document.getElementsByClassName("label"+d.class).forEach (function (element) {
element.setAttribute("visibility", "hidden")
})
});
gText.selectAll("myRect")
.data(barchartData)
.enter().append("text")
.attr("class", function(d){ return "label"+d.class})
//y position of the label is halfway down the bar
.attr("y", function (d) {
return y(d.class)+ 11;
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d) {
return x(0);
})
.text(function (d) {
return d.value;
}).style("font-size", "10px")
.style("fill", "white")
.attr("visibility", "hidden")
}
// if (i == 0) {
@ -1031,28 +1056,30 @@ export default {
});
})
// var drag_handler = d3.drag()
// .on("start", drag_start)
// .on("drag", drag_drag)
// .on("end", drag_end);
// drag_handler(node);
// var drag_handler = d3.drag()
// .on("start", drag_start)
// .on("drag", drag_drag)
// .on("end", drag_end);
// drag_handler(node);
})
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
.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, i) {
return 'Target COR: '+String(corrGlobFormatted[i])+'%';
});
node.append('title').text(function (d) { return d.name; });
//add zoom capabilities
var zoom_handler = d3.zoom()
@ -1224,6 +1251,7 @@ export default {
.attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color})
.attr("opacity", "0.5")
}
})
});
@ -1231,17 +1259,73 @@ export default {
var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90)
var marginBorder = 16
var marginBorderX = 10
textLine.append('line')
var marginBorderX = 5
const markerBoxWidth = 2;
const markerBoxHeight = 2;
const refX = markerBoxWidth / 2;
const refY = markerBoxHeight / 2;
const arrowPoints = [[0, 0], [0, 2], [2, 1]];
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle2")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle3")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle4")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto-start-reverse")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "#6baed6");
//line
textLine.append("line")
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 36 + marginBorderX)
.attr("y1", 50 - marginBorder)
.attr("x2", 74 + marginBorderX)
.attr("y2", 50 - marginBorder)
.attr("marker-end", "url(#triangle)");
textLine.append("text")
.attr("dx", 75 + marginBorderX)
.attr("dx", 77 + marginBorderX)
.attr("dy", 55 - marginBorder)
.text("VIF")
@ -1252,9 +1336,10 @@ export default {
.attr("y1", 31 - marginBorder)
.attr("x2", 53 + marginBorderX)
.attr("y2", 31 - marginBorder)
.attr("marker-end", "url(#triangle2)");
textLine.append("text")
.attr("dx", 54 + marginBorderX)
.attr("dx", 56 + marginBorderX)
.attr("dy", 36 - marginBorder)
.text("Per class COR")
@ -1265,9 +1350,10 @@ export default {
.attr("y1", 67 - marginBorder)
.attr("x2", 74 + marginBorderX)
.attr("y2", 67 - marginBorder)
.attr("marker-end", "url(#triangle3)");
textLine.append("text")
.attr("dx", 75 + marginBorderX)
.attr("dx", 77 + marginBorderX)
.attr("dy", 72 - marginBorder)
.text("Target COR")
@ -1278,9 +1364,10 @@ export default {
.attr("y1", 50 - marginBorder)
.attr("x2", 26 + marginBorderX)
.attr("y2", 50 - marginBorder)
.attr("marker-start", "url(#triangle4)");
textLine.append("text")
.attr("dx", 0 + marginBorderX)
.attr("dx", -2 + marginBorderX)
.attr("dy", 55 - marginBorder)
.style("fill", "#6baed6")
.text("MI")
@ -1438,6 +1525,16 @@ export default {
#legend { position: absolute; top: 0; left: 0; z-index: 1}
#legendText { position: absolute; top: 0; left: 0; z-index: 2}
#floatingPanel {
position: absolute;
transform: translate(-1071px, -33px);
}
#glyphLegend {
position: absolute;
transform: translate(210px, 6px) !important;
}
#legend {
transform: translateY(-47px) scale(0.8) !important
}
@ -1463,7 +1560,6 @@ svg {
float: left;
}
.table {
padding: 0 !important;
margin: 0 !important;
@ -1495,7 +1591,8 @@ table td {
#chartID {
position: absolute;
transform: translate(-354px, 840px);
transform: translate(-351px, 845px);
border: 1px solid black !important;
}
.chart circle {

83
frontend/src/components/FeatureSpaceOverview.vue
Unescape View File

@ -16,13 +16,13 @@
<div class="button" data-key="34" title="Rotate CW" style="font-size:0.9em">&#8635;</div>
</div>
</div>
<div class="tool">
<!--<div class="tool">
<div class="tlabel">Select</div>
<div class="tbuttons">
<div class="button" data-key="-38" title="Select Previous" style="font-size:0.9em">&#8613;</div>
<div class="button" data-key="-40" title="Select Next" style="font-size:0.9em">&#8615;</div>
</div>
</div>
</div>-->
<div class="tool">
<div class="tlabel">View</div>
<div class="tbuttons">
@ -38,13 +38,13 @@
<div class="button" data-key="191" title="Toggle Root">/</div>
</div>
</div>
<div class="tool">
<div class="tool" id="moveNavigate">
<div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
<div id="selection" class="tlabel"></div>
</div>
<div class="tool">
<div class="tool" id="moveLabel">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 457px; min-height: 50px; margin-top:-10px"></div>
<div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
</div>
</div>
@ -76,7 +76,7 @@ export default {
colorsReceive: [],
activeLeaf: -1,
overallData: [],
keepRoot: 1
keepRoot: 1,
}
},
methods: {
@ -198,7 +198,7 @@ export default {
var MIN_ZOOM = 0.5; // minimum zoom allowed
var MAX_ZOOM = 10; // maximum zoom allowed
var HAS_CHILDREN_COLOR = 'lightsteelblue';
var SELECTED_COLOR = 'yellow'; // color of selected node
var SELECTED_COLOR = 'black'; // color of selected node
var ZOOM_INC = 0.04; // zoom factor per animation frame
var PAN_INC = 3; // pan per animation frame
var ROT_INC = 0.3; // rotation per animation frame
@ -274,11 +274,26 @@ export default {
selectNode(treeData.children[this.keepRoot]); // current selected node
// Collapse all children of root's children before rendering
// if (root.children) {
// root.children.forEach(function(child) {
// collapseTree(child);
// });
// }
root.children.forEach(function(child) {
child.children.forEach(function(child) {
collapseTree(child)
});
});
root.children.forEach(function(child) {
child.children.forEach(function(child) {
if (child.name == listofNodes[activeLeafLoc]) {
console.log(child)
toggle(child)
}
});
});
// root.children.forEach(function(child) {
// console.log(child)
// expand1Level(child)
// });
update(root, true); // Layout the tree initially and center on the root node
@ -345,10 +360,20 @@ export default {
.style('fill', function(d) {
if (d.name == 'Data') {
return d._children ? 'white' : 'white';
} else if (d.name == 'All') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Best') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Good') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Bad') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Worst') {
return d._children ? 'yellow' : 'yellow';
} else {
if (activeLeafLoc != -1) {
if (d.name == listofNodes[activeLeafLoc]) {
return d._children ? 'black' : 'black'
return d._children ? '#707070' : '#707070'
}
else {
return d._children ? '#D3D3D3' : '#D3D3D3'
@ -361,13 +386,13 @@ export default {
if(d.name == 'Data') {
return d.selected ? SELECTED_COLOR : 'white';
} else {
return d.selected ? SELECTED_COLOR : 'black';
return d.selected ? SELECTED_COLOR : '#D3D3D3';
}
}).attr('stroke-width', function(d) {
if(d.name == 'Data') {
return d.selected ? 0 : 0;
} else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst'){
return d.selected ? 3 : 3;
return d.selected ? 4 : 4;
} else {
return d.selected ? 0 : 0;
}
@ -572,7 +597,7 @@ export default {
d3.event.preventDefault();
var pathelms = document.querySelectorAll('#selection .nodepath');
for (var i = 0; i < pathelms.length; i++) {
pathelms[i].classList.remove('highlight');
//pathelms[i].classList.remove('highlight');
}
var target = d3.event.target;
var node = curPath[+target.dataset.sel];
@ -953,7 +978,8 @@ export default {
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d) { return color(d) });
.style('fill', function (d) { return color(d) })
.style('opacity', "0.5");
legend.append('text')
.attr('class', 'legendLab')
@ -963,7 +989,6 @@ export default {
}
},
mounted () {
EventBus.$on('keepRootFun', data => { this.keepRoot = data })
EventBus.$on('quad', data => { this.overallData = data })
@ -1080,7 +1105,7 @@ svg {
-o-transform: rotate(270deg);
width: 100px;
text-align: center;
margin-top: -10px;
margin-top: -6px;
margin-left: -38px;
}
#help a {
@ -1123,4 +1148,24 @@ svg {
font-size: 14px !important;
}
#moveLabel {
position: absolute;
transform: translate(1369px, -2px);
z-index: 3;
min-height: 68px;
max-height: 68px;
}
#moveNavigate {
position: absolute;
transform: translate(1293px, -2px);
z-index: 3;
min-height: 68px;
max-height: 68px;
}
#selection {
font-weight: bold;
}
</style>

6
frontend/src/components/Heatmap.vue
Unescape View File

@ -368,7 +368,7 @@ export default {
.style("fill", function(d) {
if (d == -1) return "url(#diagonalHatch)"
else if (d == -2) return "yellow"
else if (d == -3) return "black"
else if (d == -3) return "#707070"
else if (d == -4) return "url(#diagonalHatch)"
else return colorScale(d)
})
@ -396,7 +396,7 @@ export default {
EventBus.$emit('addFeature', featuresAddRem)
return 'yellow'
} else if (d == -3) {
return 'black'
return '#707070'
} else if (d == -4) {
// svg.selectAll("rect").each(function(d){
// if (d == -4) {
@ -430,7 +430,7 @@ export default {
}
} else {
if (d == -3) {
return 'black'
return '#707070'
} else {
return colorScale(d)
}

Write Preview
Loading…
Cancel
Save