circle mount

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

@@ -7,9 +7,13 @@
 <script>
 const d3 = require('d3');
 export default {
-  data () {
+  mounted: function() {
-    console.log(this.$route);
+    var svg = d3.select(this.$el).select('svg');
-    return {}
+    svg
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', '100')
   }
 }
 </script>

src/d3-components/2-circle-render.vue

@@ -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>

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>

src/router/demos.js

@@ -7,9 +7,9 @@ export const routes = [
     component: require('d3-components/1-circle-mount')
   },
   {
-    name: 'Circle render',
+    name: 'Rect render',
-    path: '/2-circle-mount',
+    path: '/2-rect-render',
-    component: require('d3-components/2-circle-render')
+    component: require('d3-components/2-rect-render')
   }
 ].map(r => {
   var res = r;