layout contry continu

src/d3-components/bubbles-nested-routes/bubbles.vue

@@ -35,7 +35,7 @@ export default {
 
     // TODO: remove it later
     d3.csv('static/data/earthquakes.csv', function(data) {
-      that.ph2 = new PH2(bubblesG, data, 'country');
+      that.ph2 = new PH2(bubblesG, data, that.groupBy);
     });
   }
 

src/d3-components/bubbles-nested-routes/index.vue

@@ -15,22 +15,23 @@ Links:
 <template>
   <div class="holder">
     <groupMenu :links="links" :activeLink="activeLink" />
-    {{activeLink.layout}}
+    <bubbles :groupBy="activeLink.layout" />
   </div>
 </template>
 
 <script>
 
 const menu = require('d3-components/bubbles-nested-routes/menu');
+const bubbles = require('d3-components/bubbles-nested-routes/bubbles');
 
 const MY_URL_PREFIX = 'bubbles-nested-routes';
 const _ = require('lodash');
 
 const LINKS = [
     {
-      name: 'Together',
+      name: 'None',
       path: '',
-      layout: 'together'
+      layout: 'total'
     },
     {
       name: 'By country',
@@ -51,7 +52,8 @@ const LINKS = [
 
 export default {
   components: {
-    groupMenu: menu
+    groupMenu: menu,
+    bubbles: bubbles
   },
   data: function() {
     return {

src/d3-components/bubbles-nested-routes/menu.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="holder">
-
     <ul class="menu">
       <li>Group by: </li>
-
       <li v-for="link in alinks">
         <a :href="link.item.path" :class="{active: link.active}"> {{link.item.name}} </a>
       </li>
     </ul>
-
-    {{activeLink.path}}
   </div>
 </template>
 
@@ -32,7 +28,7 @@ export default {
 </script>
 
 <style scoped>
-  .menu{
+  .menu {
     padding: 0;
     margin: 0;
   }

src/d3-components/bubbles-nested-routes/ph2/index.js

@@ -12,6 +12,7 @@ import _ from 'lodash';
 export default class PH2 {
   constructor(elem, data, layoutName) {
     this.svg = elem;
+    this.data = data;
     this.setData(data);
     this._init();
     this.layout = undefined;
@@ -32,6 +33,7 @@ export default class PH2 {
 
     if(this.layout) {
       this.layout.exit();
+
     }
     this.layout = this.layouts[layoutName];
     if(!this.layout.inited) {
@@ -39,62 +41,46 @@ export default class PH2 {
       this.layout.inited = true;
     }
     this.layout.enter();
+    this.simulation.alpha(1);
+    this.simulation.restart();
   }
 
   setData(data) {
-    var range = data.length;
-    this.data = {
-      nodes:data.map(d => ({
+    this.nodes = data.map(d => ({
       r: +d.Magnitude
-      })),
-      links:d3.range(0, range).map(
-        function(){ return {
-          source:~~d3.randomUniform(range)(),
-          target:~~d3.randomUniform(range)()
-        }
-      })
-    };
+    }))
   }
 
   _init() {
     this.simulation = d3.forceSimulation()
-      //.force("link", d3.forceLink().id(d => d.index))
       .force("collide", d3.forceCollide(d => d.r + 5).iterations(16))
       .force("center", d3.forceCenter(0, 0))
+      .force("charge", d3.forceManyBody().strength(-1))
 
     this._initLayouts();
-    var link = this.svg.append("g")
-      .attr("class", "links")
-      .selectAll("line")
-      .data(this.data.links)
-      .enter()
-      .append("line")
-      .attr("stroke", "black")
 
     var node = this.svg.append("g")
       .attr("class", "nodes")
       .selectAll("circle")
-      .data(this.data.nodes)
+      .data(this.nodes)
       .enter()
       .append("circle")
       .attr("r", d => d.r )
 
+    var that = this;
     var ticked = function() {
-      link
-        .attr("x1", d => d.source.x)
-        .attr("y1", d => d.source.y)
-        .attr("x2", d => d.target.x)
-        .attr("y2", d => d.target.y);
       node
         .attr("cx", d => d.x )
         .attr("cy", d => d.y );
+      if(that.layout.ticked) {
+        that.layout.ticked();
+      }
     }
 
     this.simulation
-      .nodes(this.data.nodes)
+      .nodes(this.nodes)
       .on("tick", ticked);
 
-
   }
 
   _initLayouts() {

src/d3-components/bubbles-nested-routes/ph2/layout-contry.js

@@ -1,18 +1,52 @@
+const d3 = require('d3');
+
 export default class {
   constructor(elem, data, simulation) {
     this.elem = elem;
     this.data = data;
     this.simulation = simulation;
   }
+
   init() {
-    //alert('ебать')
+    var range = this.data.length / 20;
+    this.links = d3.range(0, range).map(
+      () => ({
+        source:~~d3.randomUniform(range)(),
+        target:~~d3.randomUniform(range)()
+      })
+    );
   }
+
   enter() {
+    this.simulation
+      .force("link", d3.forceLink().id(d => d.index))
+
+    this.linesG = this.elem.insert("g", ":first-child");
+    this.lines = this.linesG
+      .attr("class", "links")
+      .selectAll("line")
+      .data(this.links)
+      .enter()
+      .append("line")
+      .attr("stroke", "black")
+
+    this.simulation
+      .force("link")
+      .links(this.links);
 
   }
+
+  ticked() {
+    this.lines
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
+  }
+
   exit() {
     this.simulation
       .force("link", null)
-      .links(this.data.links);
+    this.linesG.remove();
   }
 }