n-ary ツリー構造をブラウザに表示しようとしています。
以下は、それが引き出されているデータ構造の例です。
var jsonObj = [{
id: "window1",
name: "Corporate",
children: [
{ id: "window12", name:"IT", children: [
{ id: "window121", name:"Dev", children: [] },
{ id: "window122", name:"Web", children: [] }
] },
{ id: "window13", name:"HR", children: [] },
{ id: "window14", name:"Finance", children: [] }
]
}];
私はそれ (構造、つまり) を次のツリーのようにするつもりです (側面のみ):
http://gravite.labri.fr/images/tidyTree.jpg
現在、http://imm.io/Dz3Vに近いように見えますが、それほどではありません。
その出力を生成するために私が書いたアルゴリズムは次のとおりです。
var create_graph_components = function (json, level, offset) {
for (var i = 0; i < json.children.length; i++) {
offset += create_graph_components(json.children[i], level + 1, offset);
}
if (json.children.length == 0) {
$('#wrapper').append("<div class=\"component window\" style=\"top:"+offset+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
offset = 50;
} else {
$('#wrapper').append("<div class=\"component window\" style=\"top:"+offset/2+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
}
return offset;
};
それは、ページの正しい位置に div を追加することだけです。これは私が問題を抱えていることです。
アルゴリズムを改善して、ツリーを希望どおりにきれいに印刷する方法を知っている人はいますか?私は近いと思いますが、アイデアを失いました!