D3 v5의 CSV 파일에서 데이터 로드

D3 v4에서는 XMLHttpRequest를 사용하여 CSV 파일에서 데이터를 로드하는 것이 간단했습니다. 그러나 D3 v5에 Promise가 도입되면서 프로세스가 약간 변경되었습니다.

D3 v5 사용

D3 v5를 사용하여 CSV 파일에서 데이터를 로드하려면 fetch() API를 활용할 수 있습니다. 코드를 수정하는 방법은 다음과 같습니다.

d3.csv('data/dataset.csv')
    .then(function(data) {
        if (error !== null) {
            alert ("Couldn't load the dataset!");
        } else {
            //do something
        };
    })
    .catch(function(error) {
        //handle error
    })

차이점 이해

D3 v4와 D3 v5의 주요 차이점은 비동기 요청을 처리하는 방식에 있습니다. D3 v4는 Promise를 반환하지 않는 XmlHttpRequest를 사용합니다. 결과적으로 요청이 완료되면 실행되는 콜백 함수를 전달합니다.

반대로 D3 v5는 성공 사례와 실패 사례를 별도로 처리할 수 있는 Promise API를 사용합니다. 'then()' 함수는 성공 사례를 처리하는 데 사용되며 'catch()'는 오류를 처리하는 데 사용됩니다.

예제

다음 코드 조각은 다음을 제공합니다. D3 v5를 사용하여 CSV 파일에서 데이터를 로드하는 방법에 대한 전체 예:

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

D3 v5는 Promise API를 활용하여 D3 v4에 비해 비동기 데이터 로드를 처리하는 더 구조적이고 유연한 방법을 제공합니다.