javascript - 当我们向子节点添加更多节点时，Vis.js 网络树结构困惑

Question

我正在使用 angularjs Vis.js angular vis.js树状结构的网络图。我面临的问题是，当 child 与其 parent 相比有相等或更多的子 child 时，即使箭头指向正确， child 也会到达顶部。我希望图表以原始方式可见。有什么解决办法吗？

要更清楚地了解该问题，请参阅所附图片。

在正确的图表中:

根有 4 个 child :C1、C2、C3、C4 C3 有 3 个 child :一、二、三

直到我向 C3 添加 3 个 child ，图表外观对我来说还不错。但是现在当我将另一个 child four 添加到 C3 时。

然后图表出现在困惑的图 TableView 中。

我想要的是，即使我向 C3 添加任意数量的子项，图表外观也应保持在正确的图 TableView 图像中。在 three 节点旁边，应添加新的 four 节点。 Root 节点应始终出现在顶部，如 Correct Chart View 中所示。它应该下降，如 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"
          }
        ]
      }
    }

Answer 1

将排序方法设置为directed 已经解决了问题

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