드래그 이벤트 D3에 사각형을 회전

Question

안녕하세요 여러분 모두 마우스로 드래그하는 동안 사각형을 회전하려고합니다. 직사각형은 원형 곡선을 따릅니다. 아래 나는 완벽한 솔루션을 첨부했지만, 마우스는 항상 사각형의 왼쪽 상단에 있습니다. 드래그하는 동안 마우스가 사각형의 중심에 항상 있어야합니다. 어떻게 제어 할 수 있습니까?

솔루션 : 내 솔루션의

var drag = d3.drag().on("drag", function() { 
      var rect = d3.select(this); 
      var theta = Math.atan2(d3.event.y - height/2, d3.event.x - width/2) * 180/Math.PI 


      rect 
       .attr("x", d3.event.x) 
       .attr("y", d3.event.y) 
       .attr('transform', `rotate(${theta + 90}, ${d3.event.x}, ${d3.event.y})`) 



     }) 

전체 코드는 여기에서 볼 수 있습니다이 : https://jsfiddle.net/hsspve49/

Answer 1

당신의 사각형의 크기, 예를 들면하여 드래그 처리기에서 x와 y 속성을 오프셋 :

를

... 
.attr("x", d3.event.x - 15) // half the width 
.attr("y", d3.event.y - 35) // half the height 
...