가로막대 그래프를 그리면서 기본적인 프로세스를 익혀본다.
1. 먼저 가로형 그래프가 표시될 HTML 파일(test.html)을 준비한다.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script> // d3.js 서버에서 호출
</head>
<body>
<h1>가로형 막대그래프</h1>
<svg id="myGraph"> //svg 영역 지정
</svg>
</body>
</html>1) 준비된 HTML파일에 script 태그를 이용하여 d3.js를 호출한다. d3.js를 서버에서 직접 받아 사용함으로 d3객체를 모두 사용할 수 있다.
2) body에 svg 태그를 사용해 그래프가 나타날 영역을 지정한다. 이후 사용할 d3 객체에서 인식을 위해 아이디를 지정해 준다.
2. 그래프를 그리기 위한 데이터 처리를 위한 자바스크립트 파일(manual.js)을 준비한다.
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",0) //y 좌표 0으로 설정
.attr("width",dataSet[0]) // dataSet의 1번째 400을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정1) 데이터는 변수명을 dataSet으로 한다.
2) d3 객체 안의 select 메서드를 이용해 myGraph라는 아이디를 가진 svg 태그 영역을 선택한다. 이 후의 메서드들은 메서드 체인을 사용하여 '.'을 이용하여 연속적으로 사용해준다.
3)append 메서드를 이용하여 'rect' svg에서 사각형을 만드는 태그를 추가시켜준다.
4) rect 태그의 속성값을 attr 메서드를 이용하여 추가해준다. x 좌표는 0, y좌표는 0, 넓이width는 dataSet[0] 400으로 지정, 높이는 20px로 지정한다.
※ d3의 메서드들로 만든 이 사각형은 svg 안에서 태그를 이용하여 만들면 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로형 막대그래프</h1>
<svg id="myGraph">
<rect x= "0" y="0" width="400" height="20"></rect>
</svg>
</body>
</html>
<실행결과>
3. HTML 파일이 자바스크립트의 연산을 통해 그래프를 그릴 수 있도록 HTML 파일 안에 자바스크립트를 삽입해 준다.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script> // d3.js 서버에서 호출
</head>
<body>
<h1>가로형 막대그래프</h1>
<svg id="myGraph"> //svg 영역 지정
</svg>
<script src="manual.js"></script> // 자바스크립트 삽입
</body>
</html>1) script 태그를 이용하여 manual.js의 경로를 넣어준다.
<실행결과>
4. 나머지 데이터셋의 데이터들도 그래프로 나타내기위해 manual.js에 사각형들을 추가해준다.
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",0) //y 좌표 0으로 설정
.attr("width",dataSet[0]) // dataSet의 1번째 400을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",25) //y 좌표 25으로 설정
.attr("width",dataSet[1]) // dataSet의 2번째 200을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",50) //y 좌표 50으로 설정
.attr("width",dataSet[2]) // dataSet의 3번째 90을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",75) //y 좌표 75으로 설정
.attr("width",dataSet[3]) // dataSet의 4번째 190을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정
d3.select("#myGraph") //svg 요소 선택
.append("rect") //svg 사각형 생성
.attr("x",0) //x 좌표 0으로 설정
.attr("y",100) //y 좌표 0으로 설정
.attr("width",dataSet[4]) // dataSet의 5번째 240을 기반으로 넓이 설정
.attr("height","20px") // 높이 20px로 설정1) 그래프들의 구분을 위해 y좌표들을 25씩 띄워준후에 가로 그래프이므로 width를 dataset에 따라 움직이게 해준다.
<실행결과>
5. 데이터셋의 데이터가 5개로 적으니 위치 및 데이터를 직접 지정해줄 수 있지만 데이터가 많아지면 일일이 지정해줄 수 없다. 자동으로 위치와 데이터를 지정해서 그래프를 그리기 위해서는 다른 방법이 필요하다.
d3객체에서 selectAll(), data(), enter() 메서드를 추가적으로 사용해야 한다.
selectAll() -> 여러개의 요소를 선택하기 위해 사용한다.
data() -> d3객체에서 처리할 데이터를 지정한다.
enter() -> 위의 지정된 데이터를 다 처리할 때까지 연산을 반복하기 위해 사용한다.
d3.select("#myGraph")
.selectAll("rect")//data를 적용할 svg 요소지정
.data(dataSet) //data설정
.enter() //데이터 수에 따라 rect 요소 생성
.append("rect")//사각형생성그리고 자바스크립트의 이름없는 함수(익명함수)를 사용한다.
function(d,i) 에서 d는 데이터 i는 위치이다.
이러한 익명함수를 이용하여 그래프의 넓이와 좌표를 표시하여 자동으로 데이터를 반영한 그래프를 그리게 한다.
.attr("width",function(d,i){
return d + "px";
}) //그래프 넓이 지정
.attr("y",function(d,i){
return i * 25;
}) //그래프 데이터셋 위치를 이용하여 y좌표 변경위의 메서드들을 적용하여 새로이 auto.js를 작성하여 적용하면 다음과 같다.
<test.html>
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로형 막대그래프</h1>
<svg id="myGraph">
</svg>
<script src="auto.js"></script>
</body>
</html><auto.js>
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")[실행결과]
'데이터분석 > d3.js' 카테고리의 다른 글
| <D3.js> 가로막대 그래프 그리기(4) x축 눈금 표시 (0) | 2022.06.26 |
|---|---|
| <D3.js>1. 가로막대 그래프 그리기(3) 애니메이션 효과 추가 (0) | 2022.06.19 |
| <D3.js> 1. 가로막대 그래프 그리기(2)색, 데이터 변경 (0) | 2022.06.16 |
| D3.js로 그래프 그리기 1. 기본 개념 (1) 들어가기 앞서 (0) | 2022.06.04 |