前端开发人员如何在React中使用D3？_reactd3

React 和 D3.js 都是 JavaScript 库，使开发人员能够创建引人入胜、可重用的数据可视化，如面积图、折线图、气泡图等。

 尽管 React 和 D3 在前端开发人员中非常流行，但这两个库一起使用可能具有挑战性。在本文中，我们将介绍如何在 React 中使用 D3，讨论为什么要使用 D3，并演示如何使用 D3 在 React 中创建图表。

我们将详细介绍以下内容：

• 什么是 D3.js 和 React？

• 为什么要使用 D3.js？

• 如何在 React 中使用 D3.js

  • 设置 React

  • 设置 D3.js

• 如何使用 D3 在 React 中制作图表.js

• 使用 D3.js 和 React 设置条形图

• 可视化数据

• 使用 D3.js 和 React 操作数据

• 向条形图添加标签

• 如何使图表在 React 和 D3 中可重用.js

什么是 D3.js 和 React？

D3.js 是一个 JavaScript 库，用于使用 HTML、CSS 和 SVG 创建动态的交互式数据可视化。D3 将数据绑定到 DOM 及其元素，使您能够通过更改数据来操作可视化效果。在撰写本文时，最新版本是 D3.js v7.7。

虽然 D3 对 Web 标准的关注使您能够利用现ipad平板怎么使用新手？ipad基本功能和使用方法代浏览器的全部功能，而不必将自己局限于专有框架，但 D3.js 和 React 通常一起使用，将动态数据可视化变为现实。

React 是一个开源的前端 JavaScript 库，用于构建复杂的用户界面和 UI 组件。它是一个声明性、高效且灵活的框架，允许您构建由简单、可重用的组件组成的复杂 UI。这些组件能够自行维护其状态。

有关帮助您开始使用 React 和 D3.js 的可视化指南，请查看下面的视频教程：

为什么要使用 D3.js？

数据可视化可帮助您使用形状、线条和颜色清晰如何复制光盘里的文件？如何复制光盘中的文件到另一张光盘？高效地传达信息。网络上有许多数据可视化工具，但 D3.js 赢得了无数前端开发人员的信任，使其成为 JavaScript 中数据可视化的实际选择。

D3.js 速度快如闪电，支持大型数据集和动态行为，使您能够使用动画和其他引人注目的功能促进用户交互。

如何在 React 中使用 D3.js

D3.js 和 React 一起使用可能具有挑战性，因为两个库都想要处理 DOM。它们都控制 UI 元素，并且以不同的方式进行控制。

在本文中，我们将学习如何通过使用这两个库构建一个简单的条形图来充分利用 React 和 D3 的独特优势。如何删除鼠标右键菜单多余的选项？鼠标右键自定义添加快捷方式首先，我们需要安装 React 和 D3。您可以在 GitHub 上找到已完成应用程序的完整代码。

设置 React

为了设置 React，我们将使用 Create React App 样板。运行以下代码以在本地计算机上全局安装它，以便可以重复使用它：

npm install -g create-react-app

接下来，我们将使用该模板创建一个新应用。请务必使用最新版本的 React，在撰写本文时是版本 18。请随意更改为项目目录的其他名称：create-react-app``react-d3

create-react-app react-d3

更改新创建项目中的目录：

cd react-d3

设置 D3.js

可以使用 CDN 或通过 npm 安装将 D3.js 库添加到应用中，如下所示。正如预期的那样，这将安装 D3.js 的最新稳定版本，在撰写本文时为 v7.7：

npm install d3

现在，我们可以开始使用 D3 在 React 中创建数据可视化。若要预览刚刚在默认浏览器上创建的应用，请运行以下代码：

npm start

上面的命令还将启用 Web 应用程序的热重载，这在摆弄代码时非常有用。

如何使用 D3 在 React 中制作图表.js

使用您喜欢的文本编辑器打开新创建的项目，然后导航到 ，这是当前在浏览器中呈现的组件。我们需要删除该方法返回的内容，该方法是 Web 应用的主要入口点，以便我们可以将其替换为我们自己的内容。src/App.js``App()

