지난 시간에 d3.js로 table 시각화 하는 방법을 간단히 소개 했습니다. 그냥 해당 d3.js 라이브러리르 없이 자바스크립트로 출력하는 방법이 더 쉬울 수 있지만 d3.js 라이브러리를 이용한 방법을 코딩해 놓으면 추가로 특수 효과를 표현 할 때 수월하기 때문에 d3.js를 이용하여 코딩을 했습니다. 여러 추가 효과 중 가장 간단하게 정렬을 기존 table 시각화에 적용하여 얼마나 쉽게 코딩이 되는지 알아보도록 하죠.
d3.js 기본 정렬
<body>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
var data = [1,20,3,4,50];
console.log(data);
data].sort(d3.ascending)
console.log("asc : "+ data);
data.sort(d3.descending)
console.log("des : "+ data);
</script>
</body>
sort()함수에서 ascending, descending으로 간단히 정렬를 할 수 있습니다.
[결과]
순수 자바스크립 정렬
<body>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
var data = [1,20,3,4,50];
console.log(data);
data.sort(function(a, b) { //ascending
return a - b;
});
console.log("asc : "+ data);
data.sort(function(a, b) { //descending
return b - a;
});
console.log("des : "+ data);
</script>
</body>
이렇게 정렬을 표현한다.
다른 정렬 표현
<body>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
var data = [1,20,3,4,50];
console.log(data);
data.sort(function(a, b) { return b < a; }); //ascending
console.log("asc : "+ data);
data.sort(function(a, b) { return b > a; }); //descending
console.log("des : "+ data);
</script>
</body>
[결과]
세가지 모두 정렬은 동일한 결과를 얻습니다. 마지막 방식을 이용하여 table 정렬을 해보죠.
사전학습의 기본 소스에서 정렬을 해보도록 하죠.
[데이터: data.csv]
name,kor,eng,mat
a,90,90,90
b,70,100,70
c,50,60,95
[기본소스]
<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>
여기에서, 어떻게 코딩해야 정렬이 이루어 질까요. 장렬의 기준이 되는 셀 위치를 정해야 합니다. 정렬은 header 부분의 타이트을 클릭했을 때 정렬이 이루어지게 하는 방법으로 수정 해 볼까요.
헤더부분의 table 출력 코딩에서 원하는 동작을 수행해야 합니다.
var header = thead.append('tr')
.selectAll('th')
.data(title).enter()
.append('th')
.text(function (d) {return d;})
.on(클릭이벤트)
위 코딩처럼 on()함수를 붙여 클릭 이벤트를 발생시키면 해당 헤더부분의 타이틀 셀을 클릭하면 클릭 이벤트가 호출되어 이 안에다 데이터를 정렬 시키면 됩니다.
var sortstate = true;
.on('click', function (d) {
if (sortstate) {
rows.sort(function(a, b) { return b[d] > a[d]; });
sortstate = false;
} else {
rows.sort(function(a, b) { return b[d] < a[d]; });
sortstate = true;
}
});
이렇게 정렬상태 변수를 하나 만들어서 클릭 할 때 마다 true or false상태를 만들어서 if문에서 교대로 클릭 할 때마다 변경되도록 설정하고 그 안에다 데이터 rows의 값을 정렬 시키면 됩니다.
그러면 아래와 같이 정렬이 완성 되었네요.
var header = thead.append('tr')
.selectAll('th')
.data(title).enter()
.append('th')
.text(function (d) {return d;})
.on('click', function (d) {
if (sortstate) {
rows.sort(function(a, b) { return b[d] > a[d]; });
sortstate = false;
} else {
rows.sort(function(a, b) { return b[d] < a[d]; });
sortstate = true;
}
});
그러면 결과를 살펴 볼까요.
[전체소스]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<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 sortstate = true;
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;})
.on('click', function (d) {
if (sortstate) {
rows.sort(function(a, b) { return b[d] > a[d]; });
sortstate = false;
} else {
rows.sort(function(a, b) { return b[d] < a[d]; });
sortstate = true;
}
});
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>
[결과]
정렬이 참 쉽게 되죠. d3.js 라이브리를 이용한 테이블를 만들면 데이터는 묶여 있기 때문에 일괄적으로 데이터들이 정렬을 하게 됩니다. 순수 자바스크립트 코딩을 했다면 좀 코딩이 복잡하게 늘어났을 거에요.
아무튼 간단하게 정렬을 추가해 보았네요. 다른 추가 특수효과를 부여하고 싶을 때 기존 틀에다가 한개씩 추가하면 되고 그 추가가 전체 데이터에 영향을 쉽게 줄 수 있으니깐 코딩이 처음에만 좀 어렵지만 해놓고 보면 추가하는 부분는 무지 쉽어지기 때문에 d3.js로 코딩하는게 더 효율적일 것 같다는 생각이 드네요.