오늘은 오래 전 Mouse Event에 대해 살펴보았는데 그 중에 mouseover, mouseout 이벤트를 이용하여 캔버스에 그려진 Circle(원)에 대한 정보를 확인 할 수 있는 실험을 해볼까 합니다. 추가로 클릭 이벤트를 이용하여 클릭 Circle(원)의 정보를 p태그로 출력하는 것까지 다루어 보겠습니다.
var svg = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
.style("background-color","yellow");
이제 이부분은 매번 반복되는 내용이라 500x500의 캔버스 영역을 잡고 배경색은 yellow으로 지정한다는 내용인데 굳이 설명 할 필요는 없겠죠.
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()함수로 지우게 됩니다.
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태그에 출력하는 코딩입니다.
[데이터 : 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만 올리고 꾸준히 하나의 주제로 나아가야 하는데 정신없네요.