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, 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 dem IronPDF PDF-Generierungsbibliothek zur Erzeugung von PDFs aus Website-URLs.

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 installieren Node.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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 mit dem Namen "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;

IRON VB CONVERTER ERROR developers@ironsoftware.com

Schritt 2: Verwenden Sie die Komponente

Verwenden Sie nun die Komponente "BarChart" in Ihrer Datei "App.js" 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;

IRON VB CONVERTER ERROR developers@ironsoftware.com

Ausgabe

Einführung in IronPDF

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"

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd d3charts-pdf

cd d3charts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

IronPDF benötigt einen Lizenzschlüssel, den Sie unter *hier 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>
  );
};

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Code-Erläuterung:

1. Wir erstellen eine neue JS-Anwendung und fügen die erforderlichen Pakete, IronPDF und D3, hinzu

2. Dann erstellen wir die BarChart-Komponente mit D3

3. Eingabe und Schaltfläche zur Erstellung des PDF-Dokuments hinzufügen

Ausgänge

API:

Das daraus generierte PDF URL:

IronPDF-Lizenz

IronPDF lizenz, damit die Benutzer die umfangreichen Funktionen vor dem Kauf testen können. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der Website Lizenz 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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

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.