D3.js 在 React 中的综合指南

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

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

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

本教程结束时，您将更好地理解如何使用 D3 和 React 创建交互式数据可视化。

D3.js 是什么？

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

D3.js 允许开发者创建符合其需求的定制图表和图形。它具有灵活的 API，使他们能够创建丰富和交互式的可视化。其内置功能包括对 SVG 和 canvas 元素的渲染支持、交互和动画。

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

D3.js 的流行程度如何？

D3.js 是一个用于数据可视化的流行 JavaScript 库。它在 GitHub 上排名前 100 个最受欢迎的存储库之一。Accenture、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 钩子允许您存储对 DOM 元素的引用。您将使用此钩子来存储 D3.js 可视化的引用，以便您可以在组件内部访问和操作它。

使用 useState 钩子

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

使用 useEffect 钩子

您可以使用 useEffect 钩子在 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 钩子创建一个引用到 div 元素，我们将使用它来渲染图表。然后，在 useEffect 钩子中，我们使用 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 钩子引用了一个我们将用于渲染图表的元素。useEffect 钩子将元素附加到变量中。D3 创建一个 svg 元素并将数据传递给线生成器。然后我们将路径元素应用于 svg 以设置 d 属性并渲染线条。

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

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

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

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

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

结论

D3是一个基于数据的JavaScript库，用于操作文档。D3可以帮助您使用HTML、SVG和CSS使数据生动起来。D3对网络标准的强调，让您能够利用现代浏览器全部功能，而无需绑定到任何专有框架，它结合了强大的可视化组件和基于数据的DOM操作方法。

React专注于将您的Web应用程序组织成具有特定数据需求的视图，而D3则允许您通过相对简单的代码轻松创建吸引人的视觉化和基于浏览器的图形。

既然您已经学会了如何使用D3.js和React，为什么不试试呢？从小处着手，实验您可用的不同功能。您可能会对您能创造出什么感到惊讶！实践是最好的学习方式。

其他资源

• Matplotlib教程

• PlotlyJS教程

• Streamlit教程

• ChartJS教程

• Highcharts教程

• Recharts教程

• Nivo教程

• Victory React Native教程

• Echarts教程