순수 JavaScript Graphviz 상당 [닫힘]

GraphViz가 생성 할 수있는 방향성 흐름도의 순수 자바 스크립트 기반 구현을 아는 사람이 있습니까? 나는 예쁜 비주얼 출력에 관심이 없지만, 나무가 아닌 그래프를 다룰 때 교차 가장자리 수를 최소화하도록 최적화 된 베 지어 선의 레이아웃과 함께 각 노드의 최대 깊이를 계산하는 계산 정보의. 이 코드를 브라우저에서 모두 실행하고 싶습니다. Graphviz를 확장으로 Node Server에 쉽게 포함하거나 popen()그래프 정보를 .dot형식으로 스트리밍 할 수 있음을 알고 있습니다 .

참고로 일반적인 GraphViz 출력이 있습니다. 연결선이 노드를 교차하거나 (매우 자주) 노드를 통과하지 않고 노드 사이를 이동할 수 있도록 요소가 쌓여 간격을 유지하는 방법에 유의하십시오.

.dot 캔버스 렌더러의이 순수한 JavaScript 구현을 살펴보십시오.

http://ushiroad.com/jsviz/

라이브러리는 문서화되어 있지 않습니다-저자는 분명히 그것을 더 많이 공개하고 문서화해야합니다 (최소한 github에 올려 놓으라고 제안하기 위해 그에게 연락 할 것입니다).

업데이트 : 코드가 github으로 푸시되었습니다 : https://github.com/gyuque/livizjs

업데이트 (2013 년 2 월 2 일) : 다른 경쟁자가 발생했습니다! 주제에 관심이있는 사람은 Viz.js의 예제 페이지 와 github repo를 확실히 살펴보십시오 .

업데이트 (7/16/2020) : (7 년 후) http://webgraphviz.com/ 도 훌륭합니다! :-)

멀리 낮게 검색 한 후 마침내 답을 찾았습니다.

해결책은 누군가가 llvm + emscripten을 사용하여 Graphviz를 Javascript로 크로스 컴파일하는 것입니다. 여기 링크가 있습니다:

http://viz-js.com/

소스는 https://github.com/mdaines/viz.js 에서 찾을 수 있습니다.

그리고 단순히 웹 페이지를 사용하려면 :

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

모든 옵션 을 살펴본 후 jsviz 및 graphviz.js를 기반으로 viz.js ( https://github.com/mdaines/viz.js/ )를 발견 하여 실제로 웹 페이지에서 사용할 수있는 API를 갖습니다. 이해하다.

https://github.com/kripken/emscripten 의 'PDF 리더'예제에서와 같이 graphviz를 자바 스크립트로 변환 해 볼 수 있습니다.

이것은 기성품 graphviz 대체품은 아니지만 d3.js 는 주어진 데이터에서 다양한 레이아웃을 수행 할 수있는 라이브러리이며 graphviz를 구현하기위한 훌륭한 플랫폼이 될 것입니다.

다음 은 강제 레이아웃의 예입니다. 은 graphviz가 수행하는 형식 중 하나 .

다음은 대단한 대화 형 슬라이드 가있는 레이아웃에 대한 연설 입니다.

프로젝트를 알기 위해서는 튜토리얼 이 매우 좋습니다.

다음은 Emscripten을 사용하여 Graphviz를 Javascript로 크로스 컴파일 한 것입니다.

https://github.com/bpartridge/graphviz.js