javascript - 拖动事件D3时旋转矩形

大家好，我正在尝试在用户用鼠标拖动矩形的同时旋转矩形。矩形遵循圆形曲线。
在下面附上我的解决方案，它是完美的，但是鼠标始终位于矩形的左上角。我希望鼠标在拖动过程中始终位于矩形的中心。我该如何控制呢？

解：

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/

最佳答案

通过矩形的大小来偏移拖动处理程序中的x和y属性，例如：

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

关于javascript - 拖动事件D3时旋转矩形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43489068/