JavaScript의 그래프 시각화 라이브러리

StackOverflow https://stackoverflow.com/questions/7034

문제

방향성 그래프를 나타내는 데이터 구조가 있고 이를 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 라이센스)에 대한 일부 코드를 사용했습니다.의견이 있거나 특정 기능이 필요하면 구현해 드릴 수도 있으니 문의해 주세요!

다른 프로젝트도 살펴보고 싶을 수도 있습니다!다음은 두 가지 메타 비교입니다.

  • 소셜비교 광범위한 라이브러리 목록이 있으며 "Node / edge graph" 행은 그래프 시각화 항목을 필터링합니다.

  • DataVisualization.ch는 노드/그래프 라이브러리를 포함하여 많은 라이브러리를 평가했습니다.안타깝게도 직접 ​​링크가 없으므로 "그래프"로 필터링해야 합니다.Selection DataVisualization.ch

유사한 프로젝트 목록은 다음과 같습니다(일부는 이미 여기에 언급되어 있습니다).

순수 JavaScript 라이브러리

  • vis.js 다양한 유형의 네트워크/에지 그래프와 타임라인 및 2D/3D 차트를 지원합니다.자동 레이아웃, 자동 클러스터링, 탄력 있는 물리 엔진, 모바일 친화적, 키보드 탐색, 계층적 레이아웃, 애니메이션 등 MIT 라이센스 자체 구성 네트워크 연구를 전문으로 하는 네덜란드 회사에서 개발했습니다.

  • Cytoscape.js - jQuery 규칙을 따르는 모바일 지원을 통한 대화형 그래프 분석 및 시각화.NIH 보조금을 통해 자금을 지원받고 다음에 의해 개발됨 @maxkfranz (보다 아래 그의 대답) 여러 대학 및 기타 조직의 도움을 받았습니다.

  • JavaScript InfoVis 툴킷 - Jit은 대화형 다목적 그래프 그리기 및 레이아웃 프레임워크입니다.예를 들어 쌍곡선 트리.Twitter 데이터 시각화 설계자가 구축함 니콜라스 가르시아 벨몬테 그리고 센차에서 구매했어요 2010 년에.

  • D3.js Protovis의 후속 제품인 강력한 다목적 JS 시각화 라이브러리입니다.참조 힘 방향 그래프 예 및 기타 그래프 예 갤러리.

  • 플로틀리의 JS 시각화 라이브러리는 JS, Python, R 및 MATLAB 바인딩과 함께 D3.js를 사용합니다.IPython의 nexworkx 예제 보기 여기, 인간 상호 작용의 예 여기, 그리고 JS 삽입 API.

  • 시그마.js 그래프 그리기를 위한 가볍지만 강력한 라이브러리

  • jsPlumb 대화형 연결 그래프를 생성하기 위한 jQuery 플러그인

  • 경쾌한 - 힘 방향 그래프 레이아웃 알고리즘

  • 프로세싱.js John Resig의 처리 라이브러리의 Javascript 포트

  • JS 그래프 잇 - 직선으로 연결된 드래그 앤 드롭 상자.라인의 최소 자동 레이아웃.

  • RaphaelJS의 Graffle - 일반적인 다목적 벡터 드로잉 라이브러리의 대화형 그래프 예입니다.RaphaelJS는 노드를 자동으로 레이아웃할 수 없습니다.이를 위해서는 또 다른 라이브러리가 필요합니다.

  • JointJS 코어 - David Durman의 MPL 라이선스 오픈 소스 다이어그램 라이브러리.정적 다이어그램이나 완전 대화형 다이어그램 작성 도구 및 애플리케이션 빌더를 생성하는 데 사용할 수 있습니다.SVG를 지원하는 브라우저에서 작동합니다.핵심 패키지에 포함되지 않은 레이아웃 알고리즘

  • mxGraph 이전에는 상용 HTML 5 다이어그램 라이브러리가 이제 Apache v2.0에서 사용 가능합니다.mxGraph는 다음에서 사용되는 기본 라이브러리입니다. draw.io.

상업 도서관

  • GoJS 대화형 그래프 그리기 및 레이아웃 라이브러리

  • yHTML용 파일 상업용 그래프 그리기 및 레이아웃 라이브러리

  • 키라인 상용 JS 네트워크 시각화 툴킷

  • 줌차트 상업용 다목적 시각화 라이브러리

  • 동기화 JavaScript 다이어그램 그리기 및 시각화를 위한 상업용 다이어그램 라이브러리입니다.

