vue-d3-basechart's Introduction

vue-d3-basechart

vue-d3-basechart provides BaseChart component using d3.js for Vue.js.

Installation

npm install vue-d3-basechart

Example

src/components/BarChart.vue

<template>
  <svg class="bar-chart"></svg>
</template>

<script>
import BaseChart from 'vue-d3-basechart'
import * as d3 from 'd3'

export default BaseChart.extend({
  name: 'bar-chart',
  props: ['width', 'barHeight'],
  methods: {
    renderChart () {
      // This code is based on https://bost.ocks.org/mike/bar/2/

      var data = this.chartData
      var width = this.width
      var barHeight = this.barHeight

      var x = d3.scaleLinear()
          .domain([0, d3.max(data)])
          .range([0, width])

      var chart = d3.select(this.$el)
          .attr('width', width)
          .attr('height', barHeight * data.length)

      var d = chart.selectAll('g')
          .data(data)

      d.exit().remove()

      var g = d.enter().append('g')
          .merge(d)
          .attr('transform', function (d, i) { return 'translate(0,' + i * barHeight + ')' })
      g.selectAll('rect').remove()
      g.selectAll('text').remove()
      g.append('rect')
          .attr('width', x)
          .attr('height', barHeight - 1)
      g.append('text')
          .attr('x', function (d) { return x(d) - 3 })
          .attr('y', barHeight / 2)
          .attr('dy', '.35em')
          .text(function (d) { return d })
    }
  },
  watch: {
    width: 'renderChart',
    barHeight: 'renderChart'
  }
})
</script>

<style lang="scss">
.bar-chart {
  rect {
    fill: steelblue;
  }

  text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
  }
}
</style>

src/App.vue

<template>
  <div id="app">
    <bar-chart :chart-data="barChart.data" :width="barChart.width" :bar-height="barChart.barHeight"></bar-chart>
  </div>
</template>

<script>
import BarChart from './components/BarChart'

export default {
  name: 'app',
  components: {
    BarChart
  },
  data () {
    return {
      barChart: {
        data: [4, 8, 15, 16, 23, 42],
        width: 420,
        barHeight: 20
      }
    }
  }
}
</script>