节点帮助

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

发布 2024年八月13日

介绍

数据可视化是现代 web 开发的一个关键方面，有助于将复杂的数据集转化为可以理解和可操作的洞察。在各种可用的工具和库中， D3.js (数据驱动的文件) 以其强大且灵活的方法在数据从业者中脱颖而出，十多年来一直用于创建动态和交互式图表。当您将D3.js与React（一个用于构建用户界面的流行JavaScript库）结合使用时，可以创建健壮、易于维护且高效的数据可视化应用程序。

本文将指导您如何将D3.js与React结合使用，以及它如何帮助进行数据可视化。此外，我们还将探讨... IronPDF 从网站URL生成PDF的PDF生成库。

什么是D3.js？

D3.js 是一个JavaScript库，作为生成动态、互动、数据驱动的图形可视化在网页浏览器中的基础构建模块。它使用HTML、SVG和CSS通过各种类型的图表和图形使数据变得栩栩如生。D3提供了一个功能强大的框架，将数据绑定到文档对象模型。 (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，我们将创建一个简单的柱状图。

第一步：设置组件

在 `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只能在服务器端运行，当用户想生成PDF时，我们需要创建一个API来调用。在路径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 许可证

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（如何为开发人员工作）