Before I wrote a Demo in which some things need to use D3 to achieve some effects, but I could not find the resources in many forums to use D3.js in Vue, THE NPM above D3 can be said to be relatively inhuman, completely did not say how to use D3.js in webpack

Finally, it took a long time to see a foreign boss see his case to successfully implement the use of D3 in the Vue project

First installation

npm install d3 --save-dev
Copy the code

Just in case, look at package.json

The installation is complete

Before we begin, let’s render a Vue component that uses the usual D3 DOM manipulation to render a simple line graph:


<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
  name: 'non-vue-line-chart',
  template: '<div></div>'.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>
Copy the code

The code is straightforward, but this is just a basic example. Because we didn’t use templates, a more complex visualization that required more manipulation and computation would have obscured the design and logic of the components. Another caveat to the above approach is that we cannot use the properties of scopedCSS because D3 dynamically adds elements to the DOM.

It can be done in a weird but elegant way

<template>
  <svg width="500" height="270">
    <g style="transform: translate(0, 10px)">
      <path :d="line"/> </g> // Front-end full stack learning exchange circle: 866109386 </ SVG >// For 1-3 years of experience front-end developers </template>// help break technical bottlenecks, improve thinking <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>
Copy the code

Very cool, even though it doesn’t expose any attributes and the data is hard coded, it nicely separates the view from the logic and uses Vue hooks, methods, and data objects, as shown above