d3 NPM (Wie es für Entwickler funktioniert)

Einführung

Die Datenvisualisierung ist ein entscheidender Aspekt der modernen Webentwicklung und hilft dabei, komplexe Datensätze in verständliche und umsetzbare Erkenntnisse umzuwandeln. Unter den verschiedenen verfügbaren Tools und Bibliotheken hebt sich D3.js (Data-Driven Documents) durch seinen leistungsstarken und flexiblen Ansatz zur Erstellung dynamischer und interaktiver Grafiken seit über einem Jahrzehnt bei Datenexperten hervor. Sie können robuste, wartbare und effiziente Datenvisualisierungsanwendungen erstellen, wenn Sie D3.js mit React, einer beliebten JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen, kombinieren.

Dieser Artikel führt Sie durch die Integration von D3.js mit React und zeigt, wie es bei der Visualisierung von Daten helfen kann. Außerdem werden wir die IronPDF PDF generation library untersuchen, um PDFs aus Website-URLs zu erstellen.

Was ist D3.js?

D3.js ist eine JavaScript-Bibliothek, die als grundlegender Baustein zur Erstellung von dynamischen, interaktiven, datengesteuerten Grafikvisualisierungen in Webbrowsern dient. Es verwendet HTML, SVG und CSS, um Daten durch verschiedene Arten von Diagrammen und Grafiken zum Leben zu erwecken. D3 bietet ein leistungsstarkes Framework zum Binden von Daten an ein Document Object Model (DOM) und zur Anwendung datengesteuerter Transformationen auf das Dokument und wird als Basis in vielen höherstufigen Diagrammbibliotheken verwendet.

Was ist React?

React ist eine Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde. Es ermöglicht Entwicklern, wiederverwendbare UI-Komponenten zu erstellen, den Status effizient zu verwalten und das DOM in Reaktion auf Datenänderungen zu aktualisieren.

Einrichten Ihrer Umgebung

Stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Falls nicht, können Sie sie von der offiziellen Node.js-Website herunterladen und installieren.

Schritt 1: Erstellen einer neuen React-Anwendung

Erstellen Sie zunächst eine neue React-Anwendung mit Create React App, einem Tool, das ein neues React-Projekt mit einer guten Standardkonfiguration einrichtet. Sie können die folgenden Befehle in Ihrem Terminal verwenden, um dies zu erreichen:

npx create-react-app d3-react-app
cd d3-react-app

npx create-react-app d3-react-app
cd d3-react-app

Schritt 2: D3.js installieren

Als nächstes installieren Sie das D3.js npm-Paket mit dem folgenden Befehl:

npm install d3

npm install d3

Erstellen eines einfachen Balkendiagramms

Um zu demonstrieren, wie man D3.js mit React verwendet, erstellen wir ein einfaches Balkendiagramm.

Schritt 1: Einrichten der Komponente

Erstellen Sie eine neue Komponente namens BarChart.js im src-Ordner und verwenden Sie den folgenden Code für die Komponente:

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
const BarChart = ({ data }) => {
  const svgRef = useRef();
  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };
    svg.attr('width', width).attr('height', height);
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());
    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);
  return ;
};
export default BarChart;

js

Schritt 2: Verwenden Sie die Komponente

Nun verwenden Sie die BarChart-Komponente in Ihrer App.js-Datei und übergeben Sie ihr einige Daten.

// src/App.js
import React from 'react';
import BarChart from './BarChart';
const App = () => {
  const data = [ // d3 data
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];
  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />// bind data
    </div>
  );
};
export default App;

js

Ausgabe

Einführung in IronPDF

IronPDF ist ein robustes npm-Paket, das entwickelt wurde, um die PDF-Erzeugung in Node.js-Anwendungen zu erleichtern. Es ermöglicht eine unvergleichliche Flexibilität bei der Erstellung von PDF-Dokumenten aus HTML-Inhalten, URLs oder vorhandenen PDF-Dateien. Ob Rechnungen, Berichte oder andere Dokumente, IronPDF vereinfacht den Prozess mit seiner intuitiven API und seinem umfangreichen Funktionsumfang.

Hauptmerkmale von IronPDF

HTML-zu-PDF-Konvertierung: Mühelos HTML-Inhalte in PDF-Dokumente umwandeln, ideal für die Erstellung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Konvertierung: Erstellen Sie PDFs direkt aus URLs, indem Sie den Inhalt von Webseiten erfassen und sie programmatisch als PDF-Dateien speichern.

PDF-Bearbeitung: Vorhandene PDF-Dokumente mühelos zusammenführen, teilen und bearbeiten. IronPDF ermöglicht es Ihnen, Seiten anzuhängen, Dokumente zu teilen und vieles mehr.

