4

svg:lineボタンを押すと、グラフの軸(要素)を交換しようとしています。時計の文字盤のようにトランジションが起こるようにしたいのです。

この線

d3.select(".yAxis").transition().duration(500).attr("transform", function() { 
  var value = invert?0:90;
  return "rotate("+value+" "+x1+","+y1+")";
});

翻訳と回転を同時に行っていますが、これは私の目的には役立っていません。

線を (x1,y1) について回転させ、平行移動および回転させないようにしたい。

これを行うにはどうすればよいですか？

より明確にするために、ここにフィドルがあります

4

1 に答える 1

1

わかりました、この問題は本当に私の好奇心を刺激しましたが、解決策を見つけたと思います. 基本的に、変換補間は期待どおりに機能せず、文字列補間を使用する必要があります。

d3.select(".xAxis")
      .transition()
        .duration(500)
        .attrTween("transform", function() {
            var startAngle = invert ?-90:0;
            var endAngle = invert?0:-90;
            return d3.interpolateString(
                "rotate("+startAngle+" "+ x +" "+ y +")", 
                "rotate("+endAngle+" "+ x +" "+ y +")"
            );                  
        });

また、2 つの軸の回転中心が同じであるため、2 つの軸の間で補間呼び出しを因数分解できます。

フィドル: http://jsfiddle.net/KVUUb/

于 2012-11-07T14:36:51.287 に答える