D3.js 데이터 로딩하는 함수

데이터를 로딩하는 D3함수 종류

• d3.csv(url [[ , row], callback])
• d3.tsv(url [[ , row], callback])
• d3.text(url [ , callback])
• d3.xml(url [ , callback])
• d3.html(url [ , callback])
• d3.json(url [ , callback])

 

데이터별로  가져오는 방법

• csv

const csvData = d3.csv("./data/movie.csv");
console.log("csv",csvData);

d3,csv함수는 Promise를 반환한다.

데이터를 가져오는 d3함수는 Promise를 반환한다.

그래서 async/await를 사용하는 것이 좋다.

async function getData() {
    const csvData = await d3.csv("./data/movie.csv");
    console.log("csv",csvData);
}

• html

async function getData() {
    const htmlData = await d3.html("./data/movie.html");
    console.log("html",htmlData);
}

html은 document로 데이터를 변환해서 가져온다.

여기서 원하는 데이터 위치를 가져와서 사용하면 된다.

 

• json

가장 많이 사용하는 json 함수다.

async function getData() {
    const jsonData = await d3.json("./data/movie.json");
    console.log("json",jsonData);
}

api로도 가능하다.

• tsv

 

async function getData() {
    const tsvData = await d3.tsv("./data/movie.tsv");
    console.log("tsv",tsvData);
}

• xml

async function getData() {
    const xmlData = await d3.xml("./data/movie.xml");
    console.log("xml",xmlData);
}

xml도 html과 유사하게 document 형식으로 받아온다.

아래와 같이 트리 형태로 받아온다.

• text

csv로 입력되어있던 데이터를 text형태로도 받아올 수 있다.

async function getData() {
    const textData = await d3.text("./data/movie.csv");
    console.log("text\n",textData);
}