배경 :HTML5/자바 스크립트 실시간 상태 그래프를 그리기
나는 "흐름"을 형성 종속의 집합을 가지고있다. 각 종속성은 특정 상태 (예 : 유휴 상태, 대기 중,로드 중, 완료 중 ...)가있는 노드입니다.
이 종속성과 현재 상태를 레이블이있는 내 웹 사이트의 다이어그램으로 나타내려고합니다. 노드의 색은 노드가있는 상태를 나타냅니다. 종속성은 고정되어 있지 않으므로 런타임에 다이어그램을 그려야합니다.
워크 플로우 서버에서 상태 업데이트를 내 웹 사이트로 푸시하는 방법은 이미 있습니다.
질문 :이
는 HTML5 위의을 (그래프 및 상태 변경을 그릴) 할 수 있도록하는 붙박이 아무것도 있습니까? 사용해야하는 외부 라이브러리가 있습니까?
는
월 JointJS이 문제를 해결 ...
은 읽을 수 있도록 자동 너무 밖으로 누워 가지고 좋은 것 (다른 브라우저에 대한 상관 없어) 크롬에서 작동해야합니다.
JointJS은 도표와 그래프로 시각화 및 상호 작용을위한 현대 HTML 5 자바 스크립트 라이브러리입니다. 정적 다이어그램 또는 더 중요한 것은 완전히 대화 형 다이어 그래밍 도구와 응용 프로그램 작성자를 만드는 데 사용할 수 있습니다. JointJS를 사용하면 다양한 종류의 시각 도구를 쉽게 만들 수 있습니다.
좋은 예는 여기에있다 http://jointjs.com/demos/fsa
또한 D3.js
그것은 당신이 원하는 무엇이든을 그리기위한 SVG 요소와 상호 작용하는 자바 스크립트 API를 제공을 체크 아웃 할 수 있지만, 특히 탁월 데이터를 그려진 요소의 다양한 속성과 연결합니다.
더하기 문서는 훌륭하고 많은 예제가 있습니다.
이것은 StackOverflow보다 softwarerecs.stackexchange에 더 적합합니다. 예 : http://softwarerecs.stackexchange.com/questions/2323/javascript-framework-to-create-flow-like-diagrams –