HILFE ZUM KNOTENPUNKT

d3 NPM (Wie es für Entwickler funktioniert)

Name: IronPDF
Brand: Iron Software
Availability: InStock

Jordi Bardia

13. August 2024

Teilen Sie:

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,D3.js (Datengesteuerte Dokumente) zeichnet sich seit mehr als einem Jahrzehnt bei Datenexperten durch seinen leistungsstarken und flexiblen Ansatz zur Erstellung dynamischer und interaktiver Diagramme aus. 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 uns mit demIronPDF Bibliothek zur PDF-Erzeugung um PDFs aus Website-URLs zu generieren.

Was ist D3.js?

D3.js ist eine JavaScript-Bibliothek, die als grundlegender Baustein zur Erstellung dynamischer, interaktiver datengesteuerter 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 einen leistungsstarken Rahmen für die Bindung von Daten an ein Document Object Model(DOM) und die Anwendung von datengesteuerten Transformationen auf das Dokument, und es wird in vielen übergeordneten Diagrammbibliotheken als Grundlage 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 Website herunterladen und installierenNode.js-Website.

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

Schritt 2: D3.js installieren

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

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 Ordner src 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;

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

JAVASCRIPT

Schritt 2: Verwenden Sie die Komponente

Verwenden Sie nun die Komponente BarChart 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;

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

JAVASCRIPT

Ausgabe

d3 NPM(Wie es für Entwickler funktioniert): Abbildung 1 - Ausgegebenes Balkendiagramm

Einführung in IronPDF

d3 NPM(Wie es für Entwickler funktioniert): Abbildung 2 - IronPDF-Webseite

IronPDF ist ein robustes npm-Paket, das die PDF-Erzeugung in Node.js-Anwendungen erleichtert. 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: Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente, 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 programmgesteuert als PDF-Dateien speichern.

PDF-Bearbeitung: Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF ermöglicht es Ihnen, Seiten anzuhängen, Dokumente zu teilen und vieles 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.

Qualitativ hochwertige Ausgabe: Produzieren Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen, die dem Originalinhalt treu bleiben.

Plattformübergreifende Kompatibilität: IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine Vielzahl von Entwicklungsumgebungen.

Einfache Integration: Integrieren Sie IronPDF mit Hilfe des npm-Pakets einfach in Ihre Node.js-Anwendungen. 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 zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) 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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd d3charts-pdf

Installieren Sie schließlich die erforderlichen Pakete:

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

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. 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();
    }
}

// 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 auf der WebsiteTestlizenzseite und fügen Sie ihn in den obigen Code ein.

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

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

JAVASCRIPT

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

"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 ;
  };

JAVASCRIPT

Code-Erläuterung:

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

Ausgänge

API:

d3 NPM(Wie es für Entwickler funktioniert): Abbildung 3 - Eingabebereich mit dem D3-Balkendiagramm

PDF generiert aus diesem Text[IronPDF URL](/nodejs/):

d3 NPM(Wie es für Entwickler funktioniert): Abbildung 4 - Generierte PDF-Datei aus der vom Benutzer angegebenen URL

IronPDF-Lizenz

d3 NPM(Wie es für Entwickler funktioniert): Abbildung 5 - IronPDF-Lizenzseite

DieIronPDF Testlizenz ermöglicht es den Benutzern, die umfangreichen Funktionen vor dem Kauf zu testen. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der WebsiteIronPDF-Lizenzierung 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";

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

JAVASCRIPT

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.

Jordi Bardia

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Jordi beherrscht vor allem Python, C# und C++. Wenn er seine Fähigkeiten bei Iron Software nicht einsetzt, programmiert er Spiele. Durch seine Mitverantwortung für Produkttests, Produktentwicklung und Forschung trägt Jordi wesentlich zur kontinuierlichen Produktverbesserung bei. Die vielseitigen Erfahrungen, die er sammelt, bieten ihm immer wieder neue Herausforderungen, und er sagt, dass dies einer seiner Lieblingsaspekte bei Iron Software ist. Jordi wuchs in Miami, Florida, auf und studierte Informatik und Statistik an der University of Florida.

< PREVIOUS
recharts NPM (Wie es für Entwickler funktioniert)

NÄCHSTES >
Lodash NPM (Wie es für Entwickler funktioniert)