DOT없이 d3.js를 사용하는 지시 된 비순환 그래프

Question

d3.js를 사용하여 방향성이있는 비순환 그래프를 그리려합니다. 레이아웃을 검색하는 동안, 나는 Dagre을 보았습니다. 그러나 DOT 기반 코드를 어디서나 사용하고 싶지 않으므로 사용 빈도가 적은 것으로 보입니다. DAG에 대한이 플러그인 또는 맞춤 레이아웃을위한 순수한 자바 스크립트 솔루션에 대해 알고 계시다면 알려 주시기 바랍니다. 미리 감사드립니다.

Answer 1

Dagre 작성자는 여기에 있습니다. Dagre는 graphviz 코드를 포함하지 않으며 순수한 JavaScript입니다. 그것은 유사한 레이아웃 기술을 기반으로합니다. 둘 다 스기야마 (Sugiyama) 논문의 기술을 기반으로합니다.

현재 dagre의 몇 가지 예를 찾을 수 있습니다

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

축소 된 소스는 여기에서 찾을 수 있습니다 : http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. 그것은 약 44K에서 클럭합니다.

Answer 2

렌더링 지향 비순환 그래프 렌더링 (실제로 직접성 속성 강조 표시)은 Sugiyama 레이아웃 알고리즘의 도메인입니다.

기본적으로 노드에 계층을 할당하고 (토폴로지 정렬을 통해) 계층의 노드에 대한 순서를 계산합니다. 사이클을 먼저 뒤집는 간단한 경험적 방법을 사용하면 순환 적 그래프에서도 잘 작동합니다. Graphviz DOT에는 dot이라는 레이아웃이 구현되어 있습니다.이 레이아웃은 사용하는 파일 형식의 이름이기도하므로 DOT가 언급 될 때 약간의 혼동이있을 수 있습니다.

물론 알고리즘의 다른 구현이 있습니다. 교차 컴파일 된 점의 자바 버전도 available입니다. Javascript에서 사용할 수있는 가장 완벽한 기능을 갖춘 솔루션은 yFiles 라이브러리의 알고리즘을 상업적으로 구현 한 것입니다. 따라서 상업적 시나리오 인 경우 해당 live demo을 살펴볼 수 있습니다. yFiles에는 자체 렌더링 및 편집기 구현이 포함되어 있지만 레이아웃 알고리즘을 독립 실행 형 구현으로 사용하여 노드 좌표, 모서리 연결점 및 기타 요소를 "단지"계산할 수 있기 때문에 코드를 d3.js에 여전히 연결할 수 있습니다. 굴곡 및 레이블. 이 특정 구현은 "포트 제약 조건"(발신 및 수신 에지뿐만 아니라 노드에서의 정확한 위치를 제한하기 위해), 계층 적으로 그룹화 된 노드 (각 노드가 부모 노드를 가질 수있는 곳) 부모 노드는 모든 자식 노드를 "포함"함), 레이어 및 시퀀스 제약 조건, 에지 라벨링 제약 조건, 다른 에지 라우팅 스타일, 버스 라우팅 등을 제공합니다.

공개 : 나는 상기 라이브러리를 만드는 회사에서 일하지만, 그렇다고해서 고용주를 대표하지 않습니다.