Question

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

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

我还尝试在拖动功能上添加旋转属性，但是如果我添加它，则矩形会跟随鼠标移动，如下面的x和y定义，您可以在下面看到，而不会旋转，并出现错误“。旋转不是一个功能“。

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

在拖动D3期间旋转矩形

1 个答案: