본문 바로가기

d3.js

Using D3.js to draw a grid‎


D3.js는 SVG뿐만 아니라 HTML DOM 핸들링이 가능하다.

이번에는 D3.js를 이용하여 아래와 같은 Grid(Table)을 그려본다.


실행화면 미리보기



샘플 데이터

var matrix = [{"Girth":8.3,"Volume":10.3,"Height":70},{"Girth":8.6,"Volume":10.3,"Height":65} ...];


우선 아래 그림에 표시된 테이블 헤더를 추가해보자.

테이블 HEAD


d3.select("body")
	.append("table")
	.style("border-collapse", "collapse")
	.style("border", "2px black solid")
	.append("tr")
	.attr("class", "tr_head")
	.selectAll("td")
		.data(d3.keys(matrix[0]))
		.enter().append("td")
		.style("border", "1px black solid")
		.style("padding", "5px")
		.style("text-align", "center")
		.on("mouseover", function(){ d3.select(this).style("background-color", "aliceblue")})
		.on("mouseout", function(){ d3.select(this).style("background-color", "white")})
		.text(function(d) { return d; } )
		.style("font-size", "12px");

1~7라인까지는 table, tr, td태그를 순차적으로 생성한다.

8번라인에서는 td에 세팅될 데이터를 매핑한다. 

td에 matrix객체의 키를 삽입하기 위하여 d3.keys()로 메서드를 사용하였다.

8번 라인의 리턴 값

["Girth", "Volume", "Height"]

10~16라인까지는 해당 td에 대한 이벤트와 속성을 추가해주었다.

D3.js의 on메서드와 관련하여서는 여기를 참고하기 바란다.


이제 아래그림에 표시된 body부분을 추가해보자.


테이블 BODY


d3.select("body table").selectAll("tr") .data(matrix) .enter().append("tr") .attr("class", "tr_body") .selectAll("td") .data(function(d){ return d3.values(d);}) .enter().append("td") .style("border", "1px black solid") .style("padding", "5px") .style("text-align", "center") .on("mouseover", function(){ d3.select(this).style("background-color", "aliceblue")}) .on("mouseout", function(){ d3.select(this).style("background-color", "white")}) .text(function(d, i){ return d;}) .style("font-size", "12px");

2번라인에서 matrix객체를 data메서드에 연결 시키고 

6번라인에서 matrix객체의 value값을 삽입하기 위하여 d3.values() 메서드를 사용하였다.

나머지는 테이블 HEAD부분과 동일하다.


참고자료 : http://christopheviau.com/d3_tutorial/

'd3.js' 카테고리의 다른 글

Google Maps + D3.js  (8) 2014.02.11
bar chart  (4) 2013.09.16
visualization using d3.js  (1) 2013.05.28