직접 비순환 그래프 (DAG)를 표시하기위한 JS 라이브러리

Question

프로그래밍 언어 및 Makefiles의 모듈 시스템에 표시되는 종속성 그래프를 검사 할 수있는 브라우저 기반 도구를 만들려고합니다.

나를 위해 그림을 그리는 시각화 프레임 워크를 찾고 있습니다.

요구 사항은 툴킷이

• 라벨 노드 (희망 가장자리) 적당한 크기로 그래프 (I 좋은 크기를 추측 할 필요가 없습니다) 밖으로
• 자동으로 공간이 나는 것을 제공 할 수 있습니다 (스크롤 막대가 괜찮)
• 레이아웃이 같은 지저분한
• 이 < = 5000 노드
JS 전용 (플로리다와
• 실행에 괜찮을 보이지 않도록 잘 그래프 공간을 infinit 한 애쉬 또는 데스크톱 응용 프로그램)

선택적으로 노드를 이동하고 그래프의 일부를 강조 표시하거나 숨겨서 더 쉽게 이해할 수 있다면 좋을 것입니다.

백업 된 것이 무엇이든 상관 없습니다 (SVG, 캔버스, 모두 괜찮음).

내가 꽤 라이브러리 지금까지 (특히 Graph visualization library in JavaScript에서)에서 보였지만, 아직 피팅 하나 발견하지 않았습니다 :

• d3가 좋은 있지만 제공하는 유일한 노드 그래프 힘 그래프를, 실시간 물리학에 중점을 둡니다. 일단로드되면 물리 엔진이 안정화 될 때까지 기다려야합니다. 나는 애니메이션이나 포스가 필요 없으며 그래프를 바로 보여주고 싶습니다.
• GraphDracula의 examples은 내가 찾고있는 것이지만 이미 70 개의 노드와 400 개의 가장자리가있어 드로잉 성능이 매우 나 빠졌다. 또한 매우 희박한 documentation (35 행 코드 예)입니다.

내 요구 사항을 충족하는 것을 알고 계십니까? 감사!

Answer 1

Dagre는 그래프 레이아웃 (가로/세로 맞춤, 레이블 등)에 매우 효과적이며 D3 렌더러를 사용합니다.

https://github.com/cpettitt/dagre-d3 당신이 고려하는 것이 좋습니다 상업적 시나리오에서

https://github.com/cpettitt/dagre

Answer 2

을 (마지막에 이미지를 확인) yFiles for HTML :

이 할 수있는 요구 사항에 대해서는 :

• 어떤 추가 노드 및 에지에 대한 레이블의 수
• P 가상적으로 무한 스크롤/이동/확대/축소 영역을 적용하십시오.
• 다양한 자동 레이아웃 알고리즘을 사용하여 그래프를 자동 레이아웃하십시오. 종속성 그래프의 경우 Hierarchic Layouter은 매우 적합합니다.
• 은 많은 수의 노드가있는 데스크탑 브라우저에서 잘 작동합니다.시각적 복잡성과 그래프 구조에 따라 오늘날의 브라우저 구현에서는 5000 개의 요소가 어려울 수 있습니다.
• 그것은
• 메인 백엔드로 SVG를 사용 아무런 종속성이 순수 자바 스크립트 라이브러리뿐만 아니라 라이브러리는 여기

는 자사의 복잡성을 주어 필요가 well documented입니다 캔버스에게

을 활용할 수 있습니다 스크린 샷은 행동 위의 기능 중 일부 보여주는 - 레이아웃이 자동으로 계산 하였다

면책 조항 : 나는 도서관을 만드는 회사에서 일하고 있습니다. SO/SE에서는 고용주를 대표하지 않습니다. 이것은 내 자신의 게시물입니다.