d3.js 사용법 - ③ bar chart에 click 이벤트 추가

---

앞에서 bar chart를 생성하는 방법에 대해 알아보았다. 이어서 앞 포스팅에서 만들어 놓은 bar chart가 각각의 밸류값에 따라 클릭이벤트로 다양한 차트의 데이터 값을 뽑아내는 부분에 대해 포스팅을 해보겠다. 

 

참고로 내가 사용한 chart 및 그리드의 데이터는 아래와 같다. var1의 값과 var2의 값을 나누어 그리드와 chart에 여러 이벤트를 적용시켜 볼 예정이다. 

사용된 데이터 예제

이전에 만들어 놓았던 차트의 코드나 이전 포스팅을 보고 싶으면 아래 에서 확인 가능 

d3.js 사용법 - ② bar chart 그리기 (tistory.com)

d3.js 사용법 - ② bar chart 그리기

 

---

html 코드에 버튼을 생성한 후 var1 버튼을 눌렀을땐 var1에 해당되는 데이터값이 차트에 나타나고, var2 버튼을 눌렀을땐 var2에 해당되는 데이터값이 차트에 나타날 수 있도록 만들 것. 

 

 

  1. 우선 html 코드(jsp의 view단) 에 button태그를 활용하여 버튼을 2개 생성해준다 

<div class="wrap">
	<div class="chartWrap"> //chart를 감싸줄 전체 Wrap
		<button class="btn" id="btn-var1">var1</button> //버튼 1
		<button class="btn" id="btn-var2">var2</button> //버튼 2
	<div id="yerin-chart"></div> //실제 차트가 생성되어 들어갈 공간 
</div>

	<div class="tableWrap"> //grid를 감싸줄 전체 Wrap
		<table id="list"><tr><td></td></tr></table> //실제 그리드가 생성되어 들어갈 공간
		<div id="pager"></div>
	</div>

 

2. js 파일의 (javascript/jquery를 작성하는 파일) 실행함수 부분에 다음과 같은 click 이벤트를 추가해준다 

	$("#btn-var1").click(function(){
		$(".datasvg").remove();
		drawChart1(getData,"var1")
	})//click-var1
	
	$("#btn-var2").click(function(){
		$(".datasvg").remove();
		drawChart1(getData,"var2")
	})//click-var1
})

#btn-var1이라는 id를 가진 버튼을 클릭했을때 함수내의 로직을 실행해라. 라는 뜻. btn-var1을 누르면 var1의 타입을 가진 데이터를 가지고 차트를 그리고, btn-var2를 누르면 var2의 타입을 가진 데이터를 가지고 차트를 그리라는 뜻 

 

 ** (".datasvg").remove(); 하는 이유

- datasvg는 그래프의 데이터가 들어가는 부분의 그룹임 var1을 눌렀을땐 var2의 데이터를 지워준뒤 var1에 관련된 데이터를 그려야하고, 반대로 var2 버튼을 눌렀을땐 앞에 그려져 있던 var1의 데이터를 지워준 뒤 var2에 관련된 데이터를 그려야 하기 때문에 쓴 것 

 

* .remove()와 .empty()의 차이 

: .remove()는 선택된 요소들 포함. 하위 요소들을 제거하는 함수

  .empty()는 선택된 요소의 하위 요소들만 제거 하는 것.

   remove()가 아니라 empty()를 써버리면 var버튼을 번갈아 가며 클릭할때 마다 코드상 .datasvg가 무한으로 생성이 됨.   

   remove로 바꿔서 실행시켜주기 

 

저장한 후에 실행하게 되면 버튼이 2개가 생기게 되고, var1이라는 이름을 가진 버튼을 누르면 var1과 관련된 차트가, var2 버튼을 누르면 var2와 관련된 차트가 그려지는 것을 확인할 수 있음