在 React 应用程序中为 D3.js 加载远程图表数据

2020-09-24 08:00:00 · 飞浪

本指南向您展示如何使用 D3-fetch（现代浏览器内置的标准 fetch API 的简单包装器）处理三种不同的数据格式。

介绍

D3.js 的核心是将数据与可视化结合起来，以便轻松理解和解释大型数据集。通常，这些数据集是动态的，并具有不同的格式。

在本指南中，您将学习如何在 React 应用中使用D3-fetch处理不同的数据格式。D3-fetch 是现代浏览器内置的标准 fetch API 的简单包装器；它使与不同文件格式的交互变得更加方便。

本指南以之前的指南《在 React 应用程序中使用 D3.js》为基础，您将学习如何使用静态内存数据在 D3.js 中设置简单的条形图。在这里，您将了解如何访问 JSON、CSV 和 XML 远程数据格式并将它们绑定到您的图表。数据来源于运输统计局。

获取 CSV 数据

逗号分隔值 (CSV) 是一种共享数据的常用格式，因为它简单易懂。要开始获取远程 CSV 数据，请启动 React 应用并将 CSV 文件放在/public文件夹中以在本地提供它。为此，请运行：

      yarn start

然后创建文件public/chart-data.csv并粘贴以下内容。

      year,efficiency,sales
1980,24.3,8949000
1985,27.6,10979000
1990,28,9303000
1991,28.4,8185000
1992,27.9,8213000
1993,28.4,8518000
1994,28.3,8991000
1995,28.6,8620000
1996,28.5,8479000
1997,28.7,8217000
1998,28.8,8085000
1999,28.3,8638000
2000,28.5,8778000
2001,28.8,8352000
2002,29,8042000
2003,29.5,7556000
2004,29.5,7483000
2005,30.3,7660000
2006,30.1,7762000
2007,31.2,7562000
2008,31.5,6769000
2009,32.9,5402000
2010,33.9,5636000
2011,33.1,6093000
2012,35.3,7245000
2013,36.4,7586000
2014,36.5,7708000
2015,37.2,7517000
2016,37.7,6873000
2017,39.4,6081000
    

您现在可以导航到 https://localhost:3000/chart-data.csv 来查看本地提供的数据。

通过提供 CSV 文件，您可以修改 React 代码并在图表中显示其数据。

将src/App.js更新为以下代码以获取 CSV 数据。

      import React from "react";
import BarChart from "./BarChart";
import * as d3 from "d3";
import "./App.css";

function App() {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    d3.csv("/chart-data.csv").then((d) => {
      setData(d);
      setLoading(false);
    });
    return () => undefined;
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        {loading && <div>loading</div>}
        {!loading && <BarChart data={data} />}
      </header>
    </div>
  );
}

export default App;
    

上面的代码片段演示了在加载App组件时获取 CSV 数据。加载组件时，默认状态为loading=true ，并向localhost:3000/chart-data.csv发出请求以获取数据。获取请求完成后，它会将应用程序的状态更新为loading=false，并显示传递检索到的数据的BarChart组件。

检索 JSON 数据

JSON 是另一种流行的数据共享格式。与 CSV 相比，它允许分层数据类型，但更冗长。要开始提供 JSON，请创建文件public/chart-data.json并添加以下内容。

      
  {"year": 1980
    

您已创建了一个 JSON 文件，其服务地址为 https://localhost:3000/chart-data.json，与 CSV 示例类似。要开始获取此数据，您只需对App.js进行少量修改。它看起来像下面的代码片段：

      import React from "react";
import BarChart from "./BarChart";
import * as d3 from "d3";
import "./App.css";

function App() {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    d3.json("/chart-data.json").then((d) => {
      setData(d);
      setLoading(false);
    });
    return () => undefined;
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        {loading && <div>loading</div>}
        {!loading && <BarChart data={data} />}
      </header>
    </div>
  );
}

export default App;
    

请注意，您仅将 URL 更改为/chart-data.json并将函数调用从d3.csv更改为d3.json。

获取 XML 数据

另一种常见的数据格式是 XML。这种格式可能比较冗长，因此不适用于新开发，在较旧的遗留系统中更常用。要提供这种格式，请创建文件public/chart-data.xml并添加以下内容。

      <?xml version="1.0" encoding="UTF-8"?>
