在拖动D3期间旋转矩形

Question

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

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

https://jsfiddle.net/n4m1r8nb/208/

我也尝试在拖动功能上添加rotate属性，但是如果添加它，矩形将按照鼠标在片段中的x和y定义跟随鼠标移动，您可以在下面看到此图像，而不旋转，并且出现错误“ .rotate不是功能”。

var drag = d3.drag().on("drag", function () {
                d3.select(this)
                    .rotate(d3.event.x)
                    .attr("x", d3.event.x)
                    .attr("y", d3.event.y);
                    console.log("X: ", d3.event.x)
                    console.log("Y: ", d3.event.y)
             })

您可以在这张图片（ http://imgur.com/a/APbu9 ）中看到我的意思。 我想按照该网址中的屏幕截图旋转黑色矩形。 提前致谢。

Answer 1

我创建了一个小提琴来演示这一点： https : //jsfiddle.net/hsspve49/

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

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