在拖动事件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 
...