Documentation

2016. 5. 17.

D3js 사용준비

D3js는 웹에서 사용하는 자바스크립트 라이브러리 이다. 일반적으로 웹페이지 Head태그내에 선언하여 사용한다. 


    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

기본적인 html 코드 

    <!DOCTYPE html>
    <html lang="ko">
        <head>
            <meta charset="utf-8">
            <title>D3js 기본파일</title>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        </head>
        <body>

        </body>
    </html>

D3 사용

하기 코드는 javascript 태그 내에서 기술하여야 한다. 그리고, 하기 태그가 실행되기 전 #d3object 가 선언되어 있어야 한다. d3를 이용하여 id가 d3object인 요소에 p 요소를 추가, html 코드 및 스타일을 변환하는 예제 코드 이다. 

    // d3object DIV요소 마지막에 p 요소를 추가하고 p변수에 반환
    var p = d3.select('#d3object').append('p'); 
    
    // 변수 p를 이용하여 제어 가능
    p.html('P요소 추가').style('color','red');

D3object 예제 적용

D3 데이터 바인딩

D3js는 데이터 기반, 요소와 데이터를 바인딩하여 DOM을 표현하는 라이브러리 이다. 하기 코드는 데이터 바인딩의 가장 기초적인 구성이다. 

var data = [1, 5, 10, 15]; 

d3.select('#d3object').selectAll('div') // a 
  .data(data)	// b
  .enter() // c
  .append('div')	// d
  .html(function(d) {return d;}); 	// e
a : id가 'd3object' 요소의 하위에 div 셀렉션(비어있는 객체)을 생성
b : 생성된 셀렉션에 데이터를 바인딩
c : enter(), 실제 data와 대응되는 div 요소를 검사해서 대응되지 못하는 가상의 셀력션을 반환
d : 위에서 생성된 셀력션을 실제 DOM 에 삽입
e : 삽입된 div 요소에 html() 실행

[샘플 1]

    <!DOCTYPE html> 
    <html lang="ko"> 
        <head> 
            <meta charset="utf-8"> 
            <title> D3js 데이터 바인딩 테스트</title> 
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    
        </head> 
        <body> 
            <div id="d3object"> </div> 
    
            <script type="text/javascript"> 
            var data = [1, 5, 10, 15];  
    
            d3.select('#d3object').selectAll('div') // a
              .data(data)	// b
              .enter() // c
              .append('div')	// d
              .html(function(d) {return d;}); // e
            </script> 
        </body> 
    </html>
id가 d3object 요소 내에 div가 하나도 존재하지 않으므로 enter()에서 모두 생성하였다.

[샘플 1 ] 결과
메서드 체이닝

D3js 이외 그래프 관련 Javascript