【译】用 React 和 D3 建立图表

本文翻译自：
https://dzone.com/articles/charts-with-modern-react-and-d3

本文将介绍如何利用 D3JS 和 ReactJS 来建立基础图表。

ReactJS 是一个用于制做可重用 Web 组件的前端 JavaScript 库。它的思路是（经过 React Native）将 Web 应用程序（以及移动应用程序）分解为较小的、独立的、可重用的组件。它使开发和维护中型到大型 Web 应用程序变得容易得多。

D3JS 是一个基于数据的 JavaScript 图形库。它能够帮助将数据绑定到 HTML 元素（SVG）并使用该数据操做 HTML 元素。你能够单独（不使用 ReactJS 或任何其余 Web 框架）用它来建立几乎全部任何数据可视化工具和仪表板。可是，若是你将其与 ReactJS 结合使用，那么就能够建立一个基于 Web 的现代化数据仪表板。

在本文中，我将展现如何使用 D3JS 和 ReactJS 的功能建立基本图表。后续，我将继续展现如何彻底自定义图表并添加更多信息和交互内容。如今一切从简。让咱们一块儿进入数据报告和可视化的世界吧。

在可视化数据以前，咱们须要将数据传递给应用程序。现实生活中的应用程序，最有可能的是经过对服务器的 API 调用来完成此操做，从而向应用程序提供数据（一般为 JSON 或 XML 格式）。

这里我所举例的应用程序，数据存储在本地计算机上。我将使用 Node JS http 服务器来为其提供服务，以模拟真实的 API 调用。Http 服务器是一个用于设置服务器以提供静态文件的快速方法。我要作的就是建立一个文件夹（命名为 covid-data），存储数据文件（命名为 covid-data.csv），而后运行如下命令：

npx http-server --cors

注意：--cors 容许咱们从（React）应用程序向同一台计算机上的服务器（http-server）发出请求。若是删除此标志，根据 CORS 策略，全部请求都将被拒绝。

如今咱们已经运行了服务器并能够提供数据了。因此能够开始使用 React 和 D3 建立前端应用程序。

建立 React 应用程序的最佳方法是使用 Create React App：

npx create-react-app react-d3

完成此命令须要等待若干分钟。它将建立一个名为 react-d3 的新目录，并在其中建立一个基本的 React 应用程序。完成后，更改目录并启动应用程序：

Cd react-d3
Npm start

到这里，新的 React app 已经准备就绪，能够在端口3000上使用了。你只需启动浏览器，并确保经过访问如下连接来使其运行：

http://localhost:3000

你会看到React欢迎页面。

如今，咱们须要作的就是启动项目。

首先，让咱们尝试更改React的欢迎页面。打开 src / App.js，删除全部内容并将其替换为：

import React, { useEffect } from 'react';
import './App.css';
import draw from './draw'
function App() {
  useEffect(() => {
    draw()
  })
  return (
    <div className="App">
      <h1>D3 Simple Bar Chart</h1>
      <div id="chart-container"></div>
    </div>
  );
}
export default App;

在 return 方法中，咱们添加了一个id为“chart-component”的 div。咱们将使用 D3 在此处添加图表。

咱们还使用了一个名为“useEffect”的钩子，该钩子在类组件中基本上等效于“componentDidMount”和“componentDidUpdate”。在此钩子中，咱们运行“draw”函数，这个函数会运行咱们绘制图表所需的全部 d3 命令。固然，你也能够从 API 中获取数据，可是此处咱们使用 D3 在 draw 函数中来完成数据处理。

到目前为止，React 已经搞定了咱们建立图表所须要的基础设施。如今，让咱们看看如何使用D3获取数据并绘制图表。

在 src 文件夹中建立一个文件，并将其命名为“ draw.js”，而后将如下代码放入其中：

import * as d3 from 'd3'
async function draw () {
  const width = 800
  const height = 500
  const marginTop = 30
  const marginRight = 30
  const marginBottom = 30
  const marginLeft = 50
  const numOfCountries = 10
  const title = "COVID-19 Death Count"
  const svg = d3.select('#chart-container')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('background-color', '#D3D3D3')

  svg.append('text')
    .attr('x', (marginLeft + width + marginRight) / 2)
    .attr('y', marginTop / 2)
    .attr('dy', '0.33em')
    .text(title)
    .attr('text-anchor', 'end')
  const dawData = await d3.csv('http://127.0.0.1:8080/covid-data.csv')
  const data = dawData.filter(d => d.date === "2020-04-11" && d.location !== "World").sort((a, b) => b.new_deaths - a.new_deaths).filter((d, i) => i < numOfCountries).map(d => ({date: d.date, location: d.location, new_deaths: +d.new_deaths}))
  console.log(data)
  const xScale = d3.scaleBand()
    .domain(data.map(d => d.location))
    .range([marginLeft, width - marginRight])
    .padding(0.3)
  const xAxis = d3.axisBottom()
    .scale(xScale)

  svg.append('g')
    .attr('transform', 'translate(0,' + (height - marginBottom) + ')')
    .call(xAxis)

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.new_deaths)])
    .range([height - marginBottom, marginTop])

  const yAxis = d3.axisLeft()
    .scale(yScale)

  svg.append('g')
    .attr('transform', 'translate(' + marginLeft + ', 0)')
    .call(yAxis)

  svg
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => xScale(d.location))
    .attr('y', d => yScale(d.new_deaths))
    .attr('width', xScale.bandwidth())
    .attr('height', d => height - marginBottom - yScale(d.new_deaths))
    .attr('fill', 'yellow')
}
export default draw

我将逐行解释这些代码。

第1行导入全部的 d3 方法。

在第3行中，咱们定义了一个 draw 函数。并且在后面的第67行，咱们将导出此函数，以即可以在 App.js 文件中使用它。

在第5至12行中，咱们定义了用于图表外观和功能的全部常量。

在14到18行中，咱们选择id为“chart-component”（建立于“App.js”文件）的div，向其添加SVG元素，并设置其宽度，高度和背景颜色。

在第20至25行中，咱们将标题添加到 SVG，并将其放置在合适的位置。

在第27-29行中，咱们使用 d3.csv 方法经过 API 调用获取数据。而后，咱们对其进行过滤，排序和重组，并将其记录到控制台，以便咱们能够查看数据并确保其符合预期。稍后咱们可能会在将其投入生产以前删除第29行（即便咱们不这样作，在构建应用程序的生产版本时，React 也会自动删除全部 console.logs）。

在第31-34行中，咱们使用d3的极为有用的 scale 方法（在本例中就是 scaleBand）来定义 X 比例尺，以便咱们能够将数据点转换为图表上正确位置的实点。

随后，在第36-37行中，咱们定义了一个轴，在第39-41行中，咱们将该轴与 SVG 链接。在第43-52行，对 Y 轴执行彻底相同的操做。

最后，在第54-63行中，咱们选择 SVG（到目前为止是一个空集）上的全部 bar（矩形），将数据附加到 bar上，对于这些数据点，咱们将一个新 bar 附加到 SVG。而后，咱们调整每一个 bar 的x，y，宽度，高度和填充颜色。

就是这样。这是用 D3 和 React 建立的很是简单的图表。固然它缺乏许多功能，也不能交互，可是稍后咱们能够添加上去。本文的目的是向你们展现使用 D3 和现代 React 建立简单图表是多么容易。

（完）