So verwenden Sie d3.js in einem Vue-Projekt

Dieses Mal zeige ich Ihnen, wie Sie d3.js in einem Vue-Projekt verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von d3.js in einem Vue-Projekt?

Ich habe zuvor eine Demo geschrieben und es gab einige Dinge, die die Verwendung von d3 erforderten, um einige Effekte zu erzielen. Ich habe jedoch in vielen Foren nach Ressourcen gesucht und konnte keine Möglichkeit finden, D3.js in Vue zu verwenden. Man kann sagen, dass D3 auf npm relativ unmenschlich ist und überhaupt nicht erwähnt wurde, wie man D3.js auf Webpack verwendet.

Schließlich, nachdem ich lange gekämpft hatte, sah ich, wie ein ausländischer Chef seinen Fall las und den Einsatz von D3 im Vue-Projekt erfolgreich implementiert

Zuerstinstallieren

npm install d3 --save-dev

nur für den Fall, dann schauen Sie sich package.json an

Installation abgeschlossen

Bevor wir beginnen, rendern wir eine Vue-Komponente, die die reguläre D3-DOM-Manipulation verwendet, um ein einfaches Liniendiagramm zu rendern:

<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>

Der Code ist einfach und leicht zu verstehen, aber dies ist nur ein einfaches Beispiel. Da wir keine Vorlagen verwenden, würden komplexere Visualisierungen, die mehr Operationen und Berechnungen erfordern, das Design und die Logik der Komponente verdecken. Eine weitere Einschränkung bei dem oben genannten Ansatz besteht darin, dass wir die Eigenschaft „scopedCSS“ nicht verwenden können, da D3 dem DOM dynamisch Elemente hinzufügt.

kann auf seltsame, aber code-elegante Weise zur Implementierung von

<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>

verwendet werden, was ziemlich cool ist, auch wenn es keine Eigenschaften offenlegt und die Daten sind fest codiert, es trennt die Ansicht sehr gut von der Logik und verwendet Vue-Hooks, Methoden und Daten Objekte, das Phänomen ist das gleiche wie im Bild oben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vux in einem Vue-Projekt

Öffnen und Schließen des Menüs ohne JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie d3.js in einem Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!