많은 노드가 추가되었을 때 Vis.js가 그래프를 보이지 않음

Question

Vis.js을 사용하여 항목 간 관계를 표시하는 웹 응용 프로그램을 만들고 있는데, ~ 1200 개의 가장자리로 ~ 260 개의 노드를 표시해야하는 시점까지 모든 것이 완벽하게 작동합니다. 그들 사이에.

일단 노드에 도달하면 그래프에는 공백과 파란색 선이 표시됩니다. 확대/축소하려고하면 선이 사라지고 모두 흰색입니다.

노드의 위치를 ​​볼 때 그 중 많은 수가 음수이거나 매우 큰 x, y 위치 (보통 x는 -300, y는 약 478759527705558300000)에 있음을 알 수 있습니다.

물리학을 사용하지 않으려 고 노력했습니다. 그래프는 계층 적 모드이며 코드에서 레벨을 수동으로 설정했지만 레벨은 정확합니다.

네트워크 옵션합니다 (improvedLayout 옵션은 내가 인터넷에서 발견 단지 가능성이었다 내가 그것을 제거하면 그냥 동일하게 작동) :

var options = { 
     layout: { 
      improvedLayout: false, 
      hierarchical: { 
       direction: direction, 
       sortMethod: "directed" 
      } 
     } 
    } 

스크린 샷 :

Answer 1

나는 약 615 개의 노드와 614 개의 에지 (40 개의 홀수 클러스터 노드는 제외하고 그 중 일부는 클러스터 클러스터)로 구성된 계층 레이아웃 그래프를 가지고있다. 나는 visjs에 동일한 문제로 도착했다.

이 문제를 극복하는 데 도움이되는 빠른 점은 명시 적으로 network .stabilize() 메서드를 반복 횟수를 지정하는 인수와 함께 호출하는 것이 었습니다. 기본 반복은 1000입니다. 나는 10000을 통과했으며 그래프는 자체적으로 안정적으로 안정화되었습니다. 몇 초가 더 걸렸다. 나는 괜찮았다. 그러나 노드 수가 1000 개로 증가함에 따라 안정화 시간이 단축됩니다. 그래서 저는 해결책을 찾기 위해 visjs 코드를 조사하기 시작했습니다.

visjs 코드를 보면서 setupHierarchicalLayout() 함수 내에서 _condenseHierarchy()에 대한 호출이 있음을 발견했습니다. 이 메서드는 노드와 가장자리 사이의 공백을 최소화하려고 시도합니다 (코드는 아직 완전히 이해하지 못했습니다.). _condenseHierarchy()는 노드의 좌표를 수정합니다. 노드가 반복 많이 걸리는 먼 위치를 가져옵니다 때 (에서 안정)

(this.body.nodes["node-11"]).y 
1530 
(this.body.nodes["node-11"]).y 
64920 

그래프의 다른 노드와 가깝게 가져옵니다 : Y 이하) 전 _condenseHierarchy (에 호출 후 좌표를 참조하십시오. _condenseHierarchy()를 비활성화하고 그래프를 멋지게 표시했습니다.

_condenseHierarchy()를 비활성화하면 다른 문제가 발생할 수 있습니다. _condenseHierarchy()를 이해하고 실험하기 위해 더 많은 시간을 할애 할 것입니다.

Answer 2

것은이 문제를 해결하려면 nodeSpacing, levelSeparation 및 treeSpacing과 같은 계층 적 레이아웃 매개 변수를 조정할 수 있습니다. 여기에 예제가있다 hierarchicalLayoutWithoutPhysics