JavaScript의 그래프 시각화 라이브러리
유향 그래프를 나타내는 데이터 구조가 있으며이를 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"를 필터링해야합니다.
다음은 유사한 프로젝트 목록입니다 (일부는 이미 여기에서 언급했습니다).
순수한 JavaScript 라이브러리
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 정교한 그래프 시각화 언어
- Graphviz는 여기 에 온라인 대화식 데모 와 함께 Emscripten을 사용하여 Javascript로 컴파일되었습니다.
플레어 아름답고 강력한 플래시 기반 그래프 그리기
NodeBox Python 그래프 시각화
면책 조항 : 저는 Cytoscape.js의 개발자입니다
Cytoscape.js는 HTML5 그래프 시각화 라이브러리입니다. API는 정교하며 jQuery 규칙을 따릅니다.
- 쿼리 및 필터링을위한 선택기 (
cy.elements("node[weight >= 50].someClass")예상 한만큼) - (예 : 체인
cy.nodes().unselect().trigger("mycustomevent")) - 이벤트에 바인딩하기위한 jQuery와 유사한 함수
- jQuery에 HTMLDomElements 컬렉션이있는 것처럼 요소를 컬렉션으로
- 확장 성 (사용자 정의 레이아웃, UI, 핵심 및 수집 기능 등 추가 가능),
- 그리고 더.
그래프를 사용하여 심각한 webapp를 작성하려는 경우 최소한 Cytoscape.js를 고려해야합니다. 무료이며 오픈 소스입니다.
JsVIS 는 꽤 좋았지 만 더 큰 그래프에서는 느리고 2007 년부터 포기되었습니다.
prefuse 는 Java에서 풍부한 대화식 데이터 시각화를 작성하기위한 소프트웨어 도구 세트입니다. flare 는 2012 년 이후 포기 된 Adobe Flash Player에서 실행되는 시각화를 만들기위한 ActionScript 라이브러리입니다.
상업적 시나리오에서 확실한 경쟁자는 HTML의 yFiles입니다 .
다음을 제공합니다.
- 손쉬운 맞춤 데이터 가져 오기 ( 이 대화 형 온라인 데모 는 OP가 원하는 것을 정확하게 수행하는 것으로 보입니다)
- 사용자 제스처를 통해 다이어그램을 작성하고 조작하기위한 대화식 편집 (전체 편집기 참조 )
- 라이브러리의 모든 측면을 사용자 정의 하기 위한 거대한 프로그래밍 API
- 그룹화 및 중첩 지원 (대화식 및 레이아웃 알고리즘을 통한)
- 특정 UI 툴킷에 의존하지 않지만 거의 모든 기존 Javascript 툴킷에 통합 을 지원합니다 ( "통합"데모 참조 ).
- 자동 레이아웃 ( "hierarchic", "organic", "orthogonal", "tree", "circular", "radial"등과 같은 다양한 스타일)
- 자동 정교한 엣지 라우팅 (장애 회피 기능이있는 직교 및 유기 엣지 라우팅)
- 증분 및 부분 레이아웃 (요소 추가 및 제거, 다이어그램의 나머지 부분을 약간 또는 전혀 변경하지 않음)
- 그룹화 및 중첩 지원 (대화식 및 레이아웃 알고리즘을 통한)
- 구현 그래프 분석 알고리즘 (경로 centralities 네트워크 흐름 등)
- SVG + CSS 및 Canvas와 같은 HTML 5 기술과 속성 및 기타 더 많은 ES5 및 ES6 기능을 활용하는 최신 Javascript를 사용합니다 (그러나 같은 이유로 IE 버전 8 이하에서는 실행되지 않음).
- UMD 로더를 사용하여 주문형으로로드 할 수있는 모듈 식 API 사용
요청 된 기능의 대부분을 보여주는 샘플 렌더링은 다음과 같습니다.
전체 공개 : 저는 yWorks에서 근무하지만 Stackoverflow에서는 고용주를 대표하지 않습니다.
guruz가 언급했듯이 JIT 에는 매력적인 RGraph 및 HyperTree 시각화를 포함하여 멋진 그래프 / 트리 레이아웃이 있습니다.
또한 최신 브라우저에 표시되는 작은 그래프에 충분하게 작동하는 github (종속성 없음, ~ 125 LOC) 에서 매우 간단한 SVG 기반 구현을 방금했습니다 .
참고 URL : https://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript
'Programing' 카테고리의 다른 글
| HTML5 모범 사례; (0) | 2020.02.11 |
|---|---|
| CSS에 여러 변환을 적용하는 방법은 무엇입니까? (0) | 2020.02.11 |
| GitHub에서 단일 파일 다운로드 (0) | 2020.02.10 |
| 기본 파이썬 반복기 빌드 (0) | 2020.02.10 |
| Lollipop의 최신 Chrome 버전에서 헤더 바와 주소 표시 줄의 색상을 변경하는 방법은 무엇입니까? (0) | 2020.02.10 |