From bea523fc4bbf7f50ce6fb4ef1d41d4b98d6de640 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <gmpota@gmail.com>
Date: Thu, 23 Feb 2017 18:04:56 +0100
Subject: [PATCH] circle mount

---
 src/d3-components/1-circle-mount.vue  | 10 +++++++---
 src/d3-components/2-circle-render.vue | 18 ------------------
 src/d3-components/2-rect-render.vue   | 25 +++++++++++++++++++++++++
 src/router/demos.js                   |  6 +++---
 4 files changed, 35 insertions(+), 24 deletions(-)
 delete mode 100644 src/d3-components/2-circle-render.vue
 create mode 100644 src/d3-components/2-rect-render.vue

diff --git a/src/d3-components/1-circle-mount.vue b/src/d3-components/1-circle-mount.vue
index 5ccd344..75e0656 100644
--- a/src/d3-components/1-circle-mount.vue
+++ b/src/d3-components/1-circle-mount.vue
@@ -7,9 +7,13 @@
 <script>
 const d3 = require('d3');
 export default {
-  data () {
-    console.log(this.$route);
-    return {}
+  mounted: function() {
+    var svg = d3.select(this.$el).select('svg');
+    svg
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', '100')
   }
 }
 </script>
diff --git a/src/d3-components/2-circle-render.vue b/src/d3-components/2-circle-render.vue
deleted file mode 100644
index 5ccd344..0000000
--- a/src/d3-components/2-circle-render.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/src/d3-components/2-rect-render.vue b/src/d3-components/2-rect-render.vue
new file mode 100644
index 0000000..bd7653c
--- /dev/null
+++ b/src/d3-components/2-rect-render.vue
@@ -0,0 +1,25 @@
+<!-- <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/router/demos.js b/src/router/demos.js
index 84fc0d8..b67dc4f 100644
--- a/src/router/demos.js
+++ b/src/router/demos.js
@@ -7,9 +7,9 @@ export const routes = [
     component: require('d3-components/1-circle-mount')
   },
   {
-    name: 'Circle render',
-    path: '/2-circle-mount',
-    component: require('d3-components/2-circle-render')
+    name: 'Rect render',
+    path: '/2-rect-render',
+    component: require('d3-components/2-rect-render')
   }
 ].map(r => {
   var res = r;