Thư viện trực quan hóa đồ thị trong JavaScript

Tôi có một cấu trúc dữ liệu đại diện cho một biểu đồ có hướng và tôi muốn hiển thị nó một cách linh hoạt trên trang HTML. Những biểu đồ này thường sẽ chỉ là một vài nút, có thể là mười nút ở đầu cuối, vì vậy tôi đoán là hiệu suất sẽ không phải là vấn đề lớn. Lý tưởng nhất là tôi muốn có thể kết nối nó với jQuery để người dùng có thể điều chỉnh bố cục theo cách thủ công bằng cách kéo các nút xung quanh.

Lưu ý: Tôi không tìm kiếm một thư viện biểu đồ.

Tôi vừa kết hợp những gì bạn có thể đang tìm kiếm: http://www.graphdracula.net

Đó là JavaScript với bố cục đồ thị có hướng, SVG và thậm chí bạn có thể kéo các nút xung quanh. Vẫn cần một số điều chỉnh, nhưng hoàn toàn có thể sử dụng. Bạn dễ dàng tạo các nút và cạnh bằng mã JavaScript như thế này:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Tôi đã sử dụng thư viện Raphael JS đã đề cập trước đây (ví dụ graffle) cộng với một số mã cho thuật toán bố trí biểu đồ dựa trên lực mà tôi tìm thấy trên mạng (mọi thứ nguồn mở, giấy phép MIT). Nếu bạn có bất kỳ nhận xét hoặc cần một tính năng nhất định, tôi có thể thực hiện nó, chỉ cần hỏi!

Bạn có thể muốn có một cái nhìn vào các dự án khác, quá! Dưới đây là hai so sánh meta:

• SocialCompare có một danh sách rộng lớn các thư viện và dòng "Biểu đồ nút / cạnh" sẽ lọc các biểu đồ trực quan hóa.

• DataVisualization.ch đã đánh giá nhiều thư viện, bao gồm cả các nút / biểu đồ. Thật không may, không có liên kết trực tiếp nên bạn sẽ phải lọc "biểu đồ":

Dưới đây là danh sách các dự án tương tự (một số đã được đề cập ở đây):

Thư viện JavaScript thuần túy

• vis.js hỗ trợ nhiều loại biểu đồ mạng / cạnh, cộng với các mốc thời gian và biểu đồ 2D / 3D. Tự động bố trí, tự động phân cụm, động cơ vật lý mùa xuân, thân thiện với thiết bị di động, điều hướng bàn phím, bố cục phân cấp, hoạt hình, vv MIT được cấp phép và phát triển bởi một công ty Hà Lan chuyên nghiên cứu về các mạng tự tổ chức.

• Cytoscape.js - phân tích và hiển thị biểu đồ tương tác với hỗ trợ di động, tuân theo các quy ước của jQuery. Được tài trợ thông qua các khoản tài trợ của NIH và được phát triển bởi @maxkfranz (xem câu trả lời của ông dưới đây ) với sự giúp đỡ từ một số trường đại học và các tổ chức khác.

• Bộ công cụ InfoVis JavaScript - Jit, một khung vẽ và bố cục đồ thị đa mục đích tương tác. Xem ví dụ Cây Hyperbolic . Được xây dựng bởi kiến ​​trúc sư dataviz Twitter Nicolas Garcia Belmonte và được Sencha mua vào năm 2010.

• D3.js Thư viện trực quan hóa đa năng JS mạnh mẽ, kế thừa của Protovis. Xem ví dụ biểu đồ hướng lực và các ví dụ biểu đồ khác trong thư viện .

• Thư viện trực quan hóa của Plotly sử dụng D3.js với các ràng buộc JS, Python, R và MATLAB. Xem ví dụ nexworkx trong IPython tại đây , ví dụ tương tác của con người ở đây và API nhúng của JS .

• sigma.js Thư viện nhẹ nhưng mạnh mẽ để vẽ biểu đồ

• Trình cắm jsPlumb jQuery để tạo các biểu đồ được kết nối tương tác

• Springy - một thuật toán bố trí đồ thị hướng lực

• Processing.js cổng Javascript của thư viện xử lý bởi John Resig

• Biểu đồ JS Nó - các hộp kéo được kết nối bằng các đường thẳng. Bố trí tự động tối thiểu của các dòng.

• RaphaelJS's Graffle - ví dụ biểu đồ tương tác của thư viện vẽ vector đa mục đích chung. RaphaelJS không thể bố trí các nút tự động; bạn sẽ cần một thư viện khác cho điều đó.

• JointJS Core - Thư viện sơ đồ nguồn mở được cấp phép MPL của David Durman. Nó có thể được sử dụng để tạo sơ đồ tĩnh hoặc các công cụ lập sơ đồ tương tác đầy đủ và các nhà xây dựng ứng dụng. Hoạt động trong các trình duyệt hỗ trợ SVG. Các thuật toán bố trí không có trong gói lõi

• mxGraph Thư viện lập biểu đồ HTML 5 thương mại trước đây, hiện có sẵn trong Apache v2.0. mxGraph là thư viện cơ sở được sử dụng trong draw.io .

Thư viện thương mại

• Thư viện bố trí và vẽ biểu đồ tương tác của GoJS

• yFiles cho thư viện bố trí và vẽ biểu đồ thương mại HTML

• Bộ công cụ trực quan hóa mạng thương mại KeyLines

• ZoomCharts Thư viện trực quan đa mục đích thương mại

• Syncfusion JavaScript Sơ đồ thư viện sơ đồ thương mại để vẽ và trực quan hóa.

Thư viện bỏ hoang

• Trình xem Mạng JS có thể nhúng của Cytoscape Web (không có tính năng mới nào được lên kế hoạch; đã thành công bởi Cytoscape.js)