现在，让我们添加以下代码：

import BarChart from './BarChart'
​
const App = () => {
    return ( <BarChart /> )
}
export default App;

标签是将收集条形图的组件，也是条形图的呈现位置。在该文件夹中，创建一个名为 的新 JavaScript 文件。<BarChart>BartChart.jssrc``BarChart.js

使用 D3.js 和 React 设置条形图

首先，将以下代码添加到文件中：BarChart.js

import React, {Component} from 'react';
import * as d3 from "d3";
​
class BarChart extends Component {
​
}
​
export default BarChart;

为了在组件挂载到 DOM 中时显示条形图，我们将使用 ComponentDidMount 生命周期方法。BarChart

接下来，将以下代码添加到组件：BarChart

class BarChart extends Component {
​
  componentDidMount() {
    this.drawChart();
  }
}

drawChart是我们执行所有 D3.js 魔法的方法。通常，当使用 D3 时.js没有 React，你不必将 D3.js 代码放在方法中，但在 React 中，这一步很重要，确保图表仅在组件挂载到 DOM 上时才显示。

接下来，我们将创建方法，如下所示：drawChart

drawChart() {
​
  const data = [12, 5, 6, 6, 9, 10];
​
  const svg = d3.select("body").append("svg").attr("width", 700).attr("height", 300);
​
}

首先，我们定义变量，其中包含我们要可视化的数据。接下来，我们使用 D3.js 方法定义 SVG。我们使用 SVG 是因为它是可扩展的，这意味着无论屏幕有多大或放大多少以查看数据，它都不会显示为像素化。data

我们用于从文档中选择一个 HTML 元素。它选择与传递的参数匹配的第一个元素，并为其创建一个节点。在本例中，我们传递了元素，稍后我们将对其进行更改以使组件更可重用。d3.select()``body

该方法将 HTML 节点追加到所选项，并返回该节点的句柄。我们使用该方法向元素添加属性，这些属性可以是通常添加到 HTML 元素的任何属性，如、、、或。append()attrclassheightwidth``fill

然后，我们将一个 SVG 元素附加到带有 和 的元素中。在我们创建的 SVG 变量下，添加以下代码：bodywidth: 700height: 300

svg.selectAll("rect").data(data).enter().append("rect")

就像方法一样，选择与传递给它的参数匹配的元素。因此，将选择与参数匹配的所有元素，而不仅仅是第一个元素。select``selectAll()

接下来，我们使用该方法将作为参数传递的数据附加到选定的 HTML 元素。通常，找不到这些元素，因为大多数可视化处理动态数据，并且几乎不可能估计将要表示的数据量。data()

该方法将我们从该瓶颈中解救出来，因为它与该方法一起使用来创建缺少的节点并仍然可视化数据。enter()``append

可视化数据

到目前为止，我们已经为数组中的每个数据点创建了节点。剩下的就是让它可见。为此，我们需要为数据数组中的每个点创建一个柱线，设置宽度，并动态更新每个柱线的高度。

该方法允许我们使用回调函数来处理动态数据：attr

selection.attr("property", (d, i) => {})

在上面的行中，表示数据点值，并且是数组的数据点的索引。d``i

首先，我们需要将每个数据点设置在条形图的 x 轴和 y 轴上的特定点。我们使用 and 属性来实现这一点，其中表示条形沿 x 轴的位置，并表示条形沿 y 轴的位置。xyx``y

---

更多来自LogRocket的精彩文章：

• 不要错过重播的时刻，这是来自LogRocket的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音，主动解决应用中的问题

• 使用 React 的 useEffect 来优化应用程序的性能

• 在多个版本的节点之间切换

• 了解如何将 React 儿童道具与 TypeScript 一起使用

• 探索使用 CSS 创建自定义鼠标光标

• 顾问委员会不仅适用于高管。加入LogRocket的内容顾问委员会。您将帮助了解我们创建的内容类型，并获得独家聚会、社交认证和赃物的访问权限。

---

我们还需要设置每个数据点的宽度和高度。每个数据点的宽度是恒定的，因为条形的宽度相同。另一方面，高度取决于每个数据点的值。要使条形图显示每个数据点的值，我们必须使用回调函数。

