[D3.js] JSON 파일 읽는법

codingman (64)in #kr-dev • 6 years ago

[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>

[결과]