CSV - zziuni/d3 GitHub Wiki

Wiki ▸ API Reference ▸ CSV

# d3.csv(url, callback)

값을 콤마로 구분한 파일(CSV)를 HTTP GET으로 url 에 요청한다. 파일 내용은 RFC4180을 따른다고 가정한다. 요청 mime 타입은 "text/csv"이다. 요청이 비동기로 일어나므로 요청이 일어난 후에 바로 메서드가 반한된다. CSV 데이터가 사용가능해지면 callback 가 파싱된 열들을 전달인자로 받아서 호출된다. 에러가 발생하면 콜백함수는 null을 인자로 받아서 호출된다.

# d3.csv.parse(string)

CSV 파일의 내용에 해당하는 string 을 파싱해서 객체에 열 별로 담은 배열을 반환한다. 전달인자의 문자열은 RFC4180를 따른다고 가정한다. parseRows 메서드와 달리 이 메서드는 CSV 파일의 첫 줄이 콤마로 구분된 컬럼명이여야 한다. 그래야 그 컬럼명이 반환 객체의 속성명이 된다. 예를 들어 다음같은 CSV 파일의 경우.

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

결과 배열은 다음과 같다.

[
  {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]

주의할점은 값은 항상 문자열이며 자동으로 숫자로 변환되지 않는다. 자바스크립트는 자동으로 문자열을 숫자로 강제할 수 있다. (예를 들어, + 연산자를 사용해서) 아니면 다음처럼 반환 객체를 순회하며 문자열을 숫자로 변환해야 한다.

rows.forEach(function(o) {
  o.Year = parseInt(o.Year);
  o.Length = parseFloat(o.Length);
});

일반적으로 parseInt나 parseFloat 보다 + 연산자를 사용하면 더 빠르다. 비록 좀더 제한적이긴 하지만. 예를 들어 "30px"의 숫자 변경시도를 할 때, parseInt와 parseFloat가 30을 반환하는 데 반해서 + 연산자를 사용하면 NaN을 반환한다.

# d3.csv.parseRows(string[, accessor])

CSV 파일의 내용에 해당하는 string 을 파싱해서 열 별로 담은 배열의 배열을 반환한다. 이 문자열은 RFC4180-compliant를 따른다고 가정한다. parse와는 달리 이 메서드는 첫 라인을 데이터 라인으로 다룬다. 그러므로 해더가 없는 CSV 파일을 사용해야 한다. 각 열은 객체가 아닌 배열로 표현되므로 length 변수가 있다. 예를 들어 다음 CSV 파일을 보면

1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

결과값 배열 은 아래와 같다.

[
  ["1997", "Ford", "E350", "2.34"],
  ["2000", "Mercury", "Cougar", "2.38"]
]

결과의 값은 언제나 문자열이다. 자동으로 숫자로 변환되지 않는다. 자세한 내용은 parse를 참고하라.

두 번째 전달인자는 옵션 인자인 accessor 함수다. 이 함수는 해당 열과 색인 인자 두 개를 가지고 CSV 파일의 각 열별로 호출된다. 함수의 반환 값은 반환 데이터 열 배열의 원소를 교채한다. 함수가 null를 반환하면 그 열은 반환 데이터 열 배열에서 제거된다. 이런 면에서 accessor는 반환 데이터 열에 map과 filter 연산자를 적용하는 작업과 유사하다. accessor 함수는 속성명이 있는 객체로 각 열을 변환하기 위해서 parse를 사용할 때 사용된다.

# d3.csv.format(rows)

콤마로 구분된 값 형태의 문자열로 배열 rows 를 변환해서 반환한다. 이 연산자를 parseRows의 반대로 동작한다. 각 열은 개행((\n)으로 구분되고 열별 각 행은 콤마(,)로 구분된다. 콤마나 쌍따옴표("), 개행이 포함된 값은 쌍따옴표를 사용해서 문제를 우회한다.

# d3.tsv(url, callback)

d3.csv를 참조하라.

# d3.tsv.parse(string)

csv.parse를 참조하라.

# d3.tsv.parseRows(string[, accessor])

csv.parseRows를 참조하라.

# d3.tsv.format(rows)

csv.format를 참조하라.