Day7－D3 不同格式档资料汇入的API

本篇大纲：Fetch 档案的 API 们：d3.json( )、d3.csv( )、d3.tsv( )、d3.dsv( )

今天我们要来看到 D3 的另外一类 API 们：Fetches (d3-fetch)

前几篇讲到资料跟 DOM 元素如何绑定的时候，我们使用的资料都是自己设定，但实务上操作时，资料通常都是从後端提供的API、或是行销、PM 那边提供的 excel 档案而来，而且这些资料的架构复杂度也绝对跟我们自订的简单阵列不一样。所以接下来，我们就要介绍：

1. 如何取得从不同地方而来的资料
2. 该怎麽整理这些资料，变成我们能用的阵列格式

政府公开资料平台

在开始讲如何用 D3.js 取得不同档案资料前，我们要先有档案可以使用～所以，先来介绍几个不错的公开资料平台

1. 政府资料开放平台

   这是我自己最喜欢、觉得很好用的公开资料平台。可以根据自己想找的资料搜寻，而且每项资料後面也都会标注提供什麽样格式的档案，使用上非常方便
   

2. 各县市政府资料开放平台：台北市资料大平台、新北市政府资料开放平台
   近几年来开放资料的风气蛮盛行的，所以各县市大多也都有建立了开放资料的平台~有兴趣的人可以自己挑选想使用的市政府资料平台去玩玩看哦~

3. 内政资料开放平台
   老实说我觉得这个平台没有很好用，资料的查找上也比较复杂，不过有兴趣的还是可以用用看

4. 中央气象局-气象资料开放平台
   这个也是我很喜欢的网站~小缺点是想拿资料要先注册并登入，但画面的设计跟查找功能很好用，而且也包含最齐全的气象资料 (废话

以上是我觉得不错的网站，接下来我们来看看要怎麽取得资料吧！

取得资料的API

D3.js 为了方便大家取得不同来源的资料，针对不同资料的格式提供了不同的AP，我们这边就来看到最常用的几种：

• d3.json( )
• d3.csv( ) ⇒ 跟 d3.tsv( )、d3.dsv( ) 用法一样

d3.json(url, init) ⇒ 透过 API 取得 json 档案的资料

一般来说，我们绘制图表时，最常见使用的就是 API 回传的json资料，这边先以 政府资料开放平台 内提供的 新竹县政府水资源回收中心每日排放量 来示范

＊注意：如果你的 json 资料档直接存在自己的档案内，不需要透过呼叫 api 的方式取得，那就直接使用 d3.json('相对路径')就好，更方便也不会遇到 CORS 的问题。

首先，先找到「新竹县政府水资源回收中心每日排放量」的JSON档网址：
https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/1380/af80d954-d968-42a0-bc97-a2f801840b65.json

接着，再使用 d3.json 来取得资料

async function getCorsData() {
    dataGet = await d3.json("https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/1380/af80d954-d968-42a0-bc97-a2f801840b65.json");
    console.log('dataGet', dataGet);
  }
    getCorsData();

但是这时我们会看到 console 上出现了CORS 错误，这是浏览器设定的同源限制，禁止不同网域的服务器存取资料。如果不太清楚什麽是CORS错误，建议去看看 胡立写的CORS完全系列手册

如果你是用node.js来开发，或是有用其他前端框架来写D3.js，那我建议直接设定 proxy 来解决CORS问题；但因为我这边使用最简单的原生 JS 引入 d3.js CDN 来开发，而且也只需要 get 资料就好，因此我会借助 heroku-cors-anywhere 来解决CORS。

heroku-cors-anywhere 的方法很简单，直接将heroku-cors-anywhere设定好的网址加到我们要取得资料的网址之前就行

// 跨网域存取 API 资料
// 使用 cors-anywhere 
const cors = "https://cors-anywhere.herokuapp.com/";
const url = "https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/1380/af80d954-d968-42a0-bc97-a2f801840b65.json";

async function getCorsData() {
  dataGet = await d3.json(`${cors}${url}`);  // 串接网址
  console.log('dataGet', dataGet);
}
  getCorsData();

有些人用 https://cors-anywhere.herokuapp.com/ 这个网址时会遇到 403错误

这时也不用担心，只要将网址改成 https://secret-ocean-49799.herokuapp.com/ 就行了

// 跨网域存取 API 资料
// 使用 cors-anywhere 
const cors = 'https://secret-ocean-49799.herokuapp.com/'; 
const url = "https://ws.hsinchu.gov.tw/001/Upload/1/opendata/8774/1380/af80d954-d968-42a0-bc97-a2f801840b65.json";

async function getCorsData() {
  dataGet = await d3.json(`${cors}${url}`);
  console.log('dataGet', dataGet);
}
  getCorsData();

这样就能顺利取得资料啦～

d3.csv(url, init, funcion) ⇒ 取得 csv 档案的资料 （dsv、tsv档案也是一样用法）

另外一种很常见的资料格式是csv档案，这边我们用 政府资料开放平台 内提供的COVID-19各国家地区累积病例数与死亡数 来示范

下载好资料开放平台提供的csv档案之後，把它存到资料夹内，接着用 d3.csv( ) 这个方法取资料

// 拿取csv资料
const getCsvData = async ()=>{
  const csvData = await d3.csv('./covid19_global_cases_and_deaths.csv')
  console.log('csvData',csvData)
};
getCsvData()

这样就能在 console 中看到取得的资料了

值得注意的是，d3.csv( url , init, function) 可以带入三个参数，分别是「网址、顺序、函式」， 因此我们可以一样可以使用第三个 function 来设定一些条件。例如，我只想取得所有 country_ch 的值

// 拿取csv资料
  const getCsvData = async () => {
    const csvData = await d3.csv('./covid19_global_cases_and_deaths.csv', d=>{
      return d.country_ch // 只取country_ch
    })
    console.log('csvData',csvData)
  };
  getCsvData()

取出来的资料就会变成：

以上就是怎麽用 d3 的 API 去取资料啦，是不是很简单呢？d3.js 把困难的部分都帮我们做掉了，所以就能专注在之後的资料处理上罗！那今天的内容就到这边，想到中秋连假明天不用上班就觉得开心，可以专心地来赶稿啦！

Github Page 图表与 Github 程序码

这边附上本章的程序码与图表 Github 、 Github Page，需要的人请自行取用～这是的资料一样是看console 回传的内容唷，记得打开 devTool ～