1. IronPDF for Node.js
  2. IronPDF for Node.js博客
  3. 节点帮助
  4. d3 NPM
节点帮助

d3 NPM（开发人员如何使用）

发布 2024年八月13日
分享:

介绍

数据可视化是现代网络开发的一个重要方面，有助于将复杂的数据集转化为可理解和可操作的见解。 这些工具和库包括D3.js (数据驱动的文件)十多年来，在数据从业人员中，《Data Graphics》以其强大而灵活的方法创建动态和交互式图形而脱颖而出。 将 D3.js 与用于构建用户界面的流行 JavaScript 库 React 结合使用，您可以创建强大、可维护且高效的数据可视化应用程序。

本文将指导您将 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#

创建简单的柱形图

为了演示如何将 D3.js 与 React 结合使用，我们将创建一个简单的条形图。

步骤 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 生成功能整合到您的项目中。

无论您是在构建网络应用程序、服务器端脚本还是命令行工具，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：第一步是创建生成 PDF 文档的后台 API。 由于 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 需要许可证密钥，请从以下链接获取试用许可证页面并将其放入上述代码中。

添加以下代码以接受来自用户的 URL，然后从给定的 URL 生成 PDF 文件到 index.js。下面的代码还展示了如何在 API 中添加一个 D3 生成的图形，该图形将接受用户的 URL。

"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 许可page.

在此处放置许可证密钥：

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 安装 查看许可证 >