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