Home > Article > Web Front-end > Detailed explanation of cases using d3.js in Vue projects
This time I will bring you a detailed explanation of the case of using d3.js in the Vue project. What are the precautions for using d3.js in the Vue project. The following is a practical case, let's take a look.
Before I wrote a Demo, some things needed to use d3 to achieve some effects, but I couldn’t find a way to use D3.js in Vue when looking for resources in many forums. D3 on npm can be said to be relatively It’s very inhumane and didn’t say anything about how to use D3.js on webpack
Finally, after struggling for a long time, I saw a foreign boss look at his case and successfully implement the use of D3 in the Vue project
FirstInstall
npm install d3 --save-dev
Just in case, then look at package.json
Installation completed
Before we begin, let's render a Vue component that uses regular D3 DOM manipulationRenders a simple line chart:
<script> import * as d3 from 'd3'; const data = [99, 71, 78, 25, 36, 92]; export default { name: 'non-vue-line-chart', template: '<p></p>', mounted() { const svg = d3.select(this.$el) .append('svg') .attr('width', 500) .attr('height', 270) .append('g') .attr('transform', 'translate(0, 10)'); const x = d3.scaleLinear().range([0, 430]); const y = d3.scaleLinear().range([210, 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)]); const createPath = d3.line() .x((d, i) => x(i)) .y(d => y(d)); svg.append('path').attr('d', createPath(data)); }, }; </script> <style lang="sass"> svg margin: 25px; path fill: none stroke: #76BF8A stroke-width: 3px </style>
The code is simple and easy to understand, but this is just A basic example. Because we are not using templates, more complex visualizations that require more operations and calculations would obscure the component's design and logic. Another caveat with the above approach is that we cannot use the scopedCSS property because D3 dynamically adds elements to the DOM.
can be implemented in a weird, but code-elegant way
<template> <svg width="500" height="270"> <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: [99, 71, 78, 25, 36, 92], 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 => 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: #76BF8A stroke-width: 3px </style>
is pretty cool, even though it doesn't expose any properties and the data is hardcoded , it separates the view from the logic very well, and uses Vue hooks, methods and dataobject, the phenomenon is the same as the picture above.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Summary of how to use nodejs log module winston
Summary of how to use watch in Vue
The above is the detailed content of Detailed explanation of cases using d3.js in Vue projects. For more information, please follow other related articles on the PHP Chinese website!