NODE-HILFE

d3 NPM (Wie es für Entwickler funktioniert)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Aktualisiert:Juli 28, 2025

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

Dieser Artikel führt Sie durch die Integration von D3.js mit React und wie es bei der Visualisierung von Daten helfen kann. Außerdem werfen wir einen Blick in die IronPDF PDF-Erzeugungsbibliothek, um PDFs aus Website-URLs zu erzeugen.

Was ist D3.js?

D3.js ist eine JavaScript-Bibliothek, die als grundlegender Baustein zur Erstellung dynamischer, interaktiver datengetriebener 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 datengetriebener Transformationen auf das Dokument, und es wird als Basis in vielen höheren Diagrammbibliotheken verwendet.

Was ist React?

React ist eine Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde. Es ermöglicht Entwicklern die Erstellung wiederverwendbarer UI-Komponenten, die effiziente Verwaltung des Zustands und die Aktualisierung des DOM als Reaktion auf Änderungen in den Daten.

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 Sie eine neue React-Anwendung

Erstellen Sie zuerst eine neue React-Anwendung mit Create React App, einem Tool, das ein neues React-Projekt mit einer guten Standardkonfiguration einrichtet. Folgende Befehle können Sie 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

SHELL

Schritt 2: Installieren Sie D3.js

Als Nächstes installieren Sie das D3.js-npm-Paket mit folgendem Befehl:

npm install d3

npm install d3

SHELL

Erstellen eines einfachen Balkendiagramms

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

Schritt 1: Richten Sie die Komponente ein

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

// BarChart component
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 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    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);

    // Create bars
    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 <svg ref={svgRef}></svg>;
};

export default BarChart;

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// BarChart component
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 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    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);

    // Create bars
    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 <svg ref={svgRef}></svg>;
};

export default BarChart;

JAVASCRIPT

Schritt 2: Verwenden Sie die Komponente

Verwenden Sie jetzt 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 = [
    { 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} />
    </div>
  );
};

export default App;

// src/App.js
import React from 'react';
import BarChart from './BarChart';

const App = () => {
  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 },
  ];

  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;

JAVASCRIPT

Ausgabe

d3 NPM (How It Works For Developers): Abbildung 1 - Ausgegebenes Balkendiagramm

Einführung in IronPDF

d3 NPM (How It Works For Developers): Abbildung 2 - IronPDF Webseite

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

Hauptfunktionen von IronPDF

HTML-zu-PDF-Konvertierung: Wandeln Sie HTML-Inhalte mühelos in PDF-Dokumente um, ideal zum Erzeugen dynamischer PDFs aus Web-Inhalten.
URL-zu-PDF-Konvertierung: Erstellen Sie PDFs direkt aus URLs, indem Sie die Inhalte von Webseiten erfassen und sie programmgesteuert als PDF-Dateien speichern.
PDF-Manipulation: Zusammenführen, Trennen und Manipulieren vorhandener PDF-Dokumente mit Leichtigkeit. IronPDF ermöglicht das Anfügen von Seiten, das Trennen von Dokumenten und mehr.
PDF-Sicherheit: Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.
Hochwertige Ausgabe: Erstellen Sie qualitativ hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierung und stellen Sie die Treue zum Originalinhalt sicher.
Plattformübergreifende Kompatibilität: IronPDF ist mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, kompatibel, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.
Einfache Integration: Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen unter Verwendung seines npm-Pakets. Die gut dokumentierte API macht es einfach, PDF-Erzeugungskapazitäten in Ihre Projekte zu integrieren.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Kommandozeilen-Tool erstellen, IronPDF befähigt Sie, professionelle PDF-Dokumente effizient und zuverlässig zu erstellen.

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

SHELL

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd d3charts-pdf

cd d3charts-pdf

SHELL

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

SHELL

API zur PDF-Erzeugung: Der erste Schritt ist die Erstellung einer Backend-API zur Erzeugung des PDF-Dokuments. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer PDFs erzeugen möchten. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den untenstehenden 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();
  }
}

// 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();
  }
}

JAVASCRIPT

IronPDF erfordert 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 erzeugen Sie dann ein PDF aus der angegebenen URL in der index.js-Datei. Der Code zeigt auch, wie ein mit D3 erzeugtes Diagramm hinzugefügt und eine Backend-API erstellt wird, die die URL des Benutzers akzeptiert.

// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

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>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}

// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

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>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}

JAVASCRIPT

Vergessen Sie nicht, die D3BarChart-Komponente zu definieren:

// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
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 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    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);

    // Create bars
    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 <svg ref={svgRef}></svg>;
}

// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
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 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    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);

    // Create bars
    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 <svg ref={svgRef}></svg>;
}

JAVASCRIPT

Code-Erklärung:

Wir erstellen eine Next.js-App und fügen notwendige Pakete hinzu, IronPDF und D3.
Dann erstellen wir die BarChart-Komponente mit D3.
Fügen Sie ein Eingabefeld und eine Schaltfläche hinzu, um das PDF-Dokument zu erzeugen.

Ausgabes

API:

d3 NPM (How It Works For Developers): Abbildung 3 - Eingabebereich mit dem D3-Balkendiagramm

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

d3 NPM (How It Works For Developers): Abbildung 4 - Erzeugtes PDF von der vom Benutzer angegebenen URL

IronPDF-Lizenz

d3 NPM (How It Works For Developers): Abbildung 5 - IronPDF-Lizenzseite

Die IronPDF-Testlizenz ermöglicht es Benutzern, die umfangreichen Funktionen vor dem Kauf zu testen. Weitere Informationen zur immerwährenden Lizenzierung finden Sie auf der IronPDF Lizenzierungs-Seite.

Platzieren Sie den Lizenzschlüssel hier:

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

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

JAVASCRIPT

Abschluss

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 den Aufbau von Benutzeroberflächen, während D3.js umfangreiche Möglichkeiten zur Datenmanipulation und -visualisierung bietet. Mit NPM zur Verwaltung von Abhängigkeiten wird sichergestellt, dass Ihr Projekt wartbar und skalierbar bleibt. Dieses Beispiel eines einfachen Balkendiagramms ist nur der Anfang; mit diesen Tools können Sie eine breite Palette anspruchsvoller und interaktiver Datenvisualisierungen erstellen, die auf Ihre spezifischen Bedürfnisse zugeschnitten sind.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...