<script>
var dataset = [50, 40, 70, 30, 60, 80, 120, 100];
for (var i = 0; i < 25; i++) {
var randNum = Math.random() * 30
dataset.push(randNum);
}
d3.select('#test_05').selectAll('div')
.data(dataset)
.enter()
.append('div')
.attr('class', 'bar2')
.style('height', function(d) {
return (d * 2) + 'px';
});
</script>
디버깅
크롬브라우저의 console 도구를 이용해서, 자바스크립트 코드를 디버깅할 수 있다.
https://lh6.googleusercontent.com/-fA3aiYphIwU/UZ429AzL0XI/AAAAAAAADE4/cQRm37eRSTg/s640/chrom_console01.png
Contents
테스트 환경
D3 설정
- Root Directory : /var/www/moniwiki
- d3.js : /var/www/moniwiki/local
앞축을 풀고나서 다음과 같은 코드를 HTML 문서에 삽입하는 것으로 준비완료.엘리먼트 추가
<div id="test_01"></div> <script> d3.select("#test_01").append("li").text("Perl") d3.select("#test_01").append("li").text("Cpp") d3.select("#test_01").append("li").text("Ruby") </script>데이터 연동
<div id="test_02"></div> <script> var dataset = ["Perl", "Cpp", "Ruby", "Python"] ; d3.select('#test_02').selectAll('li') .data(dataset) .enter() .append('li') .text(function(d) { return d; }); </script>- dataset : 출력을 위한 데이터를 정의했다.
- select : select는 CSS 셀렉터로 매칭되는 첫번째 DOM 엘리먼트를 가져온다. selectAll을 이용해서 하나이상의 앨리먼트를 선택할 수 있다.
- data : Driven할 데이터를 가져온다.
- append : 새로운 DOM 엘리먼트를 추가한다.
- text : 현재 선택된 엘리먼트의 opening 태그와 closing 태그사이에 텍스트를 추가한다.
예제에서 나는 anonymous function을 만들었다. 이 함수의의 매개변수 d로 data의 값들이 들어간다. 따라서 이 anonymous function은 dtaset에 있는 값들을 return 한다. 아래는 출력 결과다.div로 그래프 그리기
<style> div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override this later */ background-color: teal; } </style> <div id="test_03"></div> <script> var dataset = [50, 40, 70, 30, 60, 80, 120, 100]; d3.select('#test_03').selectAll('div') .data(dataset) .enter() .append('div') .attr('class', 'bar') .style('height', function(d) { return d + 'px'; }); </script>- 테스트에 사용할 데이터셋을 마련했다.
- div css를 정의한다.
- style를 이용해서 div의 height를 dataset의 값으로 변경한다.
실행 결과는 아래와 같다. 그럭저럭 괜찮게 나오기는 하는 것 같은데, 뭔가 좀 어색하다. 그래서 css를 변경하고.style('height', function(d) { return (d * 5) + 'px'; });<script> var dataset = [50, 40, 70, 30, 60, 80, 120, 100]; for (var i = 0; i < 25; i++) { var randNum = Math.random() * 30 dataset.push(randNum); } d3.select('#test_05').selectAll('div') .data(dataset) .enter() .append('div') .attr('class', 'bar2') .style('height', function(d) { return (d * 2) + 'px'; }); </script>디버깅
참고
Recent Posts
Archive Posts
Tags