new

frontend/src/components/FeatureSpace2.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="column">
     <div id="FeatureGraph2"></div>
+    <div id="result"></div>
   </div>
 </template>
 
@@ -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))
+          .domain([MIMin, MIMax])
-          .range(['#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']);
+          .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("width", width)
-          .attr("height", height + marginSVG.top + marginSVG.bottom);
+          .attr("height", height);
 
         var graph = this.jsonData
 
@@ -211,6 +211,15 @@ export default {
           ++i;
           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: ''},
@@ -218,29 +227,17 @@ export default {
               // ];]
               
               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: corrTargetFormatted[k][indexNode], 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]
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+              var border = VIFVarFormatted[indexNode]
 
-                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 = []
+                    if (i == length) {
-                      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);
@@ -262,10 +259,10 @@ export default {
                       return d.value;
                   });
 
-                    var g = svgNodes.select('g').data(pieData).enter()
+                  var g = d3.select('#svg'+indexNode).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
-                    var gText = svgNodes.selectAll('g.textClass').data([{}]).enter()
+                  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)');
@@ -285,7 +282,9 @@ export default {
                       return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
                   });
 
-                    svgNodes.selectAll('g').each(function (d, index) {
+                  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) {
@@ -315,12 +314,15 @@ export default {
                                   .attr('font-size', ((2 * width) / 100))
                                   .text(lableObj.label)
                                   .style('fill', lableObj.lcolor)
-                                    .attr('transform', "translate(" + (6) + "," + (0 + ") rotate(" + (180) + ")"))
+                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
                                   .attr('dominant-baseline', 'central');
                           }
                       });
+
                   });
 
+                })
+
                 var drag_handler = d3.drag()
                   .on("start", drag_start)
                   .on("drag", drag_drag)
@@ -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;
 }
 

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 {