So installieren Sie d3 in Vue und erstellen ein Flussdiagramm

In den letzten Jahren hat vue.js als eines der wichtigsten technischen Frameworks in der Front-End-Entwicklung immer mehr Aufmerksamkeit und Liebe auf sich gezogen. Als dynamische datengesteuerte JavaScript-Bibliothek wird d3.js auch häufig in verschiedenen Datenvisualisierungsszenarien verwendet. Wie installiere und verwende ich d3.js in der vue.js-Anwendung? In diesem Artikel wird das Flussdiagramm der Vue-Installation d3 vorgestellt.

Schritt 1: Installieren Sie d3.js

Zuerst müssen Sie die d3.js-Bibliothek im vue.js-Projekt installieren, was über den npm-Paketmanager erreicht werden kann . Öffnen Sie das Terminal, geben Sie das Verzeichnis ein, in dem sich das Projekt befindet, und geben Sie den folgenden Befehl ein:

npm install d3

Dadurch wird die d3.js-Bibliothek automatisch heruntergeladen und im Verzeichnis node_modules im Projekt installiert.

Schritt 2: Einführung der d3.js-Bibliothek

Nachdem die Installation der d3.js-Bibliothek abgeschlossen ist, müssen wir sie in die vue.js-Komponente einführen, bevor dies möglich ist in das Projekt einbezogen werden. Verwenden Sie es. Öffnen Sie die Komponente, die d3.js einführen muss, und fügen Sie oben den folgenden Code hinzu:

import * as d3 from "d3";

Auf diese Weise wurde die d3.js-Bibliothek erfolgreich eingeführt und Sie können mit der Verwendung der verschiedenen beginnen APIs von d3.js.

Schritt 3: Erstellen Sie ein Flussdiagramm

Als nächstes erstellen wir ein einfaches Flussdiagramm, um besser zu verstehen, wie Sie d3.js in vue.js verwenden. Diagramme zeichnen.

Fügen Sie zunächst den folgenden Code zur Komponente hinzu, um eine SVG-Ansicht zu erstellen:

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

In diesem Beispiel definieren wir ein Datenobjekt SVG und verwenden die Methode d3.select( ). wählt ein SVG-Element aus und verwendet das attr-Attribut, um die Breite und Höhe des SVG-Elements auf die im responsiven Datenobjekt definierten Werte festzulegen.

Als nächstes erstellen Sie eine Datensammlung und ihre Knoten und verbinden sie. Fügen Sie in der montierten Lebenszyklus-Hook-Funktion der Komponente den folgenden Code hinzu:

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);
},

In diesem Beispiel verwenden wir die API von d3.js, um einen Datenerfassungsdatensatz in der SVG-Ansicht zu erstellen, einschließlich vier Knoten und drei sie verbindende Kanten.

Verwenden Sie weiterhin d3.js-Selektoren und Datenbindungsmethoden, um Daten als kreisförmige Knoten anzuzeigen und sie mit geraden Linien zu verbinden. Schließlich wird die Position des Knotens durch Definieren der cx- und cy-Attribute des Knotens bestimmt, und die Farbe und Dicke der Kante werden durch das Strichattribut festgelegt.

Schritt 4: Führen Sie den Code aus

Führen Sie abschließend den Code aus, um zu sehen, ob das Flussdiagramm normal gezeichnet wird. Führen Sie den folgenden Befehl im Terminal aus:

npm run serve

Öffnen Sie die Adresse im Browser: http://localhost:8080, Sie können das gezeichnete Flussdiagramm sehen.

Fazit:

Bei der Verwendung von d3.js müssen Entwickler die API-Reihe beherrschen, um verschiedene komplexe Datenvisualisierungsdiagramme zu zeichnen. In der Anwendung vue.js können wir jedoch die d3.js-Bibliothek einfach über npm installieren und einführen, schnell ein Flussdiagramm erstellen und über die Datenbindungsfunktion von vue.js den Effekt einer dynamischen Aktualisierung der Ansicht erzielen.

Das obige ist der detaillierte Inhalt vonSo installieren Sie d3 in Vue und erstellen ein Flussdiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!