Comment utiliser d3.js dans un projet Vue

Cette fois, je vais vous montrer comment utiliser d3.js dans un projet Vue. Quelles sont les précautions pour utiliser d3.js dans un projet Vue. Voici des cas pratiques, jetons un oeil.

J'ai déjà écrit une démo et certaines choses nécessitaient d'utiliser d3 pour obtenir certains effets. Cependant, j'ai recherché des ressources dans de nombreux forums et je n'ai pas trouvé de moyen d'utiliser D3.js dans Vue. D3 sur npm peut être considéré comme relativement C'est très inhumain et je n'ai pas du tout mentionné comment utiliser D3.js sur webpack

Enfin, après avoir longtemps lutté, j'ai vu un patron étranger lire son cas et implémenté avec succès l'utilisation de D3 dans le projet Vue

Firstinstall

npm install d3 --save-dev

juste au cas où, puis regardez package.json

Installation terminée

Avant de commencer, rendons un composant Vue qui utilise les opérations DOM D3 régulières pour restituer un simple graphique linéaire :

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

Le code est simple et facile à comprendre, mais ce n'est qu'un exemple de base. Comme nous n'utilisons pas de modèles, des visualisations plus complexes nécessitant davantage d'opérations et de calculs obscurciraient la conception et la logique du composant. Une autre mise en garde concernant l'approche ci-dessus est que nous ne pouvons pas utiliser la propriété scopedCSS car D3 ajoute dynamiquement des éléments au DOM.

peut être utilisé d'une manière étrange, mais élégante en termes de code, pour implémenter

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

ce qui est plutôt cool même s'il n'expose aucun les propriétés et les données sont codées en dur, il sépare très bien la vue de la logique et utilise des hooks Vue, des méthodes et des donnéesobjets, le phénomène est le même que l'image ci-dessus.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vux dans un projet Vue

Ouverture et fermeture du menu sans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!