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