在拖动过程中旋转矩形D3

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

您可以检查我的代码在这里：

我也尝试添加上拖拽功能旋转属性，但如果我添加它，鼠标按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）。我想按照该网址中的截图旋转黑色矩形。在此先感谢。

来源

2017-04-18 Pierpaolo Ercoli

无法理解什么叫'我要动态旋转意思基于圆的半径的矩形？' –

正如你在附加的jsfiddle上看到的那样，有1个黑色矩形和一个蓝色圆圈。黑色矩形上有拖曳事件，实际上，您可以将它拖动到任何地方。我想在用户拖动它时旋转黑色矩形。它必须旋转一圈运动。这很难在英文中解释。我留下一张图片供您更好地理解我的意思（http://imgur.com/a/APbu9）。在这里，我用拖拽绘制了我想要给矩形的旋转。 –

我认为这是关于计算在指针的x和y位置基础上应用于矩形的度数。我解决了旋转使用这个： .attr（“transform”，“rotate（”+ d3.event.y/d3.event.x +“）”）但是因为我适用的度数，rect旋转不好 –

我创建了一个小提琴证明这一点：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})`) 
})

来源

2017-04-18 10:22:58 thedude

非常感谢非常！它为我工作！ –

在拖动过程中旋转矩形D3

回答

相关问题