ツリー図のリンク方向の方向が正しくない

Question

ツリー図の例hereリンクの変更を行い、それぞれのソースとターゲットの場所を共通のミーティングポイントに対して変更できるようにします。私の現在の進捗ポイントはhereです（これらの例は問題を示すために考案されていますが、それは十分に適切だと思います）。

これは、sourceとtarget評価者機能を使用して可能であるように見えます。したがって私はdiagonal変数の元のコードを編集しました。

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

to;

var diagonal = d3.svg.diagonal() 
    .source(function(d) { return {x: d.source.y , y: d.source.x}; }) 
    .target(function(d) { return {x: d.target.y , y: d.target.x}; }); 

場所はうまくいきましたが、リンクはまだ垂直であり、結果としてこのように見えます。むしろこれより

。

Iは垂直方向にのみツリーリンクを配向に成功対角線変数宣言でのx/yの値の向きを変更しようとしています。

また、リンクを入力するときに、やや複雑なコードで同じことをやってみましたが、間違った向きでリンクが再び表示されました。

カーブの方向を説明するために追加のアセスメント担当者を含める必要があるとは思えませんが、私はそれを見ることができれば駄目です。

開始コードhere。

適応コードhere。

ご迷惑をおかけしますようお願い申し上げます。

Answer 1

ここで何かが完全に不足している可能性があります。しかし、しかし交換：

.projection(function(d) { return [d.y, d.x]; }); 

で：

.source(function(d) { return {x: d.source.y , y: d.source.x}; }) 
.target(function(d) { return {x: d.target.y , y: d.target.x}; }); 

はほとんどのラインが補間される方法を除き、.projectionの機能を複製します。もし投影を設定した場合代わりに、もともととXを定義し、yは全体図が水平に、垂直配向から反転され、通常はソースおよびターゲットの座標として：

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

を与える：

これは、私が目標としている正しいアライメントを維持しながら、ソースとターゲットの評価者にアクセスできるようにします。

途中であなたのD3サイトを愛してください、それは素晴らしいリソースです。