1
웹 페이지에 Directed Acyclic Graph를 표시해야합니다. 나는 기성품 라이브러리 또는 솔루션을 찾고 있지 않습니다. 나는 올바른 방향으로 제안, 추천 또는 추천을 찾고 있습니다.웹 UI의 지시 비순환 그래프
1 DAG 시각화
나는 노드와의 관계를 표현하는 방법의 확실하지 않다. 실행 가능한 솔루션은 Treemaps 일 수 있으며, 좋은 이전 노드 & 라인 또는 그 두 가지 조합이 될 수 있습니다. 한 노드가 화면에 두 번 이상 나타나면 문제가 없습니다.
처음부터 모든 노드를 화면에 표시 할 필요는 없습니다. 사용자는 예를 들어 두 번 클릭하거나 확대하여 노드를 확장 할 수 있습니다.
나는 모든 제안과 조언을드립니다.
2. 기술
구현해야합니다 몇 가지 기능이 있습니다
- 드래그 & 드롭
- 줌 노드와 마우스 상호 작용에
- 이벤트
필자의 관점에서 볼 때 2 가지 옵션이 있습니다 (플래시는 문제가되지 않습니다) :
a. HTML5 Canvas
단점 : 벡터가 없으며 기본적으로 이미지입니다. 노드에 암시 적 마우스 이벤트가 없습니다.
장점 : 속도; 인기; 애니메이션
b. SVG
단점 : 노드가 많은 경우 저속;
장점 : 벡터 그래픽; 요소가 DOM에 있으므로 이벤트 등을 가질 수 있습니다.
c. 동적 그래프를 업데이트 할 가정 HTML5 캔버스 & SVG
계산 된 이미지와 게시 된 이미지 또는 동적으로 계산되는 이미지를 표시해야합니까? –
SVG를 사용하면 매우 많은 수의 항목 (예 : 화살표)이 있어도 이벤트 처리가 필요없고 SVG를 사용하면 속도가 너무 느려집니다. 벡터와 비슷한 방법으로 [HTML5 캔버스 이동 및 확대/축소] (http://phrogz.net/tmp/canvas_zoom_to_cursor.html) 할 수 있습니다. – Phrogz