dmenu + better layout design

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);
+      that.ph2 = new PH2(bubblesG, data, 'country');
     });
   }
 

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

@@ -14,63 +14,70 @@ Links:
 
 <template>
   <div class="holder">
-    <ul class="menu">
-      <li v-for="link in links">
-        <a :href="link.path"> {{link.name}} </a>
-      </li>
-    </ul>
-    {{layout}}
+    <groupMenu :links="links" :activeLink="activeLink" />
+    {{activeLink.layout}}
   </div>
 </template>
 
 <script>
 
+const menu = require('d3-components/bubbles-nested-routes/menu');
+
 const MY_URL_PREFIX = 'bubbles-nested-routes';
 const _ = require('lodash');
+
 const LINKS = [
-  {
-    name: 'Together',
-    path: '',
-    layout: 'together'
-  },
-  {
-    name: 'By contry',
-    path: '/contry',
-    layout: 'contry'
-  },
-  {
-    name: 'By year',
-    path: '/year',
-    layout: 'year'
-  }
-].map(d => {
-  d.path = '#/' + MY_URL_PREFIX + d.path;
-  return d;
-});
+    {
+      name: 'Together',
+      path: '',
+      layout: 'together'
+    },
+    {
+      name: 'By country',
+      path: '/country',
+      layout: 'country'
+    },
+    {
+      name: 'By year',
+      path: '/year',
+      layout: 'year'
+    }
+  ].map(d => {
+    d.path = '#/' + MY_URL_PREFIX + d.path;
+    d.active = false;
+    return d;
+  });
+
 
 export default {
+  components: {
+    groupMenu: menu
+  },
   data: function() {
     return {
-      layout: this.resolveLayout(),
+      activeLink: this.findActiveLink()
     }
   },
   computed: {
-    links: function () {
+    links: function() {
       return LINKS;
     }
   },
   methods: {
-    resolveLayout: function() {
+    findActiveLink: function() {
+      _.each(LINKS, l => {
+        l.active = false;
+      })
       var link = _.find(LINKS, l => l.path == '#' + this.$route.path);
       if(!link) {
         link = LINKS[0];
       }
-      return link.layout;
+      return link;
     }
   },
   watch: {
     '$route' (to, from) {
-      this.layout = this.resolveLayout();
+      this.activeLink = this.findActiveLink();
     }
   }
 }

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

@@ -0,0 +1,52 @@
+<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>
+
+<script>
+
+const _ = require('lodash');
+
+export default {
+  props: ['links', 'activeLink'],
+  computed: {
+    alinks: function() {
+      var that = this;
+      return _.map(this.links, l => ({
+        item: l,
+        active: (l.path == that.activeLink.path)
+      }))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .menu{
+    padding: 0;
+    margin: 0;
+  }
+  .menu li {
+    text-align: left;
+    display: inline-block;
+    text-align: left;
+    margin: 0px;
+    margin-right: 10px;
+  }
+  .menu li a {
+    text-decoration: none;
+  }
+  .menu li a.active {
+    text-decoration: underline;
+  }
+</style>

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

@@ -1,11 +1,11 @@
 // http://vallandingham.me/bubble_charts_with_d3v4.html
 
-const d3 = require('d3');
-
-const layoutTotal = require('./layout-total');
-const layoutContry = require('./layout-contry');
+import layoutTotal from './layout-total';
+import layoutCountry from './layout-contry';
+import layoutYear from './layout-year';
 
-const _ = require('lodash');
+const d3 = require('d3');
+import _ from 'lodash';
 
 // TODO: do it d3-way so I can use selection.call()
 
@@ -19,16 +19,25 @@ export default class PH2 {
   }
 
   setLayout(layoutName) {
+
+    if(layoutName === undefined) {
+      throw new Error('layoutName is undefined');
+    }
     if(!this.layouts) {
       throw new Error('Layouts are not defined');
     }
     if(!this.layouts[layoutName]) {
       throw new Error('Can`t find layout ' + layoutName);
     }
+
     if(this.layout) {
       this.layout.exit();
     }
     this.layout = this.layouts[layoutName];
+    if(!this.layout.inited) {
+      this.layout.init();
+      this.layout.inited = true;
+    }
     this.layout.enter();
   }
 
@@ -39,17 +48,21 @@ export default class PH2 {
         r: +d.Magnitude
       })),
       links:d3.range(0, range).map(
-        function(){ return {source:~~d3.randomUniform(range)(), target:~~d3.randomUniform(range)()}
+        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("link", d3.forceLink().id(d => d.index))
+      .force("collide", d3.forceCollide(d => d.r + 5).iterations(16))
       .force("center", d3.forceCenter(0, 0))
 
+    this._initLayouts();
     var link = this.svg.append("g")
       .attr("class", "links")
       .selectAll("line")
@@ -68,11 +81,10 @@ export default class PH2 {
 
     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 );
-
+        .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 );
@@ -82,17 +94,20 @@ export default class PH2 {
       .nodes(this.data.nodes)
       .on("tick", ticked);
 
-    this.simulation
-      .force("link")
-      .links(this.data.links);
+
   }
 
   _initLayouts() {
     this.layouts = {
       'total': layoutTotal,
-      'county': layoutContry,
+      'country': layoutCountry,
+      'year': layoutYear
     };
-    _.this.layouts
+
+    for (var k in this.layouts) {
+      var v = this.layouts[k];
+      this.layouts[k] = new v(this.svg, this.data, this.simulation);
+    }
   }
 
 }

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

@@ -1,12 +1,18 @@
 export default class {
-  constructor(elem, simulation) {
+  constructor(elem, data, simulation) {
     this.elem = elem;
+    this.data = data;
     this.simulation = simulation;
   }
+  init() {
+    //alert('ебать')
+  }
   enter() {
 
   }
   exit() {
-
+    this.simulation
+      .force("link", null)
+      .links(this.data.links);
   }
 }

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

@@ -1,10 +1,13 @@
 export default class {
-  constructor(elem, simulation) {
+  constructor(elem, data, simulation) {
     this.elem = elem;
     this.simulation = simulation;
+  }
+  init() {
+
   }
   enter() {
-    
+
   }
   exit() {
 

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

@@ -0,0 +1,15 @@
+export default class {
+  constructor(elem, data, simulation) {
+    this.elem = elem;
+    this.simulation = simulation;
+  }
+  init() {
+    
+  }
+  enter() {
+
+  }
+  exit() {
+
+  }
+}

src/router/demos.js

@@ -32,7 +32,7 @@ export const routes = [
     path: '/bubbles-nested-routes',
     alias: '/bubbles-nested-routes/*',
     folder: true,
-    component: require('d3-components/bubbles-nested-routes/bubbles')
+    component: require('d3-components/bubbles-nested-routes/index')
   }
 ].map(r => {
   var res = r;