web-dev-qa-db-ja.com

D3変換スケールと変換

トランスフォームがD3でどのように機能するかを理解しようとしましたが、理解できなかったと思います。

スケールはSVGオブジェクトのサイズを変更しますか？つまり、大きな数値を指定すると、オブジェクトのサイズが大きくなりますか？翻訳は、オブジェクトをある場所から別の場所に移動しますか？試しましたが、思ったようには動作しませんでした。

それがどのように機能するかを私に説明してもらえますか？

svgd3.js
36
user1365697

変換はSVG変換です（詳細については、 標準 をご覧ください。ここに 例 があります）。基本的に、スケーリングと変換はそれぞれの変換を座標系に適用し、ほとんどの場合、期待どおりに機能するはずです。ただし、複数の変換を適用することもできます（たとえば、最初に拡大縮小してから翻訳する）と、結果が期待どおりにならない可能性があります。

変換を使用するときは、座標系を変換することに注意してください。原則として、あなたが言うことは真実です-1より大きいスケールをオブジェクトに適用すると、オブジェクトは大きく見え、平行移動によって他のオブジェクトとは異なる位置に移動します。

18
Lars Kotthoff

スコットマレーはこれについて素晴らしい説明を書きました[1]。たとえば、コードスニペットの場合：

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

彼は以下を使用して説明します：

Attr（）を使用して、gの属性として変換を適用することに注意してください。 SVG変換は非常に強力であり、スケールや回転など、さまざまな種類の変換定義を受け入れることができます。ただし、ここでは、トランスフォームトランスフォームのみを使用して、gグループ全体をある程度上下させるだけでシンプルにしています。

変換変換は、translate（x、y）の簡単な構文で指定されます。ここで、xとyは、明らかに、要素を変換する水平および垂直ピクセルの数です。

[1]： Webの対話型データ可視化 の第8章「クリーンアップ」から、以前は無料で利用でき、現在はペイウォールの背後にあります。

27
canary_in_the_data_mine

私はこの質問がかなり古いことを理解していますが、ここで情報を探している他の人のために、グループ変換、パス/シェイプ、および相対的な配置の簡単なデモを共有したかったです：

http://bl.ocks.org/dustinlarimer/605077

9
Dustin