<root>
   <element>
      <efficiency>24.3</efficiency>
      <sales>8949000</sales>
      <year>1980</year>
   </element>
   <element>
      <efficiency>27.6</efficiency>
      <sales>10979000</sales>
      <year>1985</year>
   </element>
   <element>
      <efficiency>28</efficiency>
      <sales>9303000</sales>
      <year>1990</year>
   </element>
   <element>
      <efficiency>28.4</efficiency>
      <sales>8185000</sales>
      <year>1991</year>
   </element>
   <element>
      <efficiency>27.9</efficiency>
      <sales>8213000</sales>
      <year>1992</year>
   </element>
   <element>
      <efficiency>28.4</efficiency>
      <sales>8518000</sales>
      <year>1993</year>
   </element>
   <element>
      <efficiency>28.3</efficiency>
      <sales>8991000</sales>
      <year>1994</year>
   </element>
   <element>
      <efficiency>28.6</efficiency>
      <sales>8620000</sales>
      <year>1995</year>
   </element>
   <element>
      <efficiency>28.5</efficiency>
      <sales>8479000</sales>
      <year>1996</year>
   </element>
   <element>
      <efficiency>28.7</efficiency>
      <sales>8217000</sales>
      <year>1997</year>
   </element>
   <element>
      <efficiency>28.8</efficiency>
      <sales>8085000</sales>
      <year>1998</year>
   </element>
   <element>
      <efficiency>28.3</efficiency>
      <sales>8638000</sales>
      <year>1999</year>
   </element>
   <element>
      <efficiency>28.5</efficiency>
      <sales>8778000</sales>
      <year>2000</year>
   </element>
   <element>
      <efficiency>28.8</efficiency>
      <sales>8352000</sales>
      <year>2001</year>
   </element>
   <element>
      <efficiency>29</efficiency>
      <sales>8042000</sales>
      <year>2002</year>
   </element>
   <element>
      <efficiency>29.5</efficiency>
      <sales>7556000</sales>
      <year>2003</year>
   </element>
   <element>
      <efficiency>29.5</efficiency>
      <sales>7483000</sales>
      <year>2004</year>
   </element>
   <element>
      <efficiency>30.3</efficiency>
      <sales>7660000</sales>
      <year>2005</year>
   </element>
   <element>
      <efficiency>30.1</efficiency>
      <sales>7762000</sales>
      <year>2006</year>
   </element>
   <element>
      <efficiency>31.2</efficiency>
      <sales>7562000</sales>
      <year>2007</year>
   </element>
   <element>
      <efficiency>31.5</efficiency>
      <sales>6769000</sales>
      <year>2008</year>
   </element>
   <element>
      <efficiency>32.9</efficiency>
      <sales>5402000</sales>
      <year>2009</year>
   </element>
   <element>
      <efficiency>33.9</efficiency>
      <sales>5636000</sales>
      <year>2010</year>
   </element>
   <element>
      <efficiency>33.1</efficiency>
      <sales>6093000</sales>
      <year>2011</year>
   </element>
   <element>
      <efficiency>35.3</efficiency>
      <sales>7245000</sales>
      <year>2012</year>
   </element>
   <element>
      <efficiency>36.4</efficiency>
      <sales>7586000</sales>
      <year>2013</year>
   </element>
   <element>
      <efficiency>36.5</efficiency>
      <sales>7708000</sales>
      <year>2014</year>
   </element>
   <element>
      <efficiency>37.2</efficiency>
      <sales>7517000</sales>
      <year>2015</year>
   </element>
   <element>
      <efficiency>37.7</efficiency>
      <sales>6873000</sales>
      <year>2016</year>
   </element>
   <element>
      <efficiency>39.4</efficiency>
      <sales>6081000</sales>
      <year>2017</year>
   </element>
</root>
    

要查询此数据，请更新App.js并将useEffect钩子更改为以下内容：

      React.useEffect(() => {
    d3.xml("/chart-data.xml").then((d) => {
      const chartData = [];
      for (const element of d.children[0].children) {
        chartData.push({
          efficiency: element.children[0].textContent,
          sales: element.children[1].textContent,
          year: element.children[2].textContent
        })
      }
      setData(chartData);
      setLoading(false);
    });
    return () => undefined;
  }, []);
    

请注意，我们已将 URL 更改为/chart-data.xml并将函数调用更改为d3.xml。此外，解析 XML 数据还需要一些额外的代码。这种解析代码样式容易出错，需要反复试验才能正确解析。最好以 JSON 或 CSV 格式检索数据，因为使用 JavaScript 更容易。

结论

从远程数据源绑定图表对于让您的网站看起来更具吸引力和动态非常重要。您已经学习了如何使用 JSON、CSV 和 XML 格式。下一步，您可能希望了解有关Fetch API 的更多信息，以执行更高级的交互，例如传递自定义标头和错误处理。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React 应用程序中为 D3.js 加载远程图表数据

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

