D3.js 在 React 中的综合使用指南

作者：Charles Mahler / 用例
2023 年 1 月 18 日

导航至

Guide-to-D3js

可视化数据最灵活和强大的方式之一是通过 D3.js。作为 React 开发者，您可以使用数据驱动文档 (D3) 来增强利用数据的应用程序的呈现效果。

本指南将向您展示如何使用 D3.js 和 React 创建交互式和动态的数据可视化。然后，我们将回顾使用 React 和 D3.js 创建简单条形图的步骤。

通过本教程的学习，您将更好地理解如何使用 D3 和 React 创建交互式数据可视化。

什么是 D3.js？

D3.js 是一个 JavaScript 库，数据科学家和开发者可以使用它来创建交互式和动态的可视化。您可以使用它来创建各种图表和图形，例如网络图和条形图。

借助 D3.js，开发者可以创建根据其需求定制的自定义图表和图形。它具有灵活的 API，允许他们创建丰富且交互式的可视化。其内置功能包括支持渲染到 SVG 和 canvas 元素、交互和动画。

现在，数据科学家和开发者可以快速创建信息丰富且引人入胜的图表和图形，以帮助使复杂的数据更易于理解。

D3.js 是一个流行的 JavaScript 库，用于数据可视化。它在 GitHub 上排名在前 100 个最受欢迎的仓库中。埃森哲、Coinbase 和 Coursera 等公司将其用作其技术栈的一部分。总的来说，它是数据可视化行业的重要组成部分。

D3.js 可以与 React 一起使用吗？

是的，您可以使用 D3.js 和 React 创建交互式可视化。React 的各种优势使其成为创建数据演示的理想选择。它能够使用最少的代码构建交互式和复杂的 UI，这是一个主要的优势。这对于创建数据可视化尤其有用，在数据可视化中，您可以创建各种具有自身外观和行为的组件。

D3.js API 灵活而强大，使其成为想要创建自定义可视化的开发者的理想选择。借助 React 和 D3.js，您可以创建引人入胜且功能强大的数据演示，并享受许多好处，包括更好的可重用性和可维护性。

如何在 React 中使用 D3.js？

本指南假设您已安装 Node.js。如果未安装，您可以访问此链接。以下是您可以按照以下步骤开始使用 D3.js 和 React。

初始化您的应用并安装 D3.js

首先，您将使用 npx 创建一个 React 应用。

npx create-react-app example-d3

然后，您将切换到您创建的应用并安装 D3.js，如下所示

cd example-d3
npm install d3

创建 React 组件

安装 D3.js 库后，下一步是创建组件。此组件还应包含导入。

为什么要使用 useRef Hook？

useRef hook 允许您存储对 DOM 元素的引用。您将使用此 hook 来存储对 D3.js 可视化的引用，从而允许您从组件内部访问和操作它。

使用 useState Hook

您可以使用此 hook 来存储与可视化相关的数据，例如正在可视化的数据，并在状态更改时更新可视化。

使用 useEffect Hook

您可以使用 useEffect hook 在 React 组件上执行副作用。您可以通过设置组件中元素的位置和大小来执行此操作。它还可以创建 D3.js 可视化，以显示组件状态的变化。

创建条形图

要使用 React 和 D3 创建条形图，您可以使用 D3.js 库创建图表结构，然后使用 React 创建 svg 元素并将图表渲染到页面。

以下是如何使用 React 和 D3 创建条形图的示例

import React, { useState, useEffect } from "react";
import * as d3 from "d3";

const BarChart = () => {
  const [data, setData] = useState([
    {
      name: "A",
      value: 50,
    },
    {
      name: "B",
      value: 20,
    },
    {
      name: "C",
      value: 40,
    },
    {
      name: "D",
      value: 70,
    },
  ]);

  useEffect(() => {
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;

    const x = d3.scaleBand().range([0, width]).padding(0.1);
    const y = d3.scaleLinear().range([height, 0]);

    const svg = d3
      .select(".bar-chart")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(
      data.map(function (d) {
        return d.name;
      })
    );
    y.domain([
      0,
      d3.max(data, function (d) {
        return d.value;
      }),
    ]);

    svg
      .selectAll(".bar")
      .data(data)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", function (d) {
        return x(d.name);
      })
      .attr("width", x.bandwidth())
      .attr("y", function (d) {
        return y(d.value);
      })
      .attr("height", function (d) {
        return height - y(d.value);
      });

    svg
      .append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    svg.append("g").call(d3.axisLeft(y));
  }, [data]);

  return 
