【譯】用 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 建立簡單圖表是多麼容易。

（完）