버려진 도서관

  • 사이토스케이프 웹 내장형 JS 네트워크 뷰어(새로운 기능 계획 없음,Cytoscape.js에 의해 계승됨)

  • 캔비즈 JS 렌더러 Graphviz 그래프용. 버려진 2013년 9월.

  • arbor.js 멋진 물리학과 눈요기를 갖춘 정교한 그래프.2012년 5월에 폐기되었습니다.여러 개의 반 유지 포크가 존재합니다.

  • jssvg그래프 "SVG 객체를 사용하는 Javascript 라이브러리로 구현된 가장 간단한 강제 방향 그래프 레이아웃 알고리즘"입니다.2012년에 버려졌습니다.

  • jsdot 클라이언트측 그래프 그리기 애플리케이션입니다. 2011년에 포기됨.

  • 프로토비스 시각화를 위한 그래픽 도구 키트(JavaScript).d3으로 대체되었습니다.

  • 무휠 연결 및 관계를 위한 대화형 JS 표현(2008)

  • JSViz 2007년 그래프 시각화 스크립트

  • 다그레 JavaScript용 그래프 레이아웃

비 자바스크립트 라이브러리

다른 팁

부인 성명:저는 Cytoscape.js의 개발자입니다.

Cytoscape.js는 HTML5 그래프 시각화 라이브러리입니다.API는 정교하며 다음을 포함한 jQuery 규칙을 따릅니다.

  • 쿼리 및 필터링을 위한 선택기(cy.elements("node[weight >= 50].someClass") 당신이 기대하는 만큼 많은 일을 합니다),
  • 연결(예: cy.nodes().unselect().trigger("mycustomevent")),
  • 이벤트 바인딩을 위한 jQuery와 유사한 함수,
  • 컬렉션으로서의 요소(예: jQuery에는 HTMLDomElements 컬렉션이 있음)
  • 확장성(사용자 정의 레이아웃, UI, 핵심 및 컬렉션 기능 등 추가 가능)
  • 그리고 더.

그래프가 포함된 진지한 웹앱 구축을 고려하고 있다면 최소한 Cytoscape.js를 고려해야 합니다.무료이며 오픈 소스입니다.

http://js.cytoscape.org

JsVIS 꽤 훌륭했지만 그래프가 커지면 속도가 느려지고 2007년부터 폐기되었습니다.

프리퓨즈 Java로 풍부한 대화형 데이터 시각화를 생성하기 위한 소프트웨어 도구 세트입니다. 플레어 2012년 이후 폐기된 Adobe Flash Player에서 실행되는 시각화를 만들기 위한 ActionScript 라이브러리입니다.

상업적인 시나리오에서 확실히 심각한 참가자는 yHTML용 파일:

다음을 제공합니다:

  • 쉬운 수입 사용자 정의 데이터(이 대화형 온라인 데모 OP가 찾고 있던 것을 거의 정확하게 수행하는 것 같습니다)
  • 사용자 제스처를 통해 다이어그램을 생성하고 조작하기 위한 대화형 편집(전체 내용 참조) 편집자)
  • 거대한 프로그래밍 API 라이브러리의 모든 측면을 사용자 정의하기 위해
  • 을지 지하다 그룹화 그리고 중첩 (대화식 및 레이아웃 알고리즘을 통해)
  • 특정 UI 툴킷에 의존하지 않지만 다음을 지원합니다. 완성 거의 모든 기존 Javascript 툴킷에 포함됩니다(참조: "통합" 데모)
  • 자동 레이아웃("계층형", "유기적", "직교형", "나무형", "원형", "방사형" 등과 같은 다양한 스타일)
  • 자동 정교한 에지 라우팅(장애물 회피 기능을 갖춘 직교 및 유기 에지 라우팅)
  • 증분 및 부분 레이아웃(요소를 추가 및 제거하고 나머지 다이어그램은 약간만 변경하거나 전혀 변경하지 않음)
  • 그룹화 및 중첩 지원(대화형 및 레이아웃 알고리즘을 통해)
  • 구현 그래프 분석 알고리즘 (경로, 중심성, 네트워크 흐름 등)
  • SVG+CSS 및 Canvas와 같은 HTML 5 기술과 속성을 활용하는 최신 Javascript 및 기타 ES5 및 ES6 기능을 사용합니다(그러나 같은 이유로 IE 버전 8 이하에서는 실행되지 않습니다).
  • UMD 로더를 사용하여 주문형으로 로드할 수 있는 모듈식 API를 사용합니다.

다음은 요청된 기능을 대부분 보여주는 샘플 렌더링입니다.

Screenshot of a sample rendering created by the BPMN demo.

전체 공개:저는 yWorks에서 일하지만 Stackoverflow에서는 고용주를 대표하지 않습니다.

구루즈가 언급했듯이, JIT 매우 매력적인 RGraph 및 HyperTree 시각화를 포함하여 여러 가지 멋진 그래프/트리 레이아웃이 있습니다.

그리고 방금 아주 간단한 SVG 기반의 github에서 구현 (종속성 없음, ~125 LOC) 이는 최신 브라우저에 표시되는 작은 그래프에 충분히 잘 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top