• Trình kết xuất Canviz JS cho đồ thị Graphviz. Bị bỏ rơi vào tháng 9 năm 2013.

• arbor.js Vẽ đồ thị tinh vi với vật lý và mắt đẹp. Bị bỏ rơi vào tháng 5 năm 2012. Một số dĩa bán bảo trì tồn tại.

• jssvggraph "Thuật toán bố trí đồ thị hướng lực đơn giản nhất có thể được triển khai như một thư viện Javascript sử dụng các đối tượng SVG". Bị bỏ rơi vào năm 2012.

• jsdot Ứng dụng vẽ đồ thị phía khách hàng. Bị bỏ rơi vào năm 2011 .

• Bộ công cụ đồ họa Protovis cho trực quan hóa (JavaScript). Thay thế bằng d3.

• Đại diện JS Wheel tương tác cho các kết nối và quan hệ (2008)

• Kịch bản trực quan hóa đồ thị thời kỳ JSViz 2007

• Bố cục đồ thị dagre cho JavaScript

Thư viện không phải Javascript

• Graphviz Ngôn ngữ trực quan đồ thị tinh vi

  • Graphviz đã được biên dịch sang Javascript bằng Emscripten tại đây với bản demo tương tác trực tuyến tại đây

• Flare Vẽ đồ thị dựa trên Flash đẹp và mạnh mẽ

• Trực quan hóa đồ thị Python của NodeBox

Tuyên bố miễn trừ trách nhiệm: Tôi là nhà phát triển của Cytoscape.js

Cytoscape.js là một thư viện trực quan hóa đồ thị HTML5. API rất tinh vi và tuân theo các quy ước của jQuery, bao gồm

• bộ chọn để truy vấn và lọc ( cy.elements("node[weight >= 50].someClass")thực hiện nhiều như bạn mong đợi),
• xích (ví dụ cy.nodes().unselect().trigger("mycustomevent")),
• Các hàm giống như jQuery để liên kết với các sự kiện,
• các phần tử dưới dạng các bộ sưu tập (như jQuery có các bộ sưu tập HTMLDomElements),
• khả năng mở rộng (có thể thêm bố cục tùy chỉnh, giao diện người dùng, chức năng cốt lõi & bộ sưu tập, v.v.),
• và hơn thế nữa.

Nếu bạn đang suy nghĩ về việc xây dựng một ứng dụng web nghiêm túc bằng đồ thị, ít nhất bạn nên xem xét Cytoscape.js. Nó miễn phí và là nguồn mở:

http://js.cytoscape.org

JsVIS khá đẹp, nhưng chậm với đồ thị lớn hơn và đã bị bỏ rơi từ năm 2007.

prefuse là một bộ công cụ phần mềm để tạo trực quan hóa dữ liệu tương tác phong phú trong Java. flare là một thư viện ActionScript để tạo trực quan hóa chạy trong Adobe Flash Player, bị bỏ rơi từ năm 2012.

Trong một kịch bản thương mại, chắc chắn một thí sinh nghiêm túc là yFiles cho HTML :

Nó cung cấp:

• Dễ dàng nhập dữ liệu tùy chỉnh ( bản demo tương tác trực tuyến này dường như thực hiện chính xác những gì OP đang tìm kiếm)
• Chỉnh sửa tương tác để tạo và thao tác sơ đồ thông qua những cử chỉ người dùng (xem hoàn chỉnh biên tập )
• Một API lập trình khổng lồ để tùy chỉnh từng khía cạnh của thư viện
• Hỗ trợ nhóm và lồng nhau (cả tương tác, cũng như thông qua các thuật toán bố trí)
• Không phụ thuộc vào bộ công cụ UI cụ thể nhưng hỗ trợ tích hợp vào hầu hết mọi bộ công cụ Javascript hiện có (xem bản demo "tích hợp" )
• Bố cục tự động (nhiều kiểu khác nhau, như "phân cấp", "hữu cơ", "trực giao", "cây", "tròn", "xuyên tâm", v.v.)
• Tự động định tuyến cạnh tinh vi (định tuyến cạnh trực giao và hữu cơ với tránh chướng ngại vật)
• Bố cục tăng dần và một phần (thêm và xóa các phần tử và chỉ thay đổi một chút hoặc không thay đổi phần còn lại của sơ đồ)
• Hỗ trợ nhóm và lồng nhau (cả tương tác, cũng như thông qua các thuật toán bố trí)
• Triển khai các thuật toán phân tích biểu đồ (đường dẫn, trung tâm, luồng mạng, v.v.)
• Sử dụng các công nghệ HTML 5 như SVG + CSS và Canvas và các thuộc tính tận dụng Javascript hiện đại và các tính năng ES5 và ES6 khác (nhưng vì lý do tương tự sẽ không chạy trong phiên bản IE 8 trở xuống).
• Sử dụng API mô-đun có thể được tải theo yêu cầu bằng trình tải UMD

Dưới đây là một kết xuất mẫu cho thấy hầu hết các tính năng được yêu cầu:

Tiết lộ đầy đủ: Tôi làm việc cho yWorks, nhưng trên Stackoverflow tôi không đại diện cho chủ nhân của mình.

Như guruz đã đề cập, JIT có một số bố cục đồ thị / cây đáng yêu, bao gồm các hình ảnh trực quan khá hấp dẫn của RGraph và HyperTree.

Ngoài ra, tôi vừa đưa ra một triển khai dựa trên SVG siêu đơn giản tại github (không phụ thuộc, ~ 125 LỘC) sẽ hoạt động đủ tốt cho các biểu đồ nhỏ được hiển thị trong các trình duyệt hiện đại.