[D3.js] mouseover, mouseout 이벤트
[D3.js] mouseover, mouseout 이벤트
오늘은 오래 전 Mouse Event에 대해 살펴보았는데 그 중에 mouseover, mouseout 이벤트를 이용하여 캔버스에 그려진 Circle(원)에 대한 정보를 확인 할 수 있는 실험을 해볼까 합니다. 추가로 클릭 이벤트를 이용하여 클릭 Circle(원)의 정보를 p태그로 출력하는 것까지 다루어 보겠습니다.
1. 캔버스 지정
var svg = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
.style("background-color","yellow");
이제 이부분은 매번 반복되는 내용이라 500x500의 캔버스 영역을 잡고 배경색은 yellow으로 지정한다는 내용인데 굳이 설명 할 필요는 없겠죠.
2. 마우스 이벤트
var circle = svg.selectAll("circle").data(dataset)
.enter().append("circle")
.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;})
.attr("r",function(d){return rScale(d.r);})
.attr("fill",function(d){return ColorScale(d.r);})
.on("mouseover",function(){d3.select(this).attr("fill","red");})
.on("mouseout",function(){d3.select(this).attr("fill","blue");});
dataset의 들어 있는 데이터들이 좌표 꼭지점(cx,cy)에 반지름 r인 원을 fill(채움색)로 하나의 원을 그리는데 여기에 on("mouseover", 이벤트함수), on("mouseout", 이벤트함수) 함수로 마우스가 원 안으로 들어가면 mouseover 이벤트가 발생하고 마우스가 원 밖으로 나가면 mouseout 이벤트가 발생한다는 의미 입니다.
[ mouseover ]
function mouseover(d,i){
d3.select(this).attr("fill","green");
var text = svg.append("text")
.attr("id","r"+"-"+i)
.attr("x",d.x-20)
.attr("y",d.y-20)
.attr("stroke","red")
.attr("stroke-width",2)
.text(d.x+","+d.y+","+d.r);
}
마우스가 원 안으로 들어가면 d.x, d.y은 마우스가 가리키는 원의 cx, cy가 되겠죠. 그 좌표를 기준을 -20씩 이동시키고 글씨가 빨간색 text()함수에 값을 출력하게 된다.
[ mouseout ]
function mouseout(d,i){
d3.select(this).attr("fill",ColorScale(d.r));
d3.select("#r" + "-" + i).remove();
}
마우스가 원 밖으로 나가면 해당 출력 text값을 remove()함수로 지우게 됩니다.
3. 클릭 이벤트
var circle = svg.selectAll("circle").data(dataset)
.enter().append("circle")
.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;})
.attr("r",function(d){return rScale(d.r);})
.attr("fill",function(d){return ColorScale(d.r);})
.on("click", click);
circle(원)을 클릭했을 때 이벤트를 발생시키는 코딩입니다. 이전 까지는 캔버스 영역을 클릭해서 뭔가 그리는 이벤트 였다면 이번에는 해당 객체를 클릭 했을 때의 이벤트 발생입니다. 해당 객체의 정보를 출력하기 위해서 해당 객체를 클릭하는 이벤트가 발생하기 위해 안에다 on("click", click)함수를 붙여 넣습니다.
function click(d,i){
d3.select("p").text((i+1)+" 위치 : "+d.x+","+d.y+" 반지름 : "+d.r);
}
출력 결과는 p태그로 text()함수를 이용하여 circle의 위치 정보와 반지름 정보를 p태그에 출력하는 코딩입니다.
4. 종합소스
[데이터 : data.csv]
x,y,r
50,50,1
100,150,3
150,50,5
200,150,7
250,50,9
[소스]
<body>
<p> 위치 : </p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var rScale = d3.scaleLinear().domain([0,10]).range([0,100]);
var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);
var svg = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
.style("background-color","yellow");
function render(dataset){
var circle = svg.selectAll("circle").data(dataset)
.enter().append("circle")
.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;})
.attr("r",function(d){return rScale(d.r);})
.attr("fill",function(d){return ColorScale(d.r);})
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click);
}
function mouseover(d,i){
d3.select(this).attr("fill","green");
var text = svg.append("text")
.attr("id","r"+"-"+i)
.attr("x",d.x-20)
.attr("y",d.y-20)
.attr("stroke","red")
.attr("stroke-width",2)
.text(d.x+","+d.y+","+d.r);
}
function mouseout(d,i){
d3.select(this).attr("fill",ColorScale(d.r));
d3.select("#r" + "-" + i).remove();
}
function click(d,i){
d3.select("p").text((i+1)+" 위치 : "+d.x+","+d.y+" 반지름 : "+d.r);
}
d3.csv("data.csv",type,function(error,data){
if (error) throw error;
render(data);
});
function type(d){
d.x=+d.x; //parseFloat(d.x);
d.y=+d.y; //parseFloat(d.y);
d.r=+d.r; //parseFloat(d.r);
return d;
}
</script>
</body>
위 코딩을 보면 스케일함수를 사용했는데 이부분의 설명은 생략합니다. 스케일함수가 이해가 안된다면 스케일 post를 다시 보고 오시면 됩니다.
[결과]
마무리
좀 더 뭔가 멋지게 출력하는 걸 만들어야 하는데 감이 떨어져서 간단한 원리만 실험 했네요. css를 이용해서 그럴 싸 하게 표현 했으면 좀 더 멋졌을 텐데 좀 아쉽네요. 최근 몇일 일이 있어서 정신 없이 보냈는데 d3 공부도 못하고 잠깐 감을 잃어서 최근 post도 못 올리고 이상한 post만 올리고 꾸준히 하나의 주제로 나아가야 하는데 정신없네요.
Sponsored ( Powered by dclick )
보클로 응원합니다. !!
https://steemit.com/dclick/@dailypro/048-ill-make-an-effort-to-change-that--1541548427172
응원 감사합니다.
보팅과 디클릭으로 응원 드리고 가요~
디클릭 감사합니다.
점점 풍부해지고 있네요^^
따라 가기 참 힘들지만요....
아직 기초에서 못 벗어 났네요. ^^
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다. Vote for @bukio
짱짱맨 방문에 감사합니다.
d3 로 저 정도면 충분한게 아닌가요? 너무 욕심이 많으신듯...ㅠㅠ
아직 입문 기초라 할게 많네요. ^^