節點幫助

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

發佈 2024年8月13日

介紹

數據可視化是現代網頁開發中至關重要的一部分，有助於將複雜的數據集轉化為可理解和可操作的見解。在眾多可用的工具和庫中， D3.js (資料驅動文件) 在數據從業者中，因其強大且靈活的方法而在人群中脫穎而出，已經超過十年。當將 D3.js 與 React 結合使用時，您可以創建強大、可維護且高效的數據可視化應用程式。React 是一個流行的用於構建用戶界面的 JavaScript 庫。

本文將指導您如何將 D3.js 與 React 集成，以及這樣做如何幫助可視化數據。我們還會探討 IronPDF PDF生成庫，用於從網站URL生成PDF。

什麼是 D3.js？

D3.js 是一個JavaScript函式庫，作為在網路瀏覽器中製作動態、互動數據驅動圖形視覺化的基礎建構模塊。它使用HTML、SVG和CSS通過各種類型的圖表將數據生動展示出來。D3提供了一個強大的框架，以將數據綁定到文件對象模型（Document Object Model）。 (DOM) 並對文檔應用數據驅動的轉換，並作為許多高級圖表庫的基礎。

什麼是 React？

React 是由 Facebook 建立的開源 JavaScript 庫。它允許開發者創建可重複使用的 UI 組件，有效管理狀態，並根據數據變化更新 DOM。

設置您的環境

確保您的系統已安裝 Node.js 及 npm。如果未安裝，您可以從官方網站下載並安裝。 Node.js 網站.

第一步：創建一個新的 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

第2步：安裝D3.js

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

npm install d3

npm install d3

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

建立簡易條形圖

為了展示如何在 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;

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

VB C#

步驟 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;

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

VB C#

輸出

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 and D3 npm Package: PDF Generation Made Easy

安裝依賴項: 首先，創建一個新的 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

VB C#

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

cd d3charts-pdf

cd d3charts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

最後，安裝所需的套件：

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

VB C#

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

VB C#

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

VB C#

記得定義 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

VB C#

程式碼說明：

我們創建一個 Next.js 應用並添加必要的套件，IronPDF 和 D3。
接著我們使用 D3 創建 BarChart 元件。
添加輸入框和按鈕來生成 PDF 文件。

輸出

API:

d3 NPM（對開發者的工作方式）：圖3 - 帶有D3條形圖的輸入部分

此處生成的PDF 網址:

d3 NPM（開發者的工作原理）：圖4 - 從用戶給定的 URL 生成的 PDF

IronPDF License

d3 NPM（對開發人員的運作方式）：圖 5 - IronPDF 授權頁面

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

VB C#

結論

通過結合D3.js與React，您可以利用這兩個庫的優勢來創建強大且互動的數據可視化。React提供了一個構建用戶界面的強大框架，而D3.js則提供了廣泛的數據操作和可視化功能。使用NPM來管理依賴關係，確保您的項目具有可維護性和可擴展性。這個簡單的柱狀圖示例只是個開始；使用這些工具，您可以根據具體需求創建多種複雜且互動的數據可視化。

< 上一頁
recharts NPM（開發人員如何使用）

下一個 >
Lodash NPM（對開發者的運作方式）