update docs/navigation begin

README.md

@@ -1,5 +1,7 @@
 # d3vue
 
+A list of Vue.js / D3.js examples. 
+
 > An example project of how use Vue.js with D3.js
 
 ## Build Setup

package.json

@@ -9,6 +9,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "d3": "^4.6.0",
     "vue": "^2.1.10",
     "vue-router": "^2.2.0"
   },

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h1> D3.js vs Vue.js templates </h1>
+    <a href='#/'> <h1> D3.js vs Vue.js examples </h1> </a>
     <router-view></router-view>
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -19,4 +19,8 @@ export default {
   text-align: center;
   margin-top: 30px;
 }
+a {
+  color: black;
+  text-decoration: none;
+}
 </style>

src/components/1-circle-mount.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>aaaa</div>
-</template>
-
-<script>
-export default {
-  name: 'hello',
-  data () {
-    return {}
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

src/components/demos-navigation.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="holder">
+    <div>
+      <a :href="prev.path"> < previous </a>
+      <!-- TODO: source code link  -->
+      <a :href="next.path"> next > </a>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data () {
+    console.log(this.$route);
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>

src/d3-components/1-circle-mount.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <svg width="500" height="300"></svg>
+  </div>
+</template>
+
+<script>
+const d3 = require('d3');
+export default {
+  data () {
+    console.log(this.$route);
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>

src/router/demos.js

@@ -3,6 +3,6 @@ export const routes = [
   {
     name: 'Circle mount',
     path: '/1-circle-mount',
-    component: require('components/1-circle-mount')
+    component: require('d3-components/1-circle-mount')
   }
 ]