[D3.js] XML 파일 읽는법 | Ecency

[D3.js] XML 파일 읽는법

지난시간에는 CSV, TSV, JSON 파일을 읽어 보았는데 오늘은 마지막으로 XML 파일을 읽어 보도록 하죠. 실험은 ATOM 편집기에서 이루어 집니다. 웹브라우저 설정이 귀찮아서 그냥 ATOM 편집기로 실험하게 되었네요.

1. XML 실험 데이터

실험 데이터는 간단하게 아래와 같은 데이터를 만들었습니다.

[data.xml]

<?xml version="1.0" encoding="UTF-8" ?>

<data>
  <x>50</x>
  <x>100</x>
  <x>150</x>
  <x>200</x>
  <x>250</x>  
</data>

2. V4 버전에서 XML 파일 열기

V4 버전에서 아래와 같은 함수로 간단히 읽어 올 수 있습니다.

d3.xml("데이터파일", function(error,data){

});
이제 위에 만들어 놓은 XML 데이터를 읽어 봅시다.

[소스]

<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <script>

    d3.xml("data.xml", function(data) {
      console.log(data);
    });
  </script>
</body>

[결과]

3. V5 버전에서 XML 파일 열기

d3.XML("데이터파일").then(function(data) {
});

위와 같은 형태로 변경 되었으며 정상적으로 읽어오는지 살펴 보죠.

[소스]

 <script src="https://d3js.org/d3.v5.min.js"></script>

<body>
  <script>
    d3.xml("data.xml").then(function(data) {
      console.log(data);
    });
  </script>
</body>

[결과]

ATOM 편집기에서 에러가 발생해서 문제가 있는 줄 알고 한동한 삽질 했는데 편집기 자체 문제였더군요. 파이어폭스 웹브라우저에서는 정상적으로 출력 되었네요.

파이어폭스에서는 console.log()함수을 통해 나온 데이터 값들이 좀 보기 불편합니다. 이게 정상적으로 출력이 된 건지 처음 보시는분들은 외계어처럼 보일 수 있고 어디에 데이터 값이 있는지도 참 불편하지요. 그래서 rect 모양으로 차트 형태로 데이터를 한번 찍어서 시각화를 통해 정상적으로 데이터를 읽어 왔는지 확인을 한번 해볼까 합니다.

4. V5 버전에서 XML 차트 출력으로 테스트

간단히 데이터 값을 rect 모양으로 출력 시켰습니다.

[소스]

<script src="https://d3js.org/d3.v5.min.js"></script>

<body>
 <script>
  var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");
                    
 d3.xml("data.xml").then(function(data) {

    var rect = svg.selectAll("rect").data(data.documentElement.getElementsByTagName("x"))
             .enter().append("rect")
               .attr("width",function(d){return d.textContent;})
               .attr("height",50)
               .attr("y",function(d,i){return i*100})
               .attr("fill","blue");
    });
 </script>