Vue.js and D3.js line chart

See the code on CodeSandbox

Vue.js  is a relatively new front end framework. As I have experience  in creating charts with react.js and D3.js, I thought I will Implement a relatively simple line chart using Vue.js and D3.js. My initial research had found that theres not that much examples on the web on the subject of using Vue.js and D3.js together. These are the takeaway points that you need to consider.

  • Learn the basic  hooks of Vue.js (In my case I only used the hook mounted)
  • Learn the template system and the associated processing functions
  • Use D3 to calculate the x and Y axis and calculate the path data for the SVG then leave Vue to do the rendering of the dom.
  • Animation is tricky. I have opted for a css implementation to animate the plotted line but ideally should use JavaScript reason being IE browser has issues with css animation. Also js offers better control for the timing and sequencing of animation events.

Leave a Reply