year,efficiency,sales 1980,24.3,8949000 1985,27.6,10979000 1990,28,9303000 1991,28.4,8185000 1992,27.9,8213000 1993,28.4,8518000 1994,28.3,8991000 1995,28.6,8620000 1996,28.5,8479000 1997,28.7,8217000 1998,28.8,8085000 1999,28.3,8638000 2000,28.5,8778000 2001,28.8,8352000 2002,29,8042000 2003,29.5,7556000 2004,29.5,7483000 2005,30.3,7660000 2006,30.1,7762000 2007,31.2,7562000 2008,31.5,6769000 2009,32.9,5402000 2010,33.9,5636000 2011,33.1,6093000 2012,35.3,7245000 2013,36.4,7586000 2014,36.5,7708000 2015,37.2,7517000 2016,37.7,6873000 2017,39.4,6081000

import React from "react"; import BarChart from "./BarChart"; import * as d3 from "d3"; import "./App.css"; function App() { const [data, setData] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { d3.csv("/chart-data.csv").then((d) => { setData(d); setLoading(false); }); return () => undefined; }, []); return ( <div className="App"> <header className="App-header"> {loading && <div>loading</div>} {!loading && <BarChart data={data} />} </header> </div> ); } export default App;

import React from "react"; import BarChart from "./BarChart"; import * as d3 from "d3"; import "./App.css"; function App() { const [data, setData] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { d3.json("/chart-data.json").then((d) => { setData(d); setLoading(false); }); return () => undefined; }, []); return ( <div className="App"> <header className="App-header"> {loading && <div>loading</div>} {!loading && <BarChart data={data} />} </header> </div> ); } export default App;

<?xml version="1.0" encoding="UTF-8"?> <root> <element> <efficiency>24.3</efficiency> <sales>8949000</sales> <year>1980</year> </element> <element> <efficiency>27.6</efficiency> <sales>10979000</sales> <year>1985</year> </element> <element> <efficiency>28</efficiency> <sales>9303000</sales> <year>1990</year> </element> <element> <efficiency>28.4</efficiency> <sales>8185000</sales> <year>1991</year> </element> <element> <efficiency>27.9</efficiency> <sales>8213000</sales> <year>1992</year> </element> <element> <efficiency>28.4</efficiency> <sales>8518000</sales> <year>1993</year> </element> <element> <efficiency>28.3</efficiency> <sales>8991000</sales> <year>1994</year> </element> <element> <efficiency>28.6</efficiency> <sales>8620000</sales> <year>1995</year> </element> <element> <efficiency>28.5</efficiency> <sales>8479000</sales> <year>1996</year> </element> <element> <efficiency>28.7</efficiency> <sales>8217000</sales> <year>1997</year> </element> <element> <efficiency>28.8</efficiency> <sales>8085000</sales> <year>1998</year> </element> <element> <efficiency>28.3</efficiency> <sales>8638000</sales> <year>1999</year> </element> <element> <efficiency>28.5</efficiency> <sales>8778000</sales> <year>2000</year> </element> <element> <efficiency>28.8</efficiency> <sales>8352000</sales> <year>2001</year> </element> <element> <efficiency>29</efficiency> <sales>8042000</sales> <year>2002</year> </element> <element> <efficiency>29.5</efficiency> <sales>7556000</sales> <year>2003</year> </element> <element> <efficiency>29.5</efficiency> <sales>7483000</sales> <year>2004</year> </element> <element> <efficiency>30.3</efficiency> <sales>7660000</sales> <year>2005</year> </element> <element> <efficiency>30.1</efficiency> <sales>7762000</sales> <year>2006</year> </element> <element> <efficiency>31.2</efficiency> <sales>7562000</sales> <year>2007</year> </element> <element> <efficiency>31.5</efficiency> <sales>6769000</sales> <year>2008</year> </element> <element> <efficiency>32.9</efficiency> <sales>5402000</sales> <year>2009</year> </element> <element> <efficiency>33.9</efficiency> <sales>5636000</sales> <year>2010</year> </element> <element> <efficiency>33.1</efficiency> <sales>6093000</sales> <year>2011</year> </element> <element> <efficiency>35.3</efficiency> <sales>7245000</sales> <year>2012</year> </element> <element> <efficiency>36.4</efficiency> <sales>7586000</sales> <year>2013</year> </element> <element> <efficiency>36.5</efficiency> <sales>7708000</sales> <year>2014</year> </element> <element> <efficiency>37.2</efficiency> <sales>7517000</sales> <year>2015</year> </element> <element> <efficiency>37.7</efficiency> <sales>6873000</sales> <year>2016</year> </element> <element> <efficiency>39.4</efficiency> <sales>6081000</sales> <year>2017</year> </element> </root>

React.useEffect(() => { d3.xml("/chart-data.xml").then((d) => { const chartData = []; for (const element of d.children[0].children) { chartData.push({ efficiency: element.children[0].textContent, sales: element.children[1].textContent, year: element.children[2].textContent }) } setData(chartData); setLoading(false); }); return () => undefined; }, []);