ドラッグイベントで長方形を回転する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 
...