Javascript 拖动D3时旋转矩形

我是D3V4和D3的新手。我创建了一个矩形，可以在画布上拖动它。现在我想根据圆的半径动态旋转矩形

您可以在此处查看我的代码：

我还尝试在拖动函数上添加“旋转”属性，但如果添加该属性，则矩形将按照下面代码段中的x和y定义跟随鼠标移动，而不旋转，并出现错误。“旋转不是函数”

你可以在这张图片中看到我的意思（）。我想根据该url中的屏幕截图旋转黑色矩形。

---

提前感谢。

我制作了一把小提琴来演示这一点：

代码的相关部分位于拖动处理程序中：

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})`)
})

---

无法理解“我想根据圆的半径动态旋转矩形”是什么意思？正如你在我所附的JSFIDLE上看到的，有一个黑色的矩形和一个蓝色的圆。黑色矩形上有拖动事件，实际上，您可以将其拖动到任何地方。我想在用户拖动时旋转黑色矩形。它必须以圆周运动的方式旋转。这很难用英语解释。我给你们留了一张图片，让你们更好地理解我的意思（）。在这里，我用画笔画出了我想在拖动过程中给矩形的旋转。我想这是关于计算在指针的x和y位置的基础上应用到矩形的度数。我使用以下方法解决了旋转问题：.attr（“transform”，“rotate”（+d3.event.y/d3.event.x+”），但由于我应用的度数，rect rotate不正确

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})`)
})