styles examples

README.md

@@ -1,6 +1,6 @@
 # d3vue
 
-A list of Vue.js / D3.js examples.
+A list of Vue.js / D3.js [examples](https://github.com/corpglory/d3vue/tree/master/src/d3-components)
 
 ## Goals
 

src/components/demos-navigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="holder">
     <div class="links">
-      <a v-if="prev" :href="prev.href" class="prev"> < previous </a>
+      <a v-if="prev" :href="prev.href" class="prev"> < prev </a>
       <a :href="sourceHref" class="source"> source </a>
       <a v-if="next" :href="next.href" class="next"> next > </a>
     </div>
@@ -70,6 +70,7 @@ a:hover {
 
 .prev {
   left: 0px;
+  text-align: left;
 }
 
 .source {

src/d3-components/README.md

@@ -0,0 +1,9 @@
+# d3vue
+
+See live demos: [corpglory.github.io/d3vue](https://corpglory.github.io/d3vue)
+
+## Goals
+
+* Help to learn Vue.js by people who already know D3.js
+* Show advantages of using D3.js on top of Vue.js
+* Collect best practices of problem solving with good software design

src/d3-components/bars-style-basic.vue

@@ -0,0 +1,69 @@
+<!--
+
+Links:
+  .vue files: https://vuejs.org/v2/guide/single-file-components.html
+
+Advanced:
+  D3.append: https://github.com/d3/d3-selection/blob/master/src/selection/index.js
+
+-->
+
+<template>
+  <svg id="bars-style-basic-svg" width="500" height="300"></svg>
+</template>
+
+<script>
+const d3 = require('d3');
+
+export default {
+  mounted: function() {
+    var svg = d3.select(this.$el);
+    var width = +svg.attr('width');
+    var height = +svg.attr('height');
+    var data = [
+      {name: 'one', val: 100},
+      {name: 'two', val: 150},
+      {name: 'three', val: 200}
+    ]
+
+    console.log(this.$styles);
+
+    var x = d3.scaleBand()
+      .rangeRound([0, width]).padding(0.1)
+      .domain(data.map(d => d.name));
+    var y = d3.scaleLinear()
+      .rangeRound([height, 0])
+      .domain([0, d3.max(data, d => d.val)])
+
+    svg
+      .selectAll('rect')
+      .data(data)
+      .enter()
+        .append('rect')
+        .attr('x', d => x(d.name))
+        .attr('class', d => d.name)
+        .attr('y', d =>  y(d.val))
+        .attr('width', x.bandwidth())
+        .attr('height', d => height - y(d.val))
+  }
+}
+</script>
+
+<style>
+  /*
+    #bars-style-basic-svg
+    will be added to global namespace
+  */
+  #bars-style-basic-svg .one {
+    fill: #ffc300
+  }
+  #bars-style-basic-svg .two {
+    fill: #c70039
+  }
+  #bars-style-basic-svg .three {
+    fill: #571845
+  }
+  #bars-style-basic-svg {
+    margin-top: 40px;
+  }
+</style>

src/d3-components/bars-style-scoped.vue

@@ -0,0 +1,71 @@
+<!--
+
+Based on ./bars-style-basic.vue
+Maybe there is a better solution.
+
+Links:
+  Object attr: https://www.w3schools.com/xml/dom_attribute.asp
+  Scopes css: https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md
+  .vue files: https://vuejs.org/v2/guide/single-file-components.html
+
+-->
+
+<template>
+  <svg width="500" height="300"></svg>
+</template>
+
+<script>
+const d3 = require('d3');
+export default {
+  mounted: function() {
+
+    // vue loader will substitute data attribute for styles
+    var STYLE_MODULE_NAME = this.$el.attributes[0];
+
+    var svg = d3.select(this.$el);
+    var width = +svg.attr('width');
+    var height = +svg.attr('height');
+    var data = [
+      {name: 'one', val: 100},
+      {name: 'two', val: 150},
+      {name: 'three', val: 200}
+    ]
+
+    var x = d3.scaleBand()
+      .rangeRound([0, width]).padding(0.1)
+      .domain(data.map(d => d.name));
+    var y = d3.scaleLinear()
+      .rangeRound([height, 0])
+      .domain([0, d3.max(data, d => d.val)])
+
+    svg
+      .selectAll('rect')
+      .data(data)
+      .enter()
+        .append('rect')
+
+        // We add attr here
+        .attr('data-v-0e55e99d', '')
+        .attr('x', d => x(d.name))
+        .attr('class', d => d.name)
+        .attr('y', d =>  y(d.val))
+        .attr('width', x.bandwidth())
+        .attr('height', d => height - y(d.val))
+  }
+}
+</script>
+
+<style scoped>
+  .one {
+    fill: #154890
+  }
+  .two {
+    fill: #e1d4c0
+  }
+  .three {
+    fill: #ff6600
+  }
+  svg {
+    margin-top: 40px;
+  }
+</style>

src/d3-components/circle-mount.vue

@@ -1,10 +1,11 @@
 <!--
 Links:
   Components: https://vuejs.org/v2/guide/components.html
+  .vue files: https://vuejs.org/v2/guide/single-file-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
+  Virtual DOM: https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40#.hexwxh9m3
 -->
 
 <template>

src/router/demos.js

@@ -10,6 +10,16 @@ export const routes = [
     name: 'Size controller',
     path: '/size-controller',
     component: require('d3-components/size-controller')
+  },
+  {
+    name: 'Bars: styles basic',
+    path: '/bars-style-basic',
+    component: require('d3-components/bars-style-basic')
+  },
+  {
+    name: 'Bars: styles scoped',
+    path: '/bars-style-scoped',
+    component: require('d3-components/bars-style-scoped')
   }
 ].map(r => {
   var res = r;