Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie d3.js in einem Vue-Projekt

php中世界最好的语言
Freigeben: 2018-06-01 13:56:06
Original
2902 Leute haben es durchsucht

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
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!