d3 NPM (jak to działa dla programistów)
Wizualizacja danych jest kluczowym aspektem nowoczesnego tworzenia stron internetowych, pomagając przekształcić złożone zestawy danych w zrozumiałe i wykonalne wnioski. Wśród dostępnych narzędzi i bibliotek D3.js (Data-Driven Documents) wyróżnia się potężnym i elastycznym podejściem do tworzenia dynamicznych i interaktywnych wykresów przez ponad dekadę wśród praktyków danych. Możesz tworzyć solidne, łatwe w utrzymaniu i wydajne aplikacje do wizualizacji danych, łącząc D3.js z React, popularną biblioteką JavaScript do tworzenia interfejsów użytkownika.
Ten artykuł poprowadzi cię przez integrację D3.js z React i jak może to pomóc w wizualizacji danych. Również przyjrzymy się bibliotece generowania PDF IronPDF, aby generować PDFy z adresów URL stron internetowych.
Co to jest D3.js?
D3.js to biblioteka JavaScript pełniąca rolę podstawowego bloku do tworzenia dynamicznych, interaktywnych wizualizacji danych w przeglądarkach internetowych. Używa HTML, SVG i CSS, aby ożywić dane za pomocą różnych rodzajów wykresów i diagramów. D3 zapewnia potężne ramy do wiązania danych z modelem obiektowym dokumentu (DOM) i stosowania transformacji danych do dokumentu, i jest używana jako baza w wielu bibliotekach wykresów wyższego poziomu.
Co to jest React?
React to otwartoźródłowa biblioteka JavaScript stworzona przez Facebook. Umożliwia programistom tworzenie wielokrotnego użytku komponentów interfejsu użytkownika, efektywne zarządzanie stanem i aktualizowanie DOM w odpowiedzi na zmiany danych.
Konfiguracja środowiska
Upewnij się, że Node.js i npm są zainstalowane w twoim systemie. Jeśli nie, możesz je pobrać i zainstalować z oficjalnej strony Node.js.
Krok 1: Utwórz nową aplikację React
Najpierw utwórz nową aplikację React za pomocą Create React App, narzędzia, które ustawia nowy projekt React z dobrą domyślną konfiguracją. Możesz użyć następujących poleceń w terminalu, aby to osiągnąć:
npx create-react-app d3-react-app
cd d3-react-appnpx create-react-app d3-react-app
cd d3-react-appKrok 2: Zainstaluj D3.js
Następnie zainstaluj paczkę npm D3.js za pomocą następującego polecenia:
npm install d3npm install d3Tworzenie prostego wykresu słupkowego
Aby pokazać, jak używać D3.js z React, stworzymy prosty wykres słupkowy.
Krok 1: Skonfiguruj komponent
Utworz nowy komponent o nazwie BarChart.js w folderze src i uzyj ponizszego kodu do tego komponentu:
// 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;Krok 2: Użyj komponentu
Teraz uzyj komponentu BarChart w swoim pliku App.js i przekaz mu jakies dane.
// 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;Wynik
Przedstawiamy IronPDF
IronPDF to solidna paczka npm zaprojektowana, aby ułatwić generowanie PDFów w aplikacjach Node.js. Umożliwia niezrównaną elastyczność przy tworzeniu dokumentów PDF z zawartości HTML, URL lub istniejących plików PDF. Niezależnie od tego, czy chodzi o generowanie faktur, raportów czy innych dokumentów, IronPDF upraszcza ten proces dzięki intuicyjnemu API i bogatemu zestawowi funkcji.
Najważniejsze cechy IronPDF
Konwersja HTML do PDF: Łatwe konwertowanie treści HTML na dokumenty PDF, idealne do generowania dynamicznych plików PDF z treści internetowych.
Konwersja adresów URL na pliki PDF: Twórz pliki PDF bezpośrednio z adresów URL, przechwytując zawartość stron internetowych i zapisując je programowo jako pliki PDF.
Manipulacja plikami PDF: Łatwe scałanie, dzielenie i edycja istniejących dokumentów PDF. IronPDF umożliwia dodawanie stron, dzielenie dokumentów i wiele więcej.
Zabezpieczenia plików PDF: Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe, chroniąc w ten sposób poufne dokumenty przed nieuprawnionym dostępem.
Wysoka jakość wyników: Twórz wysokiej jakości dokumenty PDF z precyzyjnym odwzorowaniem tekstu, obrazów i formatowania, zapewniając wierność oryginalnej treści.
Kompatybilność międzyplatformowa: IronPDF jest kompatybilny z różnymi platformami, w tym Windows, Linux i macOS, dzięki czemu nadaje się do szerokiego zakresu środowisk programistycznych.
- Prosta integracja: Łatwo zintegruj IronPDF ze swoimi aplikacjami Node.js, korzystając z pakietu npm. Dobrze udokumentowany interfejs API ułatwia włączenie funkcji generowania plików PDF do projektów.
Niezależnie od tego, czy tworzysz aplikację internetową, skrypt po stronie serwera, czy narzędzie wiersza poleceń, IronPDF umożliwia wydajne i niezawodne tworzenie profesjonalnych dokumentów PDF.
IronPDF i paczka npm D3: Łatwe generowanie PDFów
Zainstaluj zależności: Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś) za pomocą następującego polecenia:
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"Następnie przejdź do katalogu projektu:
cd d3charts-pdfcd d3charts-pdfNa koniec zainstaluj wymagane paczki:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3API do generowania plików PDF: Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentów PDF. Ponieważ IronPDF działa tylko po stronie serwera, musimy stworzyć API do wywołania, gdy użytkownicy chcą generować PDFy. Utworz plik na sciezce pages/api/pdf.js i dodaj ponizsza zawartosc:
// 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();
}
}IronPDF wymaga klucza licencyjnego, który możesz zdobyć na stronie licencji próbnej i umieścić go w powyższym kodzie.
Dodaj ponizszy kod, aby zaakceptowac URL od uzytkownika, a nastepnie wygenerowac plik PDF z podanego URL w pliku index.js. Kod pokazuje rowniez, jak dodac wykres wygenerowany przez D3 oraz backendowe API, ktore przyjmie uzytkownika URL.
// 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>
);
}Pamietaj, aby zdefiniowac komponent D3BarChart:
// 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>;
}Objaśnienie kodu:
- Tworzymy aplikację Next.js i dodajemy niezbędne paczki, IronPDF i D3.
- Następnie tworzymy komponent BarChart z użyciem D3.
- Dodajemy wejście i przycisk do generowania dokumentu PDF.
Wyjścia
API:
PDF wygenerowany z tego [URL IronPDF](/nodejs/):
Licencja IronPDF
Licencja próbna IronPDF pozwala użytkownikom sprawdzić jej rozbudowane funkcje przed zakupem. Więcej szczegółów na temat licencji wieczystej znajdziesz na stronie licencjonowania IronPDF.
Umieść tutaj klucz licencyjny:
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";Wnioski
Łącząc D3.js z React, można wykorzystać moc obu bibliotek do tworzenia potężnych i interaktywnych wizualizacji danych. React zapewnia solidne ramy do budowania interfejsów użytkownika, podczas gdy D3.js oferuje rozbudowane możliwości manipulacji i wizualizacji danych. Korzystanie z NPM do zarządzania zależnościami zapewnia, że twój projekt jest łatwy do utrzymania i skalowalny. Ten przykład prostego wykresu słupkowego to dopiero początek; za pomocą tych narzędzi można tworzyć szeroki wachlarz wyrafinowanych i interaktywnych wizualizacji danych dostosowanych do twoich specyficznych potrzeb.
Rozpocznij za DARMO
Rozpocznij za DARMO
Zarezerwuj darmowe Demo na żywo
Nie wymaga karty kredytowej ani tworzenia konta
