Question

我正在使用angularjs Vis.js angular vis.js网络图表来获取树状结构。我面临的问题是，当孩子与其父母相比具有相同或更多的子孩子时，即使箭头指向正确，孩子也会到达顶部。我希望图表以原始方式可见。有没有解决这个问题？

为了更清楚地了解这个问题，请参阅附件中的图片。

在正确的视图中：

Root有4个孩子：C1，C2，C3，C4 C3有3个孩子：一个，两个，三个

直到我向C3添加3个孩子，图表外观对我来说很好。但现在我将另一个孩子four添加到C3。

然后图表出现在混乱图表视图中。

我想要的是即使我向C3添加任意数量的孩子，图表外观仍应保留在Correct Chart View图像中。在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.
  }
}

Answer 2

如果要手动定义层次结构，可以为每个节点设置“级别”：

节点“Root”：level = 0
节点“C3..4”：level = 1
“one”，“two”......：level = 2

当我们向子节点添加更多节点时，Vis.js网络树结构混乱

2 个答案: