d3.js奇数回転動作

Question

私はJSプロジェクトの初期段階です。 1つの形状の配置を除いて、これまではすべてがうまくいっています。問題の形状は、ティールダイヤモンド（正方形の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属性を導入する場合は、この属性を使用してすべての変換を行う必要があります。したがって、"x"属性を使用する代わりにtranslateを使用する必要があります。それで、次のようになります：

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軸に沿って翻訳が行われるためです。 SVGで

Answer 2

あなたはそれが、このような

250, 100があなたの矩形のxとyの位置でマイナス、それは半径だ

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

...として、中心から回転して取得する変換の原点を設定する必要があります。一緒にすべてを置くことが

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は関数であり、2つの場所でそのログを維持したくない場合があります。 この方法では、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 + ")"; 

       })