1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. d3 NPM
節點幫助

d3 NPM（對開發者的運作方式）

Darrius Serrant
Darrius Serrant
2024年8月13日
分享:

介紹

資料視覺化是現代網路開發中一個至關重要的方面，有助於將複雜的資料集轉變為可理解且可採取行動的見解。 在眾多可用的工具和庫中，D3.js（數據驅動文檔）因其強大且靈活的方法，使得資料從業者十多年來在創建動態和互動式圖表上尤其突出。 結合 D3.js 和 React（用於構建用戶介面的流行 JavaScript 庫）時，您可以創建強大、可維護且高效的數據可視化應用程式。

本文將指導您如何將 D3.js 與 React 整合，以及如何幫助您可視化數據。 另外，我們將研究IronPDF PDF 生成庫以從網站 URL 生成 PDF。

什麼是D3.js？

D3.js 是一個 JavaScript 函式庫，作為製作動態、互動式數據驅動圖形可視化的基礎構件，用於網頁瀏覽器中。 它使用HTML、SVG和CSS透過各種類型的圖表和圖形將數據展現出來。D3提供了一個強大的框架，用於將數據綁定到文檔物件模型（DOM）並對文件應用數據驅動的轉換，它被用作許多高階圖表庫的基礎。

什麼是 React？

React 是一個由 Facebook 建立的開源 JavaScript 函式庫。 它允許開發者創建可重用的 UI 元件、高效地管理狀態，並根據數據的變化更新 DOM。

設定您的環境

確保您的系統上已安裝 Node.js 和 npm。 如果沒有，您可以從Node.js 官方網站下載並安裝它們。

步驟 1：創建一個新的 React 應用程式

首先，使用 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
SHELL

步驟 2：安裝 D3.js

接下來，通過以下命令安裝 D3.js npm 套件：

npm install d3
npm install d3
SHELL

建立簡單的條形圖

為了演示如何在 React 中使用 D3.js，我們將創建一個簡單的柱狀圖。

步驟 1：設定元件

在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;
js
JAVASCRIPT

步驟 2：使用元件

現在，在您的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;
js
JAVASCRIPT

輸出

d3 NPM（它如何為開發人員工作）：圖 1 - 輸出的條形圖

介紹 IronPDF

d3 NPM（對開發者的運作方式）：圖2 - IronPDF網頁

IronPDF 是一個強大的 npm 套件，專門用於在 Node.js 應用程式中生成 PDF。 它能夠提供無與倫比的靈活性，從 HTML 內容、URL 或現有的 PDF 文件創建 PDF 文件。 無論是生成發票、報告或其他文件，IronPDF 都透過其直觀的 API 和豐富的功能集簡化了這個過程。

IronPDF 的主要功能

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 文檔。

IronPDF 和 D3 npm 套件：輕鬆生成 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"
SHELL

接著，導航至您的專案目錄：

cd d3charts-pdf
cd d3charts-pdf
SHELL

最後，安裝所需的套件：

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

PDF 生成 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();
    }
}
js
JAVASCRIPT

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

記得定義 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 ;
  };
js
JAVASCRIPT

程式碼解釋：

  1. 我們創建了一個 Next.js 應用程式，並添加了必要的套件，IronPDF 和 D3。

  2. 然後我們使用 D3 創建 BarChart 組件。

  3. 新增輸入區域和按鈕以生成 PDF 文件。

輸出

API：

d3 NPM（它如何運作於開發者中）：圖 3 - D3 長條圖的輸入部分

從此 [IronPDF URL](/nodejs/) 生成的 PDF：

d3 NPM（它如何為開發者運作）：圖 4 - 由用戶提供的 URL 生成的 PDF

IronPDF 授權

d3 NPM（開發人員如何使用）：圖5 - IronPDF 授權頁面

IronPDF 試用許可證允許使用者在購買前查看其豐富的功能。 有關永久授權的更多詳情，請參閱 IronPDF 授權 頁面。

在此處放置授權金鑰：

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

結論

通過將D3.js與React結合，你可以利用這兩個庫的優勢來創建強大且具有交互性的数据可视化。 React 提供了構建使用者界面的強大框架，而 D3.js 提供了廣泛的數據操作和可視化能力。 使用 NPM 管理依賴項可確保您的專案具有可維護性和可擴展性。 這個簡單的條形圖範例僅僅是開始； 使用這些工具，您可以根據特定需求創建各種精緻且互動的數據可視化。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant 擁有邁阿密大學的計算機科學學士學位，目前擔任 Iron Software 的全端 WebOps 行銷工程師。自幼對編程產生興趣，他認為計算機既神秘又易於接觸，使其成為創造力和解決問題的完美媒介。

在 Iron Software，Darrius 享受創造新事物並簡化複雜概念使其更易理解的過程。作為我們的其中一位常駐開發人員，他也自願教導學生，將他的專業知識傳授給下一代。

對 Darrius 來說，他的工作之所以令人滿足，是因為它受到重視並且產生了真正的影響。

< 上一頁
recharts NPM（開發人員如何使用）
下一個 >
Lodash NPM（對開發者的運作方式）

使用 npm 安裝

版本：2025.5

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本： 2025.5 剛剛發布

免費開始
npm 下載 開始免費試用
查看許可證 >
Experience the full power of IronPDF 開始免費試用
Textlogo Iron Suite related to d3 NPM（對開發者的運作方式）

IronPDF 是 IRON 的一部分套件

10 .NET API 產品適用於您的辦公文檔

以兩件產品的價格獲得十件產品   開始免費試用