我们将 SVG 变量修改为以下内容：

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 70)
  .attr("y", 0)
  .attr("width", 65)
  .attr("height", (d, i) => d)
  .attr("fill", "green");

对于 ，数组中数据点的每个索引都乘以一个常量整数 ，将每个柱线的位置移动 70，同时有一个常量值，我们稍后会更改该值。x70y

宽度还具有常量值 65，该值小于图表上每个元素的位置，从而在每个元素之间创建一个空格。条形的高度取决于数据集中每个条目的值。

使用 D3.js 和 React 操作数据

现在，我们创建了一个条形图。但是，我们有两个问题。首先，图表中的条形很小，图表也是倒置的。

为了解决这些问题，我们将每个基准面乘以一个常量值（例如 10），以增加每个条形的大小，而不会影响数据：

.attr("height", (d, i) => d * 10)

D3.js 和 React 条形图放大并倒置

接下来，我们需要解决条形倒置的问题。但在此之前，让我们首先了解为什么图表是倒置的。

SVG 位置从上到下，因此使用 of 属性将每个条形放在 SVG 元素的上边缘。y``0

要解决此问题，请从 SVG 元素的高度中减去每个条形的高度。请注意，这是我们从之前的计算中得到的高度：10 * d

.attr("y", (d, i) => 300 - 10 * d)

综上所述，组件将如下所示：BarChart

import React, { Component } from 'react'
import * as d3 from 'd3'
​
class BarChart extends Component {
    componentDidMount() {
        this.drawChart();
    }
    drawChart() {
        const data = [12, 5, 6, 6, 9, 10];
​
        const svg = d3.select("body")
                    .append("svg")
                    .attr("width", 700)
                    .attr("height", 300);
​
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 70)
            .attr("y", (d, i) => 300 - 10 * d)
            .attr("width", 65)
            .attr("height", (d, i) => d * 10)
            .attr("fill", "green");
    }
    render() {
        return <div id={"#" + this.props.id}></div>
    }
}
export default BarChart;

D3.js 和 React 条形图

现在，我们有一个基本的条形图。让我们更进一步，添加一些标签。

向条形图添加标签

若要添加标签，请将以下代码添加到函数中：drawChart

        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text((d) => d)
            .attr("x", (d, i) => i * 70)
            .attr("y", (d, i) => 300 - (10 * d) - 3)

这类似于我们为柱线所做的，但这次是附加的。条形图现在应如下所示：text

D3.js 和带有标签的 React 条形图

如何使图表在 React 和 D3 中可重用.js

React 最重要的原则之一是制作可重用的组件。为此，我们需要使组件独立于数据并使其成为参数。在这样做的过程中，我们还将摆脱常量中的所有依赖关系，例如图形的高度及其宽度。为此，我们将使用该机制。BarChart``props

现在，我们将修改以将参数传递给组件：App.js``BarChart

import BarChart from './BarChart'
​
const App = () => {
    return (<BarChart 
        data={[12, 5, 6, 6, 9, 10]}
        width={700}
        height={300}/>)
}
export default App;

我们一致地修改组件使用它们的方式。它们将在源文件的对象中可用：BarChartpropsBarChart.js

const data = this.props.data;

宽度和高度属性分别从下面的代码块更改为以下内容：

const svg = d3.select("body").append("svg").attr("width", 700).attr("height", 300);
​
​
const svg = d3.select("body").append("svg")
  .attr("width", this.props.width)
  .attr("height", this.props.height);

这样，我们可以在 React 应用程序中的任何位置重复使用条形图。

结论

在本文中，我们探讨了使用 D3.js 和 React 创建一个简单的条形图。然后，我们更进一步，使用标签自定义条形图。我们学习了如何解决 D3.js 和 React 配对时可能出现的一些问题，例如间距问题和图表反转。

尽管 D3.js 和 React 都是流行的库，可以很好地协同工作，但将它们配对可能会很棘手。希望本文能作为帮助您入门的指南。希望您喜欢这篇文章，如果您有任何问题，请务必发表评论。祝您编码愉快！