[D3.js] JSON 파일 읽는법
D3.js/D3.js2019. 11. 1. 09:00
[D3.js] JSON 파일 읽는법
지난시간에는 CSV, TSV 파일을 읽어 보았는데 오늘은 JSON 파일을 읽어 보도록 하죠. 실험은 ATOM 편집기에서 이루어 집니다. 웹브라우저 설정이 귀찮아서 그냥 ATOM 편집기로 실험하게 되었네요.
1. JSON 실험 데이터
실험 데이터는 간단하게 아래와 같은 데이터를 만들었습니다.
[data.json]
[
{
"x": "50",
"y": "50"
},
{
"x": "100",
"y": "150"
},
{
"x": "150",
"y": "50"
},
{
"x": "200",
"y": "150"
},
{
"x": "250",
"y": "50"
}
]
2. V4 버전에서 JSON 파일 열기
V4 버전에서 아래와 같은 함수로 간단히 읽어 올 수 있습니다.
d3.json("데이터파일", function(error,data){
});
이제 위에 만들어 놓은 JSON 데이터를 읽어 봅시다.
[소스]
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<script>
d3.json("data.json", function(error,data){
if (error) throw error;
data.forEach(function(d){
console.log(d.x+","+d.y);
});
});
</script>
</body>
[결과]
3. V5 버전에서 JSON 파일 열기
d3.json("데이터파일").then(function(data) {
});
위와 같은 형태로 변경 되었으며 정상적으로 읽어오는지 살펴 보죠.
[소스]
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
d3.json("data.json").then(function(data) {
//console.log(data);
data.forEach(function(d){
console.log(d.x+","+d.y);
});
});
</script>
</body>
[결과]
정상적으로 JSON 데이터를 읽어 왔네요.
마무리
지금까지 CSV, TSV와 마찬가지로 JSON 함수도 동일한 방식으로 읽어 옵니다. 잘 봐두셨다가 나중에 여러분들이 사용하는 데이터 형식에 맞게 D3.js 함수를 이용하여 활용하시면 됩니다.
'D3.js > D3.js' 카테고리의 다른 글
| [D3.js] CSV, TSV, JSON, XML 시각화 (0) | 2019.11.13 |
|---|---|
| [D3.js] XML 파일 읽는법 (0) | 2019.11.11 |
| [D3.js] TSV 파일 읽는법 (0) | 2019.10.31 |
| [D3.js] CSV 파일 읽는법 (0) | 2019.10.30 |
| [D3.js] 버전에 따른 사라진 함수 복원 (0) | 2019.10.29 |
댓글()
