D3.js 테이블 그리기 - Object.keys(), map()

D3.js의 테이블을 생성하는 방법을 소개한다.

배열의 경우


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Table</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head> 
<body>
  <script>
  var dataset = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12],
  ];
 
  d3.select("body")
    .append("table")
    .attr("border", "1") // 테두리 표시
    .append("tbody")
    .selectAll("tr")
    .data(dataset)
    .enter()
    .append("tr")
    .selectAll("td")
    .data(function(row) { return row; })
    .enter()
    .append("td")
    .text(function(d) { return d; });
  </script>
</body>
</html>

객체의 경우


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Table</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <script>
  var dataset = [
    { "name": "A", "para1": 0, "para2": 5 },
    { "name": "B", "para1": 1, "para2": 6 },
    { "name": "C", "para1": 2, "para2": 7 },
    { "name": "D", "para1": 3, "para2": 8 },
    { "name": "E", "para1": 4, "para2": 9 }
  ]
 
  var columns = Object.keys(dataset[0]);
 
  var table = d3.select("body")
    .append("table")
    .attr("border", "1") // 테두리 표시;
 
  table.append("thead")
    .append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(d) { return d; });
 
  table.append("tbody")
    .selectAll("tr")
    .data(dataset)
    .enter()
    .append("tr")
    .selectAll("td")
    .data(function(row) {
      return columns.map(function(column) {
        return {column: column, value: row[column]};
      })
    })
    .enter()
    .append("td")
    .text(function(d) { return d.value; });
  </script>
</body>
</html>

Object.keys(dataset[0])는 객체의 키를 배열로 받아오는 함수이다.


var columns = Object.keys(dataset[0]);

테이블 헤더를 만들기 위해 dataset의 첫 번째 행의 문자열을 추출한다.


Object.keys({ "name": "A", "para1": 0, "para2": 5 })

반환 결과:


["name", "para1", "para2"]

또, 40행째의 d3.entries()는, 오브젝트의 키와 값을 배열로서 꺼내는 함수입니다.

객체를 data 함수에 dataset를 지정하면,


.data(dataset)

dataset 데이터를 아래와 같이 1개의 행을 차례대로 row이라는 객체로 함수의 인자로 넘기게 된다.


.data(function(row) {
  return columns.map(function(column) {
    return {column: column, value: row[column]};
  })
})

결과적으로는 row 단위로 받아와서 {column: 컬럼명, value: 값}와 같은 형태를 만든다.


[
  {"column" : "name",  "value" : "A"},
  {"column" : "para1", "value" : 0},
  {"column" : "para2", "value" : 5}
]

최종 수정 : 2024-01-18