PDF-Sicherheit: Schützen Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden, um Ihre vertraulichen Dokumente vor unbefugtem Zugriff zu schützen.

Hochwertige Ausgabe: Erstellen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen, die die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität: IronPDF ist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine breite Palette von Entwicklungsumgebungen geeignet macht.

Einfache Integration: Integrieren Sie IronPDF problemlos in Ihre Node.js-Anwendungen mithilfe des npm-Pakets. Die gut dokumentierte API macht es einfach, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Ganz gleich, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilen-Tool entwickeln, IronPDF ermöglicht Ihnen die effiziente und zuverlässige Erstellung professioneller PDF-Dokumente.

IronPDF und D3 npm-Paket: PDF-Erzeugung leicht gemacht

Abhängigkeiten installieren: Erstellen Sie zuerst ein neues Next.js-Projekt (falls noch nicht geschehen) mit dem folgenden Befehl:

npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd d3charts-pdf

cd d3charts-pdf

Installieren Sie schließlich die erforderlichen Pakete:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Erstellung des PDF-Dokuments zu entwickeln. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer PDFs erzeugen wollen. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu:

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

IronPDF benötigt einen Lizenzschlüssel, den Sie von der Testlizenz-Seite erhalten und in den obigen Code einfügen können.

Fügen Sie den folgenden Code hinzu, um eine URL vom Benutzer zu akzeptieren und dann eine PDF-Datei aus der angegebenen URL in die index.js-Datei zu generieren. Der unten stehende Code zeigt auch, wie man ein D3-generiertes Diagramm der API hinzufügt, das die URL des Benutzers aufnimmt.

"use client";
import React from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";
import { useState, HTMLDivElement } from "react";
export default function D3Demo() {
  const [text, setText] = useState("");
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <h1>Bar Chart</h1>
      <D3BarChart data={data} />
      <p>
        <span>Enter Url To Convert to PDF:</span>{" "}
      </p>
      <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
};

js

Denken Sie daran, die Komponente D3BarChart zu definieren:

"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
export default function D3BarChart ({ data }) {
    const svgRef = useRef(); // ref svg element
    useEffect(() => {
      const svg = d3.select(svgRef.current);
      const width = 500;
      const height = 300;
      const margin = { top: 20, right: 30, bottom: 40, left: 40 };
      svg.attr('width', width).attr('height', height);
      const x = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([margin.left, width - margin.right])
        .padding(0.1);
      const y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .nice()
        .range([height - margin.bottom, margin.top]);
      const xAxis = g => g
        .attr('transform', `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x).tickSizeOuter(0));
      const yAxis = g => g
        .attr('transform', `translate(${margin.left},0)`)
        .call(d3.axisLeft(y))
        .call(g => g.select('.domain').remove());
      svg.append('g').call(xAxis);
      svg.append('g').call(yAxis);
      svg.append('g')
        .selectAll('rect')
        .data(data)
        .join('rect')
        .attr('x', d => x(d.name))
        .attr('y', d => y(d.value))
        .attr('height', d => y(0) - y(d.value))
        .attr('width', x.bandwidth())
        .attr('fill', 'steelblue');
    }, [data]);
    return ;
  };

js

Code-Erklärung:

1. Wir erstellen eine Next.js-App und fügen die notwendigen Pakete, IronPDF und D3, hinzu.

2. Dann erstellen wir die BarChart-Komponente mit D3.

3. Fügen Sie Eingabe und Schaltfläche hinzu, um das PDF-Dokument zu generieren.

Ausgänge

API:

PDF erstellt von dieser [IronPDF-URL](/nodejs/):

IronPDF-Lizenz

Die IronPDF-Testlizenz ermöglicht es Nutzern, die umfangreichen Funktionen vor dem Kauf auszuprobieren. Weitere Informationen zur unbefristeten Lizenzierung finden Sie auf der IronPDF Licensing-Seite.

Geben Sie hier den Lizenzschlüssel ein:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Schlussfolgerung

Durch die Kombination von D3.js mit React können Sie die Stärken beider Bibliotheken nutzen, um leistungsstarke und interaktive Datenvisualisierungen zu erstellen. React bietet ein robustes Framework für die Erstellung von Benutzeroberflächen, während D3.js umfangreiche Möglichkeiten zur Datenmanipulation und -visualisierung bietet. Der Einsatz von NPM zur Verwaltung von Abhängigkeiten stellt sicher, dass Ihr Projekt wartbar und skalierbar ist. Dieses Beispiel für ein einfaches Balkendiagramm ist nur der Anfang; mit diesen Tools können Sie eine Vielzahl anspruchsvoller und interaktiver Datenvisualisierungen erstellen, die auf Ihre speziellen Bedürfnisse zugeschnitten sind.