직접 자바스립트로 table를 출력하는 방법을 많이드 사용하실 거에요. 직접 코딩해서 HTML로 출력하면 되기 때문에 굳이 D3.js로 이용하여 table를 만들 필요성이 없어 보일 수 있지만 그래도 한번 간단히 실험 차원으로 테스트 해보았네요. 이렇게 틀을 만드어 놓으면 나중에 특수효과를 넣을 때 코딩이 더 쉬워질 것 같아서 d3.js로 공부해놓으셔도 좋을 듯 보이네요. 그러면 오늘 실험인 table을 간단히 만들어 볼까요.
table 형태로 시각화하기 위해서는 먼저 데이터를 읽어와야 겠죠. CSV 파일의 데이터를 읽어 왔지만 다른 데이터 형식을 불러와도 상관 없습니다. 데이터 읽기는 복습 차원으로 간단히 살펴 봅시다.
d3.csv("데이터명.csv").then(function(data) {
console.log(data);
});
어려운 것이 없죠.
table 속성을 d3.js에서 일일 스타일을 지정하면 코딩이 좀 복잡해 보이고 의미 전달이 안될 수 있습니다. CSS로 간단히 표면만 디자인합니다. 참고로 디테일적인 속성은 지정을 안하고 최소화 된 스타일로 지정했네요.
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #ff00bc;
text-align:center;
font-weight:bold;
}
</style>
table 폭 100% 해놓고 선 두께랑 선색을 정하고 테이블 안에 각 셀의 텍스트 가운데 정렬하고 글자크기는 두껍게라고만 지정하고 마무리 했네요. "html table"이라고 구글 검색하시면 다양한 스타일 속성들이 있으니깐 좀 더 멋지게 하실 분들은 검색하셔서 수정해 보세요.
[데이터: data.csv]
name,kor,eng,mat
a,90,90,90
b,70,100,70
c,50,60,95
이제 d3.js로 읽어온 데이터를 table로 출력 해 볼까요.
<body>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #ff00bc;
text-align:center;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
d3.csv("data.csv").then(function(data){
var title = d3.keys(data[0]); //해더타이틀
var table = d3.select('body').append('table'); //테이블 추가
var thead = table.append('thead'); //thead 추가
var tbody = table.append('tbody'); //tbody 추가
//헤더 정보 출력
var header = thead.append('tr')
.selectAll('th')
.data(title).enter()
.append('th')
.text(function (d) {return d;})
});
</script>
</body>
우선 title로 data[0]의 정보 {name, kor, eng, mat} 담고 그 값을 header로 출력합니다. table 만들고 그안에 thead, tbody를 추가합니다. 두 부분으로 나뉘는데 여기에서는 thead 부분만 출력 됩니다. 데이터의 헤더 타이틀 부분을 출력을 하는 것이죠. 타이틀 정보도 여러개가 있고 그 정보는 tr태그를 만들고 다시 th태그를 만들어서 타이틀 데이터를 하나씩 출력하게 됩니다.
초보분들은 말이 잘 연상이 안되실 수 있을 거에요. html 태그가 어떻게 만들어졌는지 볼까요.
위 그리를 보시는 것처럼 thead 태그 안에다가 tr만들고 th를 title 데이터를 토대로 4개가 출력 되었죠.
화면으로 한번 결과를 확인해 보죠.
[결과]
이렇게 header 정보가 출력 되었네요.
이제 tbody 부분을 코딩해야 합니다.
var rows = tbody.selectAll('tr').data(data)
.enter()
.append('tr');
var cells = rows.selectAll('td')
.data(function (d) {
return title.map(function (title) {
return { 'title': title, 'value': d[title]};
});
})
.enter()
.append('td')
.text(function (d) { return d.value;});
rows의 갯수를 data수 만큼 tr태그를 추가하게 됩니다.
그리고 나서 cells에 각 데이터를 td에 출력하는데 title.map()함수로 타이틀에 index에 맞게 각 데이터가 재 배치되어 만듭니다. 그 데이터를 토대로 td태그를 추가하고 그안의 text는 재 배치한 데이터 d.value값으로 순서대로 각 셀에 데이터 값을 출력합니다.
[전체소스]
<body>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #ff00bc;
text-align:center;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
d3.csv("data.csv").then(function(data){
var title = d3.keys(data[0]);
var table = d3.select('body').append('table');
var thead = table.append('thead');
var tbody = table.append('tbody');
var header = thead.append('tr')
.selectAll('th')
.data(title).enter()
.append('th')
.text(function (d) {return d;})
var rows = tbody.selectAll('tr').data(data)
.enter()
.append('tr');
var cells = rows.selectAll('td')
.data(function (d) {
return title.map(function (title) {
return { 'title': title, 'value': d[title]};
});
}).enter()
.append('td')
.text(function (d) { return d.value;});
});
</script>
</body>
결과를 출력해 보니깐 깔끔하게 잘 나왔네요.
[결과]
그냥 for문 돌려서 자바스클립트로 한번에 출력하면 될텐데 굳이 이렇게 복잡하게 코딩하냐고 생각 하실 수 있습니다. 예전에 steem.js에서 읽어온 데이터를 테이블로 출력할 때 for문을 이용하여 태그별로 데이터를 찍어 냈으니깐요. 하지만 이 방법의 핵심을 단순히 이것만 출력하고 끝난다면 비효율적이지만 여기에 추가로 특수효과 정렬이라든가 클릭 이벤트나 다른 다양한 이벤트 효과를 넣거나 특수효과를 부여할 때는 이 코딩을 틀로 해서 쉽게 적용을 할 수 있다는 것이 큰 장접입니다. 지금 이 코딩에서는 헤더와 몸통으로 나눠서 코딩이 되었고 헤더에 정렬클릭을 넣고 싶다면 on()함수만 붙이서 표현하면 각 title에 특수 효과를 부여가 쉽게 됩니다.
아무튼 오늘은 간단히 table을 실험을 해보았네요.