From 38ff651245dc83ea004eadd1327329e592310f99 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <gmpota@gmail.com>
Date: Thu, 23 Feb 2017 20:55:08 +0100
Subject: [PATCH] size controller

---
 src/d3-components/1-circle-mount.vue  | 22 ------------
 src/d3-components/2-rect-render.vue   | 25 --------------
 src/d3-components/circle-mount.vue    | 30 ++++++++++++++++
 src/d3-components/size-controller.vue | 49 +++++++++++++++++++++++++++
 src/router/demos.js                   | 10 +++---
 5 files changed, 84 insertions(+), 52 deletions(-)
 delete mode 100644 src/d3-components/1-circle-mount.vue
 delete mode 100644 src/d3-components/2-rect-render.vue
 create mode 100644 src/d3-components/circle-mount.vue
 create mode 100644 src/d3-components/size-controller.vue

diff --git a/src/d3-components/1-circle-mount.vue b/src/d3-components/1-circle-mount.vue
deleted file mode 100644
index 75e0656..0000000
--- a/src/d3-components/1-circle-mount.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <svg width="500" height="300"></svg>
-  </div>
-</template>
-
-<script>
-const d3 = require('d3');
-export default {
-  mounted: function() {
-    var svg = d3.select(this.$el).select('svg');
-    svg
-      .append('circle')
-      .attr('cx', '250')
-      .attr('cy', '150')
-      .attr('r', '100')
-  }
-}
-</script>
-
-<style>
-</style>
diff --git a/src/d3-components/2-rect-render.vue b/src/d3-components/2-rect-render.vue
deleted file mode 100644
index bd7653c..0000000
--- a/src/d3-components/2-rect-render.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<!-- <template>
-  Is should be missing, otherwise
-  render() function will not execute
-</template> -->
-
-<script>
-const d3 = require('d3');
-export default {
-  render: function(createElement) {
-    var el = createElement('svg')
-    // console.log(el.elm);
-    var svg = d3.select(el.elm);
-    svg.attr('width', '500')
-    // d3.select(el.elm)
-    // .append('circle')
-    // .attr('cx', '250')
-    // .attr('cy', '150')
-    // .attr('r', '100')
-    return el;
-  }
-}
-</script>
-
-<style>
-</style>
diff --git a/src/d3-components/circle-mount.vue b/src/d3-components/circle-mount.vue
new file mode 100644
index 0000000..1f15fc5
--- /dev/null
+++ b/src/d3-components/circle-mount.vue
@@ -0,0 +1,30 @@
+<!--
+Links:
+  Components: https://vuejs.org/v2/guide/components.html
+
+Advanced:
+  Component Lifecyrcle: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
+  Virtaul DOM: https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40#.hexwxh9m3
+-->
+
+<template>
+  <svg width="500" height="300"></svg>
+</template>
+
+<script>
+const d3 = require('d3');
+export default {
+  mounted: function() {
+    // this.#el - is the root element in <template>
+    // in this case it is <svg> tag
+    d3.select(this.$el)
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', '100')
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/d3-components/size-controller.vue b/src/d3-components/size-controller.vue
new file mode 100644
index 0000000..f0474b2
--- /dev/null
+++ b/src/d3-components/size-controller.vue
@@ -0,0 +1,49 @@
+<!--
+Links
+  Data: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
+  Form Input Bindings: https://vuejs.org/v2/guide/forms.html#Basic-Usage
+  Watchers: https://vuejs.org/v2/guide/computed.html#Watchers
+-->
+
+<template>
+  <div>
+    <svg width="500" height="300"></svg>
+    <br>
+    <input
+      type="range"
+      v-model="circleSize"
+      min="1"
+      max="100"
+      step="1"
+    >
+  </div>
+</template>
+
+<script>
+const d3 = require('d3');
+export default {
+  data: function() {
+    return {
+      circleSize: 50
+    }
+  },
+  mounted: function(createElement) {
+    var svg = d3.select(this.$el).select('svg');
+    this.circle = svg
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', this.circleSize)
+  },
+  watch: {
+    circleSize: function(newValue) {
+      this.circle
+        .attr('r', newValue)
+    }
+  }
+
+}
+</script>
+
+<style>
+</style>
diff --git a/src/router/demos.js b/src/router/demos.js
index b67dc4f..e05f67d 100644
--- a/src/router/demos.js
+++ b/src/router/demos.js
@@ -3,13 +3,13 @@ const config = require('config.json');
 export const routes = [
   {
     name: 'Circle mount',
-    path: '/1-circle-mount',
-    component: require('d3-components/1-circle-mount')
+    path: '/circle-mount',
+    component: require('d3-components/circle-mount')
   },
   {
-    name: 'Rect render',
-    path: '/2-rect-render',
-    component: require('d3-components/2-rect-render')
+    name: 'Size controller',
+    path: '/size-controller',
+    component: require('d3-components/size-controller')
   }
 ].map(r => {
   var res = r;