D3ツリーダイアグラム曲線開始位置

Question

概要

。

Interactive d3.js tree diagram

以下の例のスクリーンショットを参照してください：行はブロックの終了位置から開始するためのアイデアがある

を。私はそれが次の関数とは何かだと仮定します。

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

// Enter any new links at the parent's previous position. 
link.enter().insert("path", "g") 
    .attr("class", "link") 
    .style("fill", "none") 
    .style("stroke", "#d1d6da") 
    .style("stroke-width", "1") 
    .attr("d", function (d) { 
     var s = { x: source.x0, y: source.y0 }; 
     var t = { x: source.x0, y: source.y0 }; 
     return linkProjection({ source: s, target: t }); 
}); 

私はy座標にブロック幅を追加しようとしたが、それはそれは再びブロックの開始で終了描画で正しい位置から開始しますが。

提案がありますか？

Answer 1

これ以上のコードがなければ、私は座標系と関係があると思います。 x、yは私が思うオブジェクトの中心を指します。だから、あなたはボックスの長さの半分だけyを右に翻訳しなければならないでしょう。

つまり、親の以前の位置（x、y）は、親の中心を指しています。