私はangularjs Vis.jsを使用しています。angular vis.jsツリー構造のネットワーク図。私が直面している問題は、子供たちが親と比べて同等以上の子どもを抱えていて、矢印が正しく指しているにもかかわらず子供たちが上に行くことです。私はチャートが元の形で見えると思っています。これに修正がありますか?Vis.js子ノードにノードを追加すると、ネットワークツリー構造が乱れます
問題をより明確にするために、添付の画像をご覧ください。正しいビューチャートで
:私はC3、チャートに3人の子供を追加ティル1、2、3
:C1、C2、C3、C4 C3は、3人の子供を持っています
ルートは4人の子供を持っています外観は私にとっては大丈夫です。しかし、今私は別の子供four
をC3に追加します。
次に、混乱チャートビューのようにチャートが表示されます。
C3に任意の数の子を追加しても、図の外観はCorrect Chart View
イメージのままでなければなりません。 three
ノードのすぐ隣に、新しいfour
ノードを追加する必要があります。 Root
ノードは、常にCorrect Chart View
のように上部に表示されます。 directed
としてソート方法を設定Jumbled Chart View
$scope.graph = {
"options":{
"nodes":{
"borderWidth":1,
"borderWidthSelected":1,
"shape":"box",
"color":{
"border":"lightgray",
"background":"white",
"highlight":{
"border":"lightgray",
"background":"lightblue"
},
"hover":{
"border":"lightgray",
"background":"lightblue"
}
}
},
"edges":{
"smooth":{
"type":"cubicBezier",
"forceDirection":"vertical",
"roundness":1
},
"color":"lightgray"
},
"layout":{
"hierarchical":{
"direction":"UD",
"nodeSpacing":150
}
},
"interaction":{
"dragNodes":false,
"navigationButtons":true
},
"physics":false,
"autoResize":true,
"height":"400"
},
"data":{
"nodes":[
{
"id":"1000",
"label":"Root"
},
{
"id":"1001",
"label":"Ch1"
},
{
"id":"1002",
"label":"Ch2"
},
{
"id":"1003",
"label":"Ch3"
},
{
"id":"57c6eed2a43e6b69cd33251e",
"label":"out"
},
{
"id":"57c6e9c7a43e6b69cd332519",
"label":"abc"
},
{
"id":"57c6e9d4a43e6b69cd33251a",
"label":"xyz"
},
{
"id":"57c6e9dfa43e6b69cd33251b",
"label":"pqr"
},
{
"id":"57c6e9f0a43e6b69cd33251c",
"label":"vpr"
},
{
"id":"57c6f27fa43e6b69cd33251f",
"label":"rjr"
},
{
"id":"57c6eeb3a43e6b69cd33251d",
"label":"gut"
}
],
"edges":[
{
"from":"1000",
"to":"1001",
"arrows":"to",
"parenLabel":"Root",
"childLabel":"Ch1"
},
{
"from":"1000",
"to":"1002",
"arrows":"to",
"parenLabel":"Root",
"childLabel":"Ch2"
},
{
"from":"1000",
"to":"1003",
"arrows":"to",
"parenLabel":"Root",
"childLabel":"Ch3"
},
{
"from":"1000",
"to":"57c6eed2a43e6b69cd33251e",
"arrows":"to",
"parenLabel":"Root",
"childLabel":"out"
},
{
"from":"1001",
"to":"57c6e9c7a43e6b69cd332519",
"arrows":"to",
"parenLabel":"Ch1",
"childLabel":"abc"
},
{
"from":"57c6e9c7a43e6b69cd332519",
"to":"57c6e9d4a43e6b69cd33251a",
"arrows":"to",
"parenLabel":"abc",
"childLabel":"xyz"
},
{
"from":"57c6e9c7a43e6b69cd332519",
"to":"57c6e9dfa43e6b69cd33251b",
"arrows":"to",
"parenLabel":"abc",
"childLabel":"pqr"
},
{
"from":"57c6e9c7a43e6b69cd332519",
"to":"57c6e9f0a43e6b69cd33251c",
"arrows":"to",
"parenLabel":"abc",
"childLabel":"vpr"
},
{
"from":"57c6e9d4a43e6b69cd33251a",
"to":"57c6f27fa43e6b69cd33251f",
"arrows":"to",
"parenLabel":"xyz",
"childLabel":"rjr"
},
{
"from":"57c6e9dfa43e6b69cd33251b",
"to":"57c6eeb3a43e6b69cd33251d",
"arrows":"to",
"parenLabel":"pqr",
"childLabel":"gut"
}
]
}
}