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

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

發佈 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
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 和 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"
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 生成 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();
    }
}
' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'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();
'	}
'}
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>
  );
};
"use client"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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"c, value: 30 }, { name: "B"c, value: 80 }, { name: "C"c, value: 45 }, { name: "D"c, value: 60 }, { name: "E"c, value: 20 }, { name: "F"c, value: 90 }, { name: "G"c, 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>); };
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#

程式碼解釋：

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

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

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

輸出

API:

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

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

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";
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here"
VB   C#

結論

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

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

使用 npm 安裝

版本：2024.11

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

免費 npm 安裝 查看許可證 >