D3 SVG変形回転遷移が奇妙に動作する

Question

D3で幾何学的SVGパターンを生成しました。アニメーション化したいと思いました。 私は円を描き、その周りを回転したいと思っていました。 しかし、それらが回転すると、正しい位置に戻る前に中心点が楕円軌道に沿って移動します。

私のコードはここにあります：http://codepen.io/andybarefoot/pen/bwkjaN 左上隅の「スピン」をクリックすると、異常な動作が表示されます。 「グループ」を回転させるための私の主な機能は次のようになります。

function spinCircles() { 
     d3 
      .select("#fixedGroup") 
      .attr("transform", "translate (0, 0) rotate(0)") 
      .transition() 
      .duration(4000) 
      .attr("transform", function(d, i){ 
       return "translate (0, 0) rotate (90,"+m/2+","+m/2+")"; 
      }) 
     ; 
    } 

私は複雑さが、私は私のSVGが「応答」になりたいと思ったように私は別のviewboxesとSVG要素を入れ子にしていることに起因する疑いがあります。 （ウィンドウのサイズを変更すると、対角線の角度が変わり、画面のコーナーに合わせて円と四角が同じアスペクト比を維持します）

ネストされたSVGのコードは、次のようになります。

 var baseSVG = d3.select("body") 
      .append("svg") 
      .attr("id", "baseSVG") 
     ; 
     var stretchSVG = baseSVG 
      .append("svg") 
      .attr("id", "stretchSVG") 
      .attr("viewBox", "0 0 " + w + " " + h) 
      .attr("preserveAspectRatio", "none") 
     ; 
     var fixedSVG = baseSVG 
      .append("svg") 
      .attr("id", "fixedSVG") 
      .attr("viewBox", "0 0 " + m + " " + m) 
     ; 

は、しかし、私は

すべてのヘルプは非常に感謝して受け取った...また、D3の転送遷移の私のお粗末な理解で横たわっ障害に開いています！ D3は、与えられた中心の周りに回転するために

Answer 1

、あなたはstring interpolatorを利用することができますカスタムtween機能を提供する必要があります。

function spinCircles() { 
    d3 
    .selectAll("#fixedGroup") 
    .transition() 
    .duration(4000) 
    .attrTween("transform", function() { 
     var center = "" + m/2 + "," + m/2; 
     return d3.interpolateString("rotate(0," + center + ")", "rotate(90," + center + ")"); 
    }); 
} 

ワーキング例えばupdated codepenを見てください。