在拖動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})`)
})