在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
數據可視化是現代網頁開發中至關重要的一部分,有助於將複雜的數據集轉化為可理解和可操作的見解。在眾多可用的工具和庫中, D3.js (資料驅動文件) 在數據從業者中,因其強大且靈活的方法而在人群中脫穎而出,已經超過十年。當將 D3.js 與 React 結合使用時,您可以創建強大、可維護且高效的數據可視化應用程式。React 是一個流行的用於構建用戶界面的 JavaScript 庫。
本文將指導您如何將 D3.js 與 React 集成,以及這樣做如何幫助可視化數據。我們還會探討 IronPDF PDF生成庫,用於從網站URL生成PDF。
D3.js 是一個JavaScript函式庫,作為在網路瀏覽器中製作動態、互動數據驅動圖形視覺化的基礎建構模塊。它使用HTML、SVG和CSS通過各種類型的圖表將數據生動展示出來。D3提供了一個強大的框架,以將數據綁定到文件對象模型(Document Object Model)。 (DOM) 並對文檔應用數據驅動的轉換,並作為許多高級圖表庫的基礎。
React 是由 Facebook 建立的開源 JavaScript 庫。它允許開發者創建可重複使用的 UI 組件,有效管理狀態,並根據數據變化更新 DOM。
確保您的系統已安裝 Node.js 及 npm。如果未安裝,您可以從官方網站下載並安裝。 Node.js 網站.
首先,使用 Create React App 創建一個新的 React 應用程式,這是一個用來設置新的 React 專案且具有良好預設配置的工具。您可以在終端中使用以下指令來完成這個操作:
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
接下來,通過以下命令安裝D3.js npm套件:
npm install d3
npm install d3
IRON VB CONVERTER ERROR developers@ironsoftware.com
為了展示如何在 React 中使用 D3.js,我們將建立一個簡易條形圖。
在 `src` 資料夾中建立一個名為 `BarChart.js` 的新元件,並使用以下程式碼作為該元件的內容:
// 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
現在,在你的 `App.js` 檔案中使用 `BarChart` 元件並傳遞一些資料給它。
// 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
IronPDF 是一個強大的 npm 套件,專為在 Node.js 應用程式中方便生成 PDF 而設計。它能以無與倫比的靈活性從 HTML 內容、URL 或現有的 PDF 文件中創建 PDF 文檔。無論是生成發票、報告或其他文檔,IronPDF 都通過其直觀的 API 及廣泛的功能集簡化了這個過程。
HTML轉PDF轉換: 輕鬆將HTML內容轉換成PDF文件,非常適合從網頁內容生成動態PDF。
URL轉PDF轉換: 從URL直接創建PDF,程式化地捕捉網頁內容並將其另存為PDF文件。
PDF操作: 輕鬆地合併、拆分和操作現有的PDF文件。IronPDF允許您附加頁面、拆分文件等等。
PDF安全性: 通過使用密碼或數字簽名加密您的PDF文件,保護您的敏感文件免受未經授權的訪問。
高質量輸出: 生成高質量的PDF文件,精確渲染文本、圖像和格式,確保對原始內容的忠實度。
跨平台兼容性: IronPDF與包括Windows、Linux和macOS在內的多個平台兼容,適用於各種開發環境。
簡單集成: 使用npm包輕鬆將IronPDF集成到您的Node.js應用程序中。良好的文檔化API使得將PDF生成功能納入您的項目變得簡單明了。
無論您在構建web應用程序、服務器端脚本還是命令行工具,IronPDF都能幫助您高效且可靠地創建專業級的PDF文件。
安裝依賴項: 首先,創建一個新的 Next.js 項目 (如果您還沒有) 使用以下命令:
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
接著,導航至您的專案目錄:
cd d3charts-pdf
cd d3charts-pdf
IRON VB CONVERTER ERROR developers@ironsoftware.com
最後,安裝所需的套件:
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 Generation API: 首先需要建立一個後端 API 來生成 PDF 文件。由於 IronPDF 僅在伺服器端運行,我們需要創建一個 API 供用戶在需要生成 PDF 時調用。請在路徑 pages/api/pdf.js 中創建一個文件,並添加以下內容:
// 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 需要許可證金鑰,從這裡獲取 這裡 並且將其放置在上述代碼中。
將以下代碼添加到 index.js 文件中,以接受用戶提供的 URL,然後從給定的 URL 生成 PDF。以下代碼還展示了如何將 D3 生成的圖形添加到將接收用戶 URL 的 API 中。
"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
記得定義 D3BarChart 元件:
"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
程式碼說明:
我們創建一個 Next.js 應用並添加必要的套件,IronPDF 和 D3。
接著我們使用 D3 創建 BarChart 元件。
API:
此處生成的PDF 網址:
IronPDF 許可證允許用戶在購買前查看其廣泛的功能。 有關永久許可的更多詳情,請參閱 授權 頁面。
在此處放置許可證金鑰:
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
通過結合D3.js與React,您可以利用這兩個庫的優勢來創建強大且互動的數據可視化。React提供了一個構建用戶界面的強大框架,而D3.js則提供了廣泛的數據操作和可視化功能。使用NPM來管理依賴關係,確保您的項目具有可維護性和可擴展性。這個簡單的柱狀圖示例只是個開始;使用這些工具,您可以根據具體需求創建多種複雜且互動的數據可視化。