Use D3.js in Vue project

Before writing a demo There are some things to use D3 to achieve some effects but in many forums to find resources can not find the way to use the d3.js in Vue, npm above the D3 relatively speaking is very impersonal no say on webpack how to use D3.js

Finally, a long time to see a foreign big guy see his case successfully realized the use of D3 in Vue project

Install first

npm install d3 --save-dev

Just in case, then look.package.json

Installation Complete

Before we get started, let's render a Vue component that renders a simple line chart using the regular D3 DOM operation:

<Script>Import *  asD3 from ' D3 ';ConstData=[ About,  in,  +,  -,  $,  the];Export default {  name: ' Non-vue-line-chart ',  Template: ' <div></div> ',  Mounted(){    ConstSvg= D3.Select( This.$el)      .Append(' svg ')      .attr(' width ',  -)      .attr(' height ',  the)      .Append(' G ')      .attr(' Transform ', ' Translate (0, ten) ');    ConstX= D3.Scalelinear().Range([0, 430]);    ConstY= D3.Scalelinear().Range([ About, 0]);    D3.Axisleft(). Scale(x);    D3.Axistop(). Scale(y);    x.Domain(D3.extent(Data,(d,I=i));    y.Domain([0, D3.Max(Data,D=D)]);    ConstCreatepath= D3. Line()      .x((d,I= x(i)).y(d= y(d));    svg.Append(' path ').attr(' d ', Createpath(data));  },};</script><style lang= "Sass" >svgmargin:25px;PathFill:noneStroke: #76BF8Astroke-width:3px</style>

The code is easy to understand, but this is just a basic example. Because we do not use templates, more complex visualizations that require more operations and calculations obscure the design and logic of the component. Another caveat to the above approach is that we cannot use scoped CSS properties because D3 dynamically adds elements to the DOM.

Can be used rather strange, but the code is more elegant way to achieve

<template> <svg width= "height=" > <g style= "transform:translate (0, 10px)" > <path:d = "line"/> </g> </svg></template><script>import * As D3 from ' D3 '; export default {name: '  Vue-line-chart ', data () {return {data: [in the following, +, +, +, +], line: ',};  }, mounted () {This.calculatepath ();      }, Methods: {Getscales () {Const x = d3.scaletime (). Range ([0, 430]);      Const y = d3.scalelinear (). Range ([210, 0]);      D3.axisleft (). scale (x);      D3.axisbottom (). scale (y);      X.domain (D3.extent (This.data, (d, i) = i));      Y.domain ([0, D3.max (this.data, D and D)]);    return {x, y};      }, Calculatepath () {Const SCALE = this.getscales ();      Const PATH = D3.line (). x ((d, i) = scale.x (i)). Y (d = scale.y (d));    This.line = Path (this.data);  },},};</script><style lang= "sass" Scoped>svg margin:25px;path fill:none Stroke: #76BF8AStroke-width:3px</style> 

Very cool, even if it doesn't expose any attributes and the data is hardcoded, it's good to separate the view from the logic and use Vue hooks, methods and data objects, phenomena and the same

Use D3.js in Vue project