Comment installer d3 dans vue et créer un organigramme

Ces dernières années, vue.js, en tant que l'un des cadres techniques principaux du développement front-end, a attiré de plus en plus d'attention et d'amour. En tant que bibliothèque JavaScript dynamique basée sur les données, d3.js est également largement utilisé dans divers scénarios de visualisation de données. Comment installer et utiliser d3.js dans l'application vue.js ? Cet article présentera l'organigramme de l'installation de vue d3.

Étape 1 : Installez d3.js

Tout d'abord, vous devez installer la bibliothèque d3.js dans le projet vue.js, ce qui peut être réalisé via le gestionnaire de packages npm. Ouvrez le terminal, entrez le répertoire où se trouve le projet et entrez la commande suivante :

npm install d3

Cela téléchargera et installera automatiquement la bibliothèque d3.js dans le répertoire node_modules du projet.

Étape 2 : Introduire la bibliothèque d3.js

Une fois l'installation de la bibliothèque d3.js terminée, nous devons l'introduire dans le composant vue.js pour l'utiliser dans le projet. Ouvrez le composant qui doit introduire d3.js et ajoutez le code suivant en haut :

import * as d3 from "d3";

De cette façon, la bibliothèque d3.js a été introduite avec succès et vous pouvez commencer à utiliser les différentes API de d3.js.

Étape 3 : Créer un organigramme

Ensuite, créons un organigramme simple pour mieux comprendre comment dessiner des graphiques dans vue.js à l'aide de d3.js.

Tout d'abord, ajoutez le code suivant au composant pour créer une vue SVG :

created() {
  this.svg = d3
    .select('svg')
    .attr('width', this.width)
    .attr('height', this.height);
},
render() {
  return <svg></svg>;
},

Dans cet exemple, nous définissons un objet de données svg, utilisons la méthode d3.select() pour sélectionner l'élément SVG et utilisons l'attribut attr Définit la largeur et la hauteur de l'élément SVG sur les valeurs définies dans l'objet de données réactif.

Ensuite, créez une collection de données et ses nœuds, et câblez-les. Dans la fonction hook de cycle de vie montée du composant, ajoutez le code suivant :

mounted() {
  const dataset = {
    nodes: [
      { name: 'A' },
      { name: 'B' },
      { name: 'C' },
      { name: 'D' },
    ],
      edges: [
        { source: 0, target: 1 },
        { source: 1, target: 2 },
        { source: 2, target: 3 },
      ],
  };
  const nodes = this.svg.selectAll('circle')
    .data(dataset.nodes)
    .enter()
    .append('circle')
    .attr('cx', 100)
    .attr('cy', d => d.name.charCodeAt() * 10)
    .attr('r', 20)
    .style('fill', 'white')
    .style('stroke', 'black');
  const edges = this.svg.selectAll('line')
    .data(dataset.edges)
    .enter()
    .append('line')
    .attr('x1', d => nodes._groups[0][d.source].attributes.cx.value)
    .attr('y1', d => nodes._groups[0][d.source].attributes.cy.value)
    .attr('x2', d => nodes._groups[0][d.target].attributes.cx.value)
    .attr('y2', d => nodes._groups[0][d.target].attributes.cy.value)
    .attr('stroke', 'black')
    .attr('stroke-width', 1);
},

Dans cet exemple, nous utilisons l'API de d3.js pour créer un ensemble de données de collecte de données dans la vue SVG, comprenant quatre nœuds et trois liens les reliant. . côté.

Continuez à utiliser les sélecteurs d3.js et les méthodes de liaison de données pour afficher les données sous forme de nœuds circulaires et les connecter avec des lignes droites. Enfin, la position du nœud est déterminée en définissant les attributs cx et cy du nœud, et la couleur et l'épaisseur du bord sont définies par l'attribut trait.

Étape 4 : Exécutez le code

Enfin, exécutez le code pour voir si l'organigramme est dessiné normalement. Exécutez la commande suivante dans le terminal :

npm run serve

Ouvrez l'adresse dans le navigateur : http://localhost:8080, vous pouvez voir l'organigramme dessiné.

Conclusion :

Dans le processus d'utilisation de d3.js, les développeurs doivent maîtriser une série de ses API pour dessiner divers graphiques de visualisation de données complexes. Cependant, dans l'application vue.js, nous pouvons facilement installer et introduire la bibliothèque d3.js via npm, créer rapidement un organigramme et obtenir l'effet de mise à jour dynamique de la vue via la fonctionnalité de liaison de données de vue.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!