[D3.js] d3.on() 함수의 클릭 이벤트

참조 :
[D3.js] 드래그(d3.drag()) 함수
[D3.js] d3.on() 함수

오늘은 d3.on()함수에서 빠진 부분으로 클릭 이벤트를 실험하는 시간으로 채우겠습니다.

1. d3.on("click", 동작) 함수

.on("click",동작함수) : type이 click으로 해당 객체의 클릭이 발생하면 이벤트가 발생하게 됩니다.

우리가 캔버스라는 공간에 클릭 이벤트를 만들고 싶다면 캔버스라는 객체에 클릭이라는 타입의 on()함수를 붙여 주기만 하면 됩니다.

예)
canvas.on("click", function(){ ... });

이렇게 하면 캔버스 어느 공간을 클릭하더라도 클릭 이벤트가 발생하게 됩니다. 다른 객체에 붙이면 해당 객체를 클릭하는 이벤트를 만들 수 있습니다. 이 원리를 이해하셨다면 아마 HTML에서 이미지 버턴을 만들어 보신 분들은 아실 거에요. 특정 이미지를 그리고 그 이미지에 클릭 이벤트를 발생시키는 이미지 버턴을 보셨거나 만들어 보셨을 거에요. D3.js에서는 D3.on("click",동작함수) 함수로 간단히 이미지 버턴을 만들 수 있습니다.

on()함수로 클릭 이벤트를 발생시킬 수 있다는 것이 무지 간단하지요.

그러면 실제 실험을 해보도록 하죠.

2. 클릭 이벤트 예제

클릭이라는 이벤트로 이미지 버턴을 만들면 너무 단순하기 때문에 공간 영역을 클릭하는 이벤트를 실험 해보겠습니다. 공간 영역의 클릭이라면 좌표라는 개념을 추가하는 실험을 해보도록 하죠.

[공간 마우스 좌표 얻기]

** var mouseXY = d3.mouse(this);**

위와 같이 d3.mouse(this)하면 현재 마우스 위치값을 가지고 있습니다. 이 값을 mouseXY변수에 저장하게 하면 이 변수에 이렇게 저장됩니다.

mouseXY[0] : x좌표값
mouseXY[1] : y좌표값

x,y 좌표값을 담겨 있습니다. 이렇게 마우스의 현재 위치값을 가져온다면 캔버스라는 영역을 잡고 캔버스 영역안에 현재 마우스 좌표를 구할 수 있으며 이 좌표 값으로 재밌는 실험을 해보겠습니다.

실험 내용 :

캔버스 영역에 마우스를 클릭하면 클릭한 위치에 circle(원) 그리기
마우스 커서가 원 영역안으로 들어가면 red색으로 변경하고 원 바깥으로 나가면 blue색으로 변경한다.

캔버스 영역 클릭 이벤트를 발생해 봅시다.

   var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

이렇게 canvas 객체에 click 타입의 on()함수를 하나 붙여 주면 됩니다. 이렇게 하면 캔버스 어느 영역을 클릭하더라도 클릭 이벤트가 발생하고 사용자 정의함수 circleDrawing() 을 호출하게 됩니다.

function circleDrawing() {

    클릭한 위치에 원 그리기;
        
          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",25)    
               .attr("fill","blue")
}

circleDrawing() 함수 내부에 코딩은 다음과 같습니다.

circle(원)을 클릭한 위치에서 그려야 하기 때문에 현재 마우스 좌표를 얻어와야겠죠.

var mouseXY = d3.mouse(this);

클릭한 순간 현재 mouse 위치값을 mouseXY변수에 저장합니다. 그리고 이 값을 기준으로 circle(원)을 그리면 됩니다.

캔버스의 원그리기는 계속 post에서 해온거라 어렵지 않겠죠.

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",25)    
               .attr("fill","blue")

기본 코딩은 같은데 딱 하나 cx, cy에 방금 구한 mouse 현재 좌표값을 대입합니다. 이렇게 하면 현재 마우스 좌표에 반지름이 25이고 circle(원)색이 blue인 원이 그려집니다.

추가로, 마우스가 원안으로 들어가면 red색으로 원밖으로 나가면 blue로 되돌아 가게 코딩은 다음과 같습니다.

.on("mouseover",function(){d3.select(this).attr("fill","red");})
.on("mouseout",function(){d3.select(this).attr("fill","blue");});

원 안으로 들어가니깐 "mouseover" 이벤트이고 원 밖으로 나가면 "mouseout" 이벤트가 수행 됩니다.

[종합 소스]

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
 
    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",25)    
               .attr("fill","blue")
                .on("mouseover",function(){d3.select(this).attr("fill","red");})
                .on("mouseout",function(){d3.select(this).attr("fill","blue");});            
      }
</script>
</body>

[결과]

마무리

오늘은 몇개 빼먹은 type이 있었는데 그 중에 클릭 이벤트를 post로 작성해 보았습니다. 지난 시간에 "mouseover", "mouseout", "drag" type가 같이 연결해서 생각하시면 마우스 이벤트라고 하나로 묶어서 정리하시면 될 듯 싶네요. 지난시간에 이 함수를 같이 이야기 했으면 좋았을텐데 약간 아쉬움이 남네요.

마지막으로, 또 하나 키 이벤트는 어떻게 하는지 여러분들이 찾아보세요.

alt