d3.js 사용법 - ④ bar chart에 tooltip 그리기(mouseover)

---

이어서 chart에 tooltip을 그리는 방법에 대해 포스팅 해보도록 하겠습니다

mouseover/mousemove/mouseout 함수를 사용하여 생성할 예정입니다

기본 차트 그리는 방법은 아래 포스팅에서 확인

 

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

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

---

 

앞선 포스팅에서 차트를 그리기 위해 drawChart1(getData,type)이라는 함수를 생성했음. tooltip은 chart 안에 생성되어야 하기 때문에 tooltip을 만드는 함수 또한 drawChart함수 안에다가 만들어줍니다. 

 

1. 우선 tooltip을 그리기 위해 d3에서 제공하는 함수들을 활용해 tooltip의 기본틀을 생성해줍니다. 

 

*drawChart 함수 안에 만들기

function drawChart1(getData,type){

//tooltip 틀 만들기 
	tooltip = d3
	 .select('body')
     .append('div')
     .attr('class', 'd3-tooltip')
     .style('position', 'absolute')
     .style('z-index', '10')
     .style('visibility', 'hidden')
     .style('padding', '10px')
     .style('background', 'rgba(0,0,0,0.6)')
     .style('border-radius', '4px')
     .style('color', '#fff')
     .text('a simple tooltip');

// tooltip에 들어갈 data
	var today = new Date();
    var month =('0' +(today.getMonth() +1)).slice(-2);
    var day = ('0' + (today.getDate()).slice(-2);
    var dateString = month + '/' +day;

}

 

 

2. var에 데이터를 집어 넣는 함수에 mouse 관련함수 내용 추가하기 

mouseover/mosemve/mouseout 에 관련된 함수

 

 

 

 

<전체 코드> 

* drawchart 그리는 부분 + tooltip 부분 

function drawChart1(getData,type){
///////////////////////////////////////////////////////////////////////////////////////////////////
	 // 이곳에서 생성한 tooltip의 모양과 들어갈 data들은 아래 그래프를 그릴때 추가 해줄 거임
	 // tooltip 틀 만들기 
	 tooltip = d3
	    .select('body') 
	    .append('div')
	    .attr('class', 'd3-tooltip')
	    .style('position', 'absolute')
	    .style('z-index', '10')
	    .style('visibility', 'hidden')
	    .style('padding', '10px')
	    .style('background', 'rgba(0,0,0,0.6)')
	    .style('border-radius', '4px')
	    .style('color', '#fff')
	    .text('a simple tooltip');
	 
	 // tooltip에 들어갈  data
	 var today = new Date();
	 var month = ('0' + (today.getMonth() + 1)).slice(-2);
	 var day = ('0' + today.getDate()).slice(-2);
	 var dateString = month  + '/' + day;

///////////////////////////////////////////////////////////////////////////////////////////////////
	
	 // 차트의 height와 width를 먼저 설정해준뒤 d3에서 제공해주는 select를 활용하여 svg 공간 생성해주기 
	 // 순서대로 척도만들고, 축도 생성해주기
	  if(!type){
	  chartHeight = 500
	  chartWidth  = 500
	  chartSvg = d3.select("#yerin-chart").append("svg").attr("height",500).attr("width",500)
	  .attr("id","svg1")
	  
	  // 척도 만들기
	  Yscale = d3.scale.linear().domain([0,40]).range([470,30])
	  Xscale = d3.scale.ordinal().domain(["A","B","C","D","E","F","G","H","I","J"]).rangeBands([30,470]);
	
	  // 축만들기
	  Yaxis = d3.svg.axis().scale(Yscale).orient("left")
	  Xaxis = d3.svg.axis().scale(Xscale).orient("bottom")

	  // 만들어진 svg 공간에 'g'공간을 추가한 후 이 공간 안에 축을 그리는 axis를 불러온다.
	  chartSvg.append("g").call(Yaxis).attr("transform","translate(30,0)").attr("class","axis")
	  chartSvg.append("g").call(Xaxis).attr("transform","translate(0,470)").attr("class","axis")
	  }

	  dataSvg = chartSvg.append("g").attr("class","datasvg");	
	  if(type=="var1"){ 
	    dataSvg.selectAll("rect").data(getData).enter().append("rect")
		.attr("x", function(d){return Xscale(d.group)})
		.attr("y", function(d){return Yscale(d.var1)})
		.attr("width",30)
		.attr("height", function(d){return chartHeight-Yscale(d.var1)-30})
		.attr("transform","translate(7,0)")
		.style("fill","#687F8F").attr("id","var1")
	    .on('mouseover', function (d, i) {
	       tooltip
	       .html(
	             `<div>Group: ${d.group}</div>
	              <div>Value: ${d.var1}</div>
	              <div>Time : ${dateString}</div>`
	        )
	       .style('visibility', 'visible');
	     })
	      .on('mousemove', function () {
	       tooltip
	       .style('top', d3.event.pageY - 10 + 'px')
	       .style('left', d3.event.pageX + 10 + 'px');
	     })
	      .on('mouseout', function () {
	       tooltip.html(``).style('visibility', 'hidden');
	     });
		
	}else if(type=="var2"){
	    dataSvg.selectAll("rect").data(getData).enter().append("rect")
		.attr("x", function(d){return Xscale(d.group)}).attr("y", function(d){return Yscale(d.var2)})
		.attr("width",30).attr("height", function(d){return chartHeight-Yscale(d.var2)-30}).attr("transform","translate(7,0)")
		.style("fill","#687F8F").attr("id","var2")
		 .on('mouseover', function (d, i) {
           tooltip
	       .html(
	            `<div>Group: ${d.group}</div><div>Value: ${d.var2}</div><div>Time : ${dateString}</div>`
	       )
	       .style('visibility', 'visible');
	     })
	      .on('mousemove', function () {
	       tooltip
	       .style('top', d3.event.pageY - 10 + 'px')
	       .style('left', d3.event.pageX + 10 + 'px');
	     })
	      .on('mouseout', function () {
	       tooltip.html(``).style('visibility', 'hidden');
	     });
	}
   }

 

<실행결과>

출처 : 본인 ppt