유향 그래프를 나타내는 데이터 구조가 있으며이를 HTML 페이지에서 동적으로 렌더링하려고합니다. 이 그래프는 보통 몇 개의 노드 일 것입니다. 맨 끝에서 10 개일 것입니다. 따라서 제 생각에는 성능이 큰 문제가되지 않을 것입니다. 이상적으로는 사용자가 노드를 드래그하여 레이아웃을 수동으로 조정할 수 있도록 jQuery에 연결하고 싶습니다.
참고 : 차트 라이브러리를 찾고 있지 않습니다.
답변:
나는 당신이 찾고있는 것을 정리했습니다 : http://www.graphdracula.net
지시 그래프 레이아웃, SVG가있는 JavaScript이며 노드를 드래그 할 수도 있습니다. 여전히 약간의 조정이 필요하지만 완전히 사용할 수 있습니다. 다음과 같은 JavaScript 코드를 사용하여 노드와 가장자리를 쉽게 만듭니다.
var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");
앞서 언급 한 Raphael JS 라이브러리 (graffle 예제)와 인터넷에서 찾은 힘 기반 그래프 레이아웃 알고리즘 (모든 오픈 소스, MIT 라이센스)에 대한 코드를 사용했습니다. 당신이 어떤 말이 있거나 특정 기능이 필요한 경우, 나는 그것을 구현할 수 있습니다, 그냥 물어보세요!
다른 프로젝트도 살펴볼 수 있습니다! 다음은 두 가지 메타 비교입니다.
SocialCompare 에는 광범위한 라이브러리 목록이 있으며 "노드 / 에지 그래프"라인은 그래프 시각화 라이브러리를 필터링합니다.
DataVisualization.ch는 노드 / 그래프 라이브러리를 포함하여 많은 라이브러리를 평가했습니다. 불행히도 직접 링크가 없으므로 "graph"를 필터링해야합니다.
다음은 유사한 프로젝트 목록입니다 (일부는 이미 여기에서 언급했습니다).
vis.js 는 다양한 유형의 네트워크 / 에지 그래프와 타임 라인 및 2D / 3D 차트를 지원합니다. 자동 레이아웃, 자동 클러스터링, 탄력 물리 엔진, 모바일 친화적, 키보드 네비게이션, 계층 레이아웃, 애니메이션 등 MIT는 라이센스 및 자기 조직화 네트워크에 대한 연구를 전문으로 네덜란드의 회사에 의해 개발.
Cytoscape.js -jQuery 규칙에 따라 모바일 지원을 통한 대화식 그래프 분석 및 시각화. NIH 보조금을 통해 자금을 지원하고 @maxkfranz (아래 의 답변 참조 )가 여러 대학 및 기타 기관의 도움을 받아 개발했습니다.
JavaScript InfoVis Toolkit- 대화 형 다목적 그래프 그리기 및 레이아웃 프레임 워크 인 Jit 예를 들어 쌍곡 트리를 참조하십시오 . 트위터 DataViz의 건축가에 의해 만들어진 니콜라스 가르시아 벨몬트 와 센차에 의해 구입 한 2010 년.
D3.js Protovis의 후속 제품인 강력한 다목적 JS 시각화 라이브러리. 참고 항목 강제 방향 그래프의 예를, 그리고 다른 그래프 예제 갤러리 .
Plotly의 JS 시각화 라이브러리는 JS, Python, R 및 MATLAB 바인딩과 함께 D3.js를 사용합니다. IPython에서 nexworkx 예를 참조하십시오 여기 , 인간의 상호 작용의 예를 여기에 , 그리고 JS 삽입의 API .
대화식으로 연결된 그래프를 작성하기위한 jsPlumb jQuery 플러그인
Springy- 강제 지향 그래프 레이아웃 알고리즘
John Resig의 Processing 라이브러리의 Processing.js Javascript 포트
JS Graph It-직선으로 연결된 드래그 앤 드롭 상자. 라인의 최소 자동 레이아웃.
RaphaelJS의 Graffle- 일반적인 다목적 벡터 드로잉 라이브러리의 대화식 그래프 예제입니다. RaphaelJS는 노드를 자동으로 레이아웃 할 수 없습니다. 이를 위해 다른 라이브러리가 필요합니다.
JointJS Core -David Durman의 MPL 라이센스 오픈 소스 다이어그램 라이브러리. 정적 다이어그램 또는 완전한 대화식 다이어그램 도구 및 애플리케이션 빌더를 작성하는 데 사용할 수 있습니다. SVG를 지원하는 브라우저에서 작동합니다. 핵심 패키지에 포함되지 않은 레이아웃 알고리즘
mxGraph 이전의 상용 HTML 5 다이어그램 라이브러리, 이제 Apache v2.0에서 사용 가능합니다. mxGraph가에서 사용되는 기본 라이브러리입니다 draw.io .
GoJS Interactive 그래프 그리기 및 레이아웃 라이브러리
KeyLines Commercial JS 네트워크 시각화 툴킷
ZoomCharts 상업용 다목적 시각화 라이브러리
Syncfusion JavaScript Diagram 도면 및 시각화를위한 상용 다이어그램 라이브러리.
Cytoscape Web Embeddable JS Network 뷰어 (새로운 기능은 계획되지 않음, Cytoscape.js에 의해 성공)
arbor.js 멋진 물리학과 눈을 가진 정교한 그래프. 월에 버려진 2012 여러 반 유지 포크가 존재한다.
jssvggraph "SVG 객체를 사용하는 Javascript 라이브러리로 구현 된 가장 간단한 힘 지향 그래프 레이아웃 알고리즘" 2012 년에 포기 됨.
시각화를위한 Protovis Graphical Toolkit (JavaScript). d3으로 대체되었습니다.
연결 및 관계에 대한 Moo Wheel Interactive JS 표현 (2008)
JSViz 2007 시대 그래프 시각화 스크립트
JavaScript에 대한 dagre 그래프 레이아웃
Graphviz 정교한 그래프 시각화 언어
플레어 아름답고 강력한 플래시 기반 그래프 그리기
NodeBox Python 그래프 시각화
면책 조항 : 저는 Cytoscape.js의 개발자입니다
Cytoscape.js는 HTML5 그래프 시각화 라이브러리입니다. API는 정교하며 jQuery 규칙을 따릅니다.
cy.elements("node[weight >= 50].someClass")예상 한만큼)cy.nodes().unselect().trigger("mycustomevent"))그래프를 사용하여 심각한 웹앱을 작성하려는 경우 최소한 Cytoscape.js를 고려해야합니다. 무료이며 오픈 소스입니다.
JsVIS 는 꽤 좋았지 만 더 큰 그래프에서는 느리고 2007 년부터 포기되었습니다.
prefuse 는 Java에서 풍부한 대화식 데이터 시각화를 작성하기위한 소프트웨어 도구 세트입니다. flare 는 2012 년 이후 포기 된 Adobe Flash Player에서 실행되는 시각화를 만들기위한 ActionScript 라이브러리입니다.
상업적 시나리오에서 확실한 경쟁자는 HTML의 yFiles입니다 .
다음을 제공합니다.
요청 된 기능의 대부분을 보여주는 샘플 렌더링은 다음과 같습니다.
전체 공개 : 저는 yWorks에서 근무하지만 Stackoverflow에서는 고용주를 대표하지 않습니다.