d3.layout.treeをレンダリングして下に広げる方法（上のルート）

ほとんど私のニーズに合った、以下のような素晴らしいツリーが見つかりました。しかし、ツリーを縦方向に展開したいと思います。誰でも私に任意のアイデアや参照サイトを作る方法を与えることができます。任意のヘルプはになります。一般にd3.layout.treeをレンダリングして下に広げる方法（上のルート）

http://mbostock.github.com/d3/talk/20111018/tree.html

出典

2012-01-29 zono

を言うようにするため

var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; });

から「.projection」メソッドを削除します。明確にしていただけますか？ – user635090

@ user635090申し訳ありませんが、私の説明は良くありません。私は "ROOT"ノードを左にないディスプレイの上に移動したいと思います。 – zono

下向きにしたいです。 – zono

、回転は、単純な数学的プロセスです。

点のオリジナルの座標が{x,y}ある場合：

{-y,x} = rotated 90° (anti-clockwise) 
{y,-x} = rotated -90° (clockwise) 
{-x,y} = mirrored along y-axis 
{x,-y} = mirroded along x-axis 
{-x,-y} = mirroded along both

これらのスイッチは、すべてpath-で行われ、座標計算をしなければなりません。かなり仕事、私は思う。

パターン全体を単一のDIVに含めることはできますか？次に、DIVをCSS3-transformで回転させることができます。

出典

2012-01-29 12:56:02 Teemu

ありがとうございました。私はすぐにそれをやろうとします。 – zono

あなたが見ているツリーの例は、実際にはデフォルトから回転されているため、左から右に向いています。そのため、すべての 'translate'ステートメントでは、x座標とy座標が通常どおりの場所からスワップされます。ノードの

1）：文を翻訳のそれぞれにx、y座標をスワップ：

.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

あるべきこれらの2つのことを行う、下方向へ戻るには、この例を返すように

.attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })

に変更され、他のすべての「翻訳」についても同じです。リンクについては

2）：それはちょうど私があなたが『ツリー縦拡大』によって何を意味するかわからないよ

var diagonal = d3.svg.diagonal();

出典

2012-04-24 21:47:23

d3.layout.treeをレンダリングして下に広げる方法（上のルート）

答えて

関連する問題