2

D3 フォース グラフのスケーリングと変換を同時に行いたいと考えています。たとえば、ボタンをクリックすると、400% に拡大され、画面の中央に配置されます。これはすべて、スムーズなアニメーション効果で発生するはずです。

//animate vis to visible area 
vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")" + "center("0,0)");

これを行うと、スケーリングは正常に機能しますが、グラフは中央に配置されません。右下隅に向かってシフトします。

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")");

2 回目に翻訳すると、縮尺が 100% にリセットされるのはなぜですか。

私も使ってみました：

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");`

これも機能していません。私を助けてください。

4

1 に答える 1

1

center(0,0)仕様によるtransformと、は で使用できる有効な変換定義ではありません。

translate(0, 0)オブジェクトを画面の中央 (通常は の左上隅) に配置する場合は、外側の要素のviewBoxvisを次のように設定するとよいでしょう。これにより、中心が にあるように要素内の座標系が設定されます。または、 を使用することもできます。svg"-width/2 -height/2 width height"svg(0, 0)translate(width/2, height/2)

また、 を呼び出すたびに、属性.attr('transform', ...)の古い値を上書きします。transformこれが、翻訳時に元のスケーリングが失われる理由として考えられます。最善の解決策は、属性のスケーリングが一定のままであるvis内に要素を配置することです。gtransform

于 2013-01-25T13:15:39.600 に答える