;
};
export default BarChart;

我们使用 useRef hook 创建对 div 元素的引用，我们将使用该元素来渲染图表。然后，在 useEffect hook 中，我们使用 D3 创建 svg 元素并将其附加到 div。然后，我们使用 D3 将数据绑定到 svg 元素并渲染图表。

定义数据后，我们现在可以使用 D3.js 创建条形图。为此，我们必须定义一些比例和轴，以将数据映射到 svg 元素。我们将使用线性比例将人口数据映射到条形的高度，并使用序数比例将国家/地区名称映射到 x 轴。我们还将定义一组轴以在图表上显示数据。

接下来，我们将使用 d3.select 方法选择 svg 元素。然后，我们将使用 .selectAll 和 .data 方法将数据绑定到 svg 元素。然后，我们将使用 .enter 方法创建一组表示图表条形的 rect 元素。我们将使用我们之前定义的比例和轴设置每个 rect 元素的 x 和 y 属性，并且我们还将使用数据值设置宽度和高度属性。

创建折线图

以下是如何使用 D3.js 创建折线图

import React, { useRef, useEffect } from "react";
import {
  select,
  line,
  curveCardinal,
  scaleLinear,
  axisBottom,
  axisLeft,
} from "d3";
//data
const data = [
  { x: 0, y: 10 },
  { x: 1, y: 20 },
  { x: 2, y: 15 },
  { x: 3, y: 25 },
  { x: 4, y: 30 },
];

//chart component
const LineChart = () => {
  //refs
  const svgRef = useRef();

  //draws chart
  useEffect(() => {
    const svg = select(svgRef.current);

    //scales
    const xScale = scaleLinear()
      .domain([0, data.length - 1])
      .range([0, 300]);

    const yScale = scaleLinear().domain([0, 100]).range([100, 0]);

    //axes
    const xAxis = axisBottom(xScale).ticks(data.length);
    svg.select(".x-axis").style("transform", "translateY(100px)").call(xAxis);

    const yAxis = axisLeft(yScale);
    svg.select(".y-axis").style("transform", "translateX(0px)").call(yAxis);

    //line generator
    const myLine = line()
      .x((d, i) => xScale(i))
      .y((d) => yScale(d.y))
      .curve(curveCardinal);

    //drawing the line
    svg
      .selectAll(".line")
      .data([data])
      .join("path")
      .attr("class", "line")
      .attr("d", myLine)
      .attr("fill", "none")
      .attr("stroke", "#00bfa6");
  }, [data]);

  return (
    

      <svg ref={svgRef}>
        
        
      </svg>
    

  );
};

export default LineChart;

useRef hook 引用了我们将用于渲染图表的元素。useEffect hook 将元素附加到变量。D3 创建一个 svg 元素并将数据传递给折线生成器。然后，我们将路径元素应用于 svg 以设置 d 属性并渲染折线。

在 useEffect hook 内部，D3 的 select() 方法用于选择 svg 元素并创建选择。然后，此选择用于绘制图表。

我们将使用 D3 的 scaleLinear() 方法创建比例。然后，我们使用 xScale 将数据点映射到 svg 元素的宽度。yScale 将数据点映射到 svg 元素的高度。

接下来，我们使用 D3 的 axisBottom() 和 axisLeft() 方法创建轴。xAxis 在 x 轴上显示 x 值，yAxis 在 y 轴上显示 y 值。

D3 的 line() 方法绘制点，创建一条连续的线。此折线生成器用于从数据点创建路径。curveCardinal() 方法用于平滑折线。

最后，使用 D3 的 selectAll() 和 join() 方法绘制折线。join() 方法用于绘制带有数据点的折线，selectAll() 方法用于选择具有该类的所有元素。然后，我们设置折线的属性，例如“fill”、“stroke”和“d”。

结论

D3 是一个用于基于数据操作文档的 JavaScript 库。D3 帮助您使用 HTML、SVG 和 CSS 将数据变为现实。D3 对 Web 标准的强调使您能够充分利用现代浏览器的功能，而无需将自己束缚于专有框架，它结合了强大的可视化组件和数据驱动的 DOM 操作方法。

React 专注于将您的 Web 应用程序组织成具有特定数据需求的不同视图，而 D3 使您能够使用相对简单的代码轻松创建有吸引力的可视化和基于浏览器的图形。

现在您已经了解了如何使用 D3.js 和 React，为什么不尝试一下呢？从小处着手，并尝试您可用的不同功能。您可能会对您能创造出的成果感到惊讶！没有比实践更好的学习方式了。

其他资源