2012-07-26 19 views
14

ツリーレイアウトを使用して少し修正したツリーを作成しました。私は、通常の左から右の向きではなく、右から左にツリーを向ける必要がありました。これを行うには適切かつ適切なd3:ishの方法は何ですか?ツリーの描画方向

レイアウトを作成した後に単純にx座標を反転させることでこれをやりましたが、これはハックだと感じています。確かによりエレガントなものがありますか?

私は中心の周りにSVG回転を行うことを考えましたが、次にテキストを正しい向きに回転させるためにラベルを回転させる必要がありました。それも正しいとは思わなかった。

+0

:ここ

は、4つの異なる方向を示す一例です。 – Wex

答えて

27

ツリーのレイアウトは、に幅(X)と深さ(Yの任意の座標空間をノード位置を計算します。レイアウトの向きを変更するには、レイアウトの座標空間からSVGピクセル座標にマッピングを変更します。手動でマッピングしたくない場合は、quantitative scalesを使用して、より直感的な(ただし、より冗長な)マッピングを指定することができます。いくつかのコードを投稿

+0

26行目にバグやタイプミスがあります:リンクの先頭に "http:"がありません –

+0

さらに詳しい説明ができますか?私は平均的なHTMLとJSの知識と、動作可能なアプリケーション(左から右へ拡張可能/クリック可能なツリー)を持っています。 –

+0

productTree.jsの2つの場所でxとyを変更してツリー構造を垂直にし、もう1つは正しい場所にラベルを作成しました。残念なことに、ツリーには境界線がないので、ラベルは互いに重なり合っています。/ –

関連する問題