2016-09-01 17 views
0

私は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" 
      } 
     ] 
     } 
    } 

CorrectChartViewJumbledChartView

答えて

1

に示すように、それは問題に

layout: { 
    hierarchical: { 
    direction: 'UD', 
    nodeSpacing: 150, 
    sortMethod : 'directed' //hubsize, directed. 
    } 
} 
1

を解決した、手動で階層を定義する場合は、「設定することができますダウンして行く必要がありますノードごとに「レベル」を設定します。

  • ノード "ルート":レベル0 =
  • ノード "C3..4" レベル= 1
  • "1"、 "2" ...:レベル= 2
関連する問題