From cb90c4ce13a08808e7e10345a92e28fcfc39f842 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Thu, 30 Jul 2020 11:59:48 +0200 Subject: [PATCH] new --- frontend/src/components/FeatureSpace2.vue | 233 +++++++++++----------- frontend/src/components/Main.vue | 2 +- 2 files changed, 119 insertions(+), 116 deletions(-) diff --git a/frontend/src/components/FeatureSpace2.vue b/frontend/src/components/FeatureSpace2.vue index 77f6b9d..391fe9a 100644 --- a/frontend/src/components/FeatureSpace2.vue +++ b/frontend/src/components/FeatureSpace2.vue @@ -1,6 +1,7 @@ @@ -81,9 +82,9 @@ export default { for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { if (Object.values(VIFVar)[i] > 10) { - VIFVarFormatted.push(2) + VIFVarFormatted.push(4) } else if (Object.values(VIFVar)[i] > 5) { - VIFVarFormatted.push(1) + VIFVarFormatted.push(2) } else { VIFVarFormatted.push(0) } @@ -115,15 +116,14 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) var colorsScaleNodes = d3.scaleLinear() - .domain(d3.ticks(MIMin, MIMax, 5)) - .range(['#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']); + .domain([MIMin, MIMax]) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); var svg = d3.select("#FeatureGraph2"); svg.selectAll("*").remove(); - var marginSVG = { top: 0, right: 50, bottom: 0, left: 50} var width = 800; - var height = 600; + var height = 500; var numTicks = 200; @@ -133,8 +133,8 @@ export default { var dispatch = d3.dispatch('layoutend'); svg = d3.select("#FeatureGraph2").append("svg") - .attr("width", width + marginSVG.left + marginSVG.right) - .attr("height", height + marginSVG.top + marginSVG.bottom); + .attr("width", width) + .attr("height", height); var graph = this.jsonData @@ -209,117 +209,119 @@ export default { dispatch.call('layoutend', forceSim, p, i); ++i; - if (i >= paramList.length) { + if (i >= paramList.length) { + + var widthLoc = 100; + var arcSize = (6 * widthLoc / 100); + var innerRadius = arcSize * 2; + + var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc) + .attr("id", function(d, i) { return "svg" + (i); }) + graph.nodes.forEach(function(itemVal, indexNode) { + console.log(indexNode) // var data = [[ // {value: 70, label: "", color: '#ff0000', lcolor: ''}, // {value: 33, label: "", color: '#00ff00', lcolor: ''}, // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} // ];] - - var data = [] - for(let k = 0; k < uniqueTarget.length; k++) { - data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) - } - data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])}) - - var length = data.length - var border = VIFVarFormatted[0] - - var widthLoc = 100; - var arcSize = (6 * widthLoc / 100); - var innerRadius = arcSize * 2; - - var svgNodes = node.append('svg').attr('width', widthLoc).attr('height', widthLoc); - - var arcs = data.map(function (obj, i) { - var data = [] - for(let k = 0; k < uniqueTarget.length; k++) { - data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) - } - data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])}) - var length = data.length - var border = VIFVarFormatted[i] - if (i == length - 1) { - return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); - } else { - return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius); - } - }); - - var arcsGrey = data.map(function (obj, i) { - return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius)); - }); - - var pieData = data.map(function (obj, i) { - return [ - {value: obj.value, arc: arcs[i], object: obj}, - {value: (100 - obj.value), arc: arcsGrey[i], object: obj}, - {value: 0, arc: arcs[i], object: obj}]; - }); - - var pie = d3.pie().sort(null).value(function (d) { - return d.value; - }); - - var g = svgNodes.select('g').data(pieData).enter() - .append('g') - .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); - var gText = svgNodes.selectAll('g.textClass').data([{}]).enter() - .append('g') - .classed('textClass', true) - .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); - - - g.selectAll('path').data(function (d) { - return pie(d); - }).enter().append('path') - .attr('id', function (d, i) { - if (i == 1) { - return "Text" + d.data.object.label - } - }) - .attr('d', function (d) { - return d.data.arc(d); - }).attr('fill', function (d, i) { - return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none'; - }); - - svgNodes.selectAll('g').each(function (d, index) { - var el = d3.select(this); - var path = el.selectAll('path').each(function (r, i) { - if (i === 1) { - var centroid = r.data.arc.centroid({ - startAngle: r.startAngle + 0.05, - endAngle: r.startAngle + 0.001 + 0.05 - }); - var lableObj = r.data.object; - g.append('text') - .attr('font-size', ((2 * width) / 100)) - .attr('dominant-baseline', 'central') - .append("textPath") - .attr("textLength", function (d, i) { - return 0; - }) - .attr("startOffset", '5') - .attr("dy", '-3em') - .text(lableObj.value + '%'); - } - if (i === 0) { - var centroidText = r.data.arc.centroid({ - startAngle: r.startAngle, - endAngle: r.startAngle - }); - var lableObj = r.data.object; - gText.append('text') - .attr('font-size', ((2 * width) / 100)) - .text(lableObj.label) - .style('fill', lableObj.lcolor) - .attr('transform', "translate(" + (6) + "," + (0 + ") rotate(" + (180) + ")")) - .attr('dominant-baseline', 'central'); - } - }); - }); + + var data = [] + + for(let k = 0; k < uniqueTarget.length; k++) { + data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) + } + var length = data.length + data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])}) + var border = VIFVarFormatted[indexNode] + + + var arcs = data.map(function (obj, i) { + if (i == length) { + return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); + } else { + return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius); + } + }); + + var arcsGrey = data.map(function (obj, i) { + return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius)); + }); + + var pieData = data.map(function (obj, i) { + return [ + {value: obj.value, arc: arcs[i], object: obj}, + {value: (100 - obj.value), arc: arcsGrey[i], object: obj}, + {value: 0, arc: arcs[i], object: obj}]; + }); + + var pie = d3.pie().sort(null).value(function (d) { + return d.value; + }); + + var g = d3.select('#svg'+indexNode).selectAll('g').data(pieData).enter() + .append('g') + .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); + var gText = d3.select('#svg'+indexNode).selectAll('g.textClass').data([{}]).enter() + .append('g') + .classed('textClass', true) + .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); + + + g.selectAll('path').data(function (d) { + return pie(d); + }).enter().append('path') + .attr('id', function (d, i) { + if (i == 1) { + return "Text" + d.data.object.label + } + }) + .attr('d', function (d) { + return d.data.arc(d); + }).attr('fill', function (d, i) { + return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none'; + }); + + g.each(function (d, index) { + console.log(d) + + var el = d3.select(this); + var path = el.selectAll('path').each(function (r, i) { + if (i === 1) { + var centroid = r.data.arc.centroid({ + startAngle: r.startAngle + 0.05, + endAngle: r.startAngle + 0.001 + 0.05 + }); + var lableObj = r.data.object; + g.append('text') + .attr('font-size', ((2 * width) / 100)) + .attr('dominant-baseline', 'central') + .append("textPath") + .attr("textLength", function (d, i) { + return 0; + }) + .attr("startOffset", '5') + .attr("dy", '-3em') + .text(lableObj.value + '%'); + } + if (i === 0) { + var centroidText = r.data.arc.centroid({ + startAngle: r.startAngle, + endAngle: r.startAngle + }); + var lableObj = r.data.object; + gText.append('text') + .attr('font-size', ((2 * width) / 100)) + .text(lableObj.label) + .style('fill', lableObj.lcolor) + .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")")) + .attr('dominant-baseline', 'central'); + } + }); + + }); + + }) var drag_handler = d3.drag() .on("start", drag_start) @@ -333,7 +335,7 @@ export default { return d.name; }) .attr('x', 20) - .attr('y', 15); + .attr('y', 8); node.append('title').text(function (d) { return d.name; }); @@ -382,6 +384,7 @@ export default { .attr('y2', function (d) { return d.target.y; }); node + .attr("id", function(d, i) { return "g" + (i); }) .attr("transform", function(d, i) { d.x = d.x - 50 d.y = d.y - 50 @@ -482,7 +485,7 @@ svg { } .links line { - stroke: #999; + stroke: #D3D3D3; stroke-opacity: 0.6; } diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue index ced3cf2..f883198 100755 --- a/frontend/src/components/Main.vue +++ b/frontend/src/components/Main.vue @@ -617,7 +617,7 @@ body { top: 0px; bottom: 0px; margin-top: -4px !important; - overflow-x: hidden !important; + overflow: hidden !important; } .modal-backdrop {