d3.js奇數旋轉行為

Question

我正處於JS項目的早期階段。 到目前為止，除了一個形狀的定位外，一切都很順利。 所討論的形狀是藍綠色鑽石（正方形旋轉45度）。 我可以讓屏幕上的方塊沒問題，但是當我添加：

    .attr("transform", "rotate(45)")

正方形旋轉正確，但向屏幕的左側部分移動，如下所示：

我不確定是什么導致這種情況發生。 如果有幫助，這里有一些產生這個結果的代碼：

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
        svg
            .append("rect")
            .attr("transform", "rotate(45)")
            .attr("x", 250)
            .attr("height", w / 10)
            .attr("width", w / 10)
            .attr("fill", "teal")

注意：如果我輸入“y”屬性，則方塊完全消失。

是什么造成的？ 我做錯了什么，我看不到？

Answer 1

旋轉矩形時，還可以旋轉其坐標系。 因此，當您稍后沿x軸移動250時，您實際上是沿着45度軸移動250個單位 - 旋轉的結果。

通常，當您為rotate引入transform屬性時，應該通過此屬性執行所有變換。 因此，您需要使用translate而不是使用"x"屬性。 然后它看起來像這樣：

svg
  .append("rect")
  .attr("transform", "translate(250, 0) rotate(45)")
  // remove this: .attr("x", 250)
  .attr("height", w / 10)
  ...

這可以為您提供我認為您正在尋找的結果。 現在請注意，轉換的順序在這里很重要：如果你的變換是"rotate(45) translate(250, 0)" （即先旋轉然后翻譯），你會得到與之前相同的錯誤結果。 那是因為當您首先旋轉時，您的平移將像以前一樣沿着旋轉的x軸發生。

Answer 2

在SVG中，您必須設置變換原點以使其從中心旋轉，例如......

.attr("transform", "rotate(45, 250, 100)");

其中250, 100是x，你的矩形的y坐標減去它的半徑。 把它們放在一起它看起來像......

var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 300);
        svg
            .append("rect")
            .attr("transform", "rotate(30,"+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")")
            .attr("x", diamond.x)
            .attr("y", diamond.y)
            .attr("height", diamond.width)
            .attr("width", diamond.width)
            .attr("fill", "teal")​

您可以在此處查看演示：

http://jsfiddle.net/uwM8u/

Answer 3

這是一種與Duopixel給出的答案略有不同的方法。 在這里，你不是要重復X和Y的計算。在Duopixel的例子中，由於他只是引用一個結構，所以它是一個微不足道的改進。 通常情況下X和Y是函數，我不想在兩個地方保持記錄。 此方法允許您將X和Y設置為節點，然后在所述節點的中心旋轉。

您可能會發現在旋轉之后，您仍然想要調整最終位置，這可以通過另一個變換完成，或者在TEXT的情況下，您可以使用dx，dy。

    svgNode.attr("transform", function (d) {

                    var w = +d3.select(this).attr("x") +  (this.getBBox().width / 2) ;
                    var h = +d3.select(this).attr("y") + (this.getBBox().height / 2);

                    return  "rotate(90," + w + "," + h + ")";

                })