D3JsDay08做为视觉化图表的燃料，从网路撷取档案的资料—fetch Data

浅谈原始码

D3包装了Javascript的fetchAPI来撷取资料我们这里可以看到D3Js的原始码为以下片段，不难看出它是return了fetchAPI

function json(input, init) {
  return fetch(input, init).then(responseJson);
}

另外也可以参见d3原始码的部分

function dsv(delimiter, input, init, row) {
  if (arguments.length === 3 && typeof init === "function") row = init, init = undefined;
  var format = d3Dsv.dsvFormat(delimiter);
  return text(input, init).then(function(response) {
    return format.parse(response, row);
  });
}

从中可以理解如果没有带入init物件参数而且第二个参数是function就会当作是转换函式

dsv的API reference说明文件下方有写到

参见d3.dsv API reference

常见的撷取元素

这边以常见的撷取档案来做简单说明

其他可以fetch的资料参见官方API说明

d3-fetchAPI官方文件

撷取资料

以下就D3来获取资料，需要注意的地方是由於是开启URL因此必须使用服务器的方式请求你的档案，例如Visual Studio Code的套件LiveServer或者使用Apache开启服务器
撷取资料方法如下

撷取JSON档案

const data = d3.json("populationDensity.json");
  data.then((data) => {
      console.log(data);
      return data;
  });

另外也可以支援使用async await的方式使用，这边接一个立即函式(IIFE)来执行它

const fn = async function (){
  const data = await d3.json("populationDensity.json");
  await console.log(data);
}();

撷取CSV档案

程序码如下

const data = d3.csv("populationDensity.csv");
data.then((data)=>{
    console.log(data);
})

我们可以看到它会回传一个阵列形式如下图

因此也可以使用console.table来观看
程序码如下

const data = d3.csv("populationDensity.csv");
data.then((data)=>{
    console.table(data);
})

结果就会如下图呈现表格的形式了

撷取html

程序码如下

const data = d3.html("hello.html");
data.then((data)=>{
    console.log(data);
})

可以发现它会自动解析成HTML的Element

撷取image

程序码如下

const data = d3.image("test.jpg");
data.then((data)=>{
    console.log(data);
})

这里可以发现它会自动解析成HTML的img元素

如果对於Fetch的init参数有兴趣的话可以看制定HTML标准的协会所写的spec

Fetch Standard

另外也可以参考MDN的说明文件

MDN的fetchAPI

以上介绍比较常见的撷取资料格式，接下来将会提到资料绑定的部分。