d3.jsファミリーチャート

Question

^これは、出生/死亡/名称データを取るために、チャートの強化を開始することが目的である - しかし、それを取るために、より柔軟で持っています。また、データソースをクリーンアップします。

私はd3.js家族のチャートを開発しようとしています。私は、このチャートのデータ構造を強化し、ラベルの追加/スペース/デザイン - 必要なスペースを与えるためにパーツの動的な長さを与える方法があれば興味があります。

私は1つの家系図のそのタイプのために使用する標準的なアルゴリズムは「杉山」階層グラフのレイアウトとして知られているこのjsfiddle http://jsfiddle.net/857edt69/30/

// Create the node rectangles. 
    nodes.append("circle") 
    .attr("class", "node") 
    .attr("r", function(d, i) { 
     return smallRadius; 
    }) 
    .style("fill", function(d, i) { 

     var userName = d.userName; 
     if (userName) { 
     userName.toLowerCase() 
     } 

     var id = d.id + "-" + userName; //small circles 
     return "url(#" + id + ")"; 
    }) 
    .attr("id", function(d) { 
     return d.id; 
    }) 
    .attr("display", function(d) { 
     if (d.hidden) { 
     return "none" 
     } else { 
     return "" 
     }; 
    }) 
    .attr("cx", function(d) { 
     return d.x - (smallRadius/2) + 10; 
    }) 
    .attr("cy", function(d) { 
     return d.y - (smallRadius/2) + 10; 
    }); 


    // Create the node text label. 
    nodes.append("text") 
    .text(function(d) { 
     //return d.name; 
     return d.userName; 
    }) 
    .attr("x", function(d) { 
     return d.x - (smallRadius/2) + 10; 
    }) 
    .attr("y", function(d) { 
     return d.y - (smallRadius/2) - 20; 
    }); 

Answer 1

作りました。 （力のレイアウトと同様のものを得ることもできますが、制約を正しく取ることは非常に面倒です）

杉山は幅とオフセットを測定するためにツリーを横切る必要があります。クロスオーバ。これは、最も初心者に優しいアルゴリズムではないのですが、私が見つけた最も簡単な紹介は、私が個人的に杉山計算のための高度に洗練さdagreのlibとの良好な成功を収めてきたhere

あり、そしてdagre-d3でd3の適応。 （here's an example for cytoscape data structures）