Neo4j graph visualizing library

Question

Gần đây tôi đã khám phá một số thư viện nơi tôi có thể hình dung đồ thị từ Neo4j, nhưng không có cái nhìn rõ ràng muốn chọn, vì vậy tôi có một vài suy nghĩ tôi muốn chia sẻ.

Yêu cầu và mong muốn của tôi - sau khi tìm kiếm thông qua REST API với truy vấn cypher trực quan hóa biểu đồ với tất cả các mối quan hệ, nút. Và kết quả làm cho tương tác - có thể kéo/thả ... cơ hội để tiết lộ các nút/rels khác khi nhấp chuột. Nhập các nút thông qua dữ liệu json và có thể hiển thị nhanh nhất tối đa 400 phần tử.

Vì vậy, tôi đã khám phá nhiều hơn các thư viện khác:

Three.js - chủ yếu cho 3D. (Nếu tôi không cần 3D thì tốt hơn không chọn cái này)

Arbor.js - vẽ lá tùy thuộc vào bạn, chủ yếu là thư mục trình bày

VivaGraphJS - dễ sử dụng, nhưng hầu như không có tài liệu hướng dẫn :(

D3.js - trông tốt, nhưng sử dụng SVG

Cytoscape.js - có vẻ tốt đẹp, nhưng tôi đọc mà tôi không thể sử dụng nó với Neo4j Is D3.js the right choice for real-time visualization of Neo4j Graph DB data tại sao

Processing.js -.? có nó ngôn ngữ của riêng tôi tương tự như Java. Tôi không có nhiều trong Java-l ngôn ngữ ike (chưa).

Và tôi có một vài câu hỏi:

1) Trải nghiệm của bạn - lợi ích, yếu của thư viện?

2) Tôi cho rằng tôi muốn sử dụng canvas được insted của SVG? (rất nhiều yếu tố nhỏ trên màn hình).

3) Arbor là thư viện đặc biệt để bố trí, nhưng những người khác không có thuật toán bố cục hoặc gì?

Tôi sẽ đánh giá cao bất kỳ ý kiến ​​nào! :-)

Answer 1

Tôi không thấy sigma.js trong danh sách đó mà bạn có thể muốn xem xét vì nó rất hữu ích (example)

Bạn sẽ phải bằng cách nào đó xử lý các rendering của dữ liệu nhận được (tức là đi từ một cấu trúc dữ liệu đến biểu diễn trực quan của nó) và điều này phụ thuộc vào những gì bạn đang cố gắng hiển thị/nói với hình ảnh đó, cách bạn muốn làm và cách bạn muốn nó trông như thế nào.

Là điểm khởi đầu, tôi sẽ sử dụng D3 và Sigma.

Answer 2

Tôi cân nhắc tình huống tương tự. Tôi đã chọn sigma.js.

1) Trải nghiệm của bạn - lợi ích, điểm yếu của thư viện?

sigma.js là cụ thể để hiển thị biểu đồ. d3 là đầy đủ trên hộp công cụ để hiển thị. Vì tôi chỉ muốn vẽ đồ thị, giao diện sigma.js súc tích dễ làm việc hơn. Tôi nghĩ đây là the video, nơi người sáng tạo nói về cách sigma.js có thể thực hiện dựng hình gia tăng và do đó thực hiện tốt hơn và xử lý nhiều đỉnh/cạnh trơn tru hơn.

2) Tôi cho rằng tôi muốn sử dụng canvas được insted của SVG?(rất nhiều nhỏ yếu tố trên màn hình).

sigma.js hiển thị cho canvas.

Dưới đây là sigma.js examples. Ví dụ "ẩn nút" hiển thị tương tác chuột. Bổ sung, đây là một số blog post cho biết cách người ta có thể dễ dàng tích hợp neo4j w/sigma bằng cách sử dụng số lượng rất nhỏ dữ liệu được mã hóa bằng văn bản trong node.js. Nó sẽ được dễ dàng để cổng này cho bất kỳ ngôn ngữ máy chủ.

Answer 3

Tôi lưu ý rằng Gephi không có trong danh sách của bạn. Là trình chỉnh sửa/trình chỉnh sửa độc lập, tốt nhất mà tôi đã sử dụng (bạn chỉ cần tải plugin neo4j và nó sẽ nhập các tệp nguồn của cơ sở dữ liệu và cho phép bạn xem nó). Nguồn mở của nó, vì vậy bạn có thể bao gồm nó như là một phần của một dự án.

Answer 4

Còn thiếu trong danh sách của bạn là yFiles các thư viện hình ảnh hóa biểu đồ của gia đình.

Biến thể JavaScript nếu sử dụng cả Canvas và SVG. Điều này có thể cho hiệu suất rất tốt và trực quan chất lượng cao cùng một lúc. Đối với các biểu đồ giống như bóng tóc (hàng nghìn dấu chấm và dòng, nhưng có thể không có văn bản), bạn có thể sử dụng Canvas và khi bạn phóng to để thực sự hiểu dữ liệu, bạn có thể sử dụng SVG để xem trực quan chi tiết với nhãn, biểu tượng, dữ liệu hiển thị trực quan, v.v. Bạn có thể sử dụng cả hai kỹ thuật trong cùng một hình ảnh, thậm chí cùng một lúc, được hưởng lợi từ tốt nhất của cả hai thế giới (demo).

Kết nối yFiles với Neo4j thật dễ dàng using the JavaScript Bolt driver.

Nhắm vào 400 phần tử trong chế độ xem là một ý tưởng hay. Trong khi các đồ thị lớn hơn có xu hướng trông thực sự tốt đẹp, hầu hết thời gian bạn sẽ không đạt được nhiều thông tin chi tiết bằng cách nhìn vào "quả bóng tóc". Những hình ảnh gần như nghệ thuật tất cả trông rất giống nhau và như vậy mang ít hoặc không có thông tin. Thông thường, bạn cũng có thể hiển thị hình ảnh tĩnh hiển thị lần truy cập tìm kiếm hình ảnh google đầu tiên cho truy vấn "biểu đồ hình cầu" :-)

Để hỗ trợ người dùng tốt hơn trong quá trình thăm dò, lọc, nhóm, làm tổ và tương tác động nên được thêm vào ứng dụng trình xem. Làm thế nào điều này có thể được thực hiện, rất nhiều phụ thuộc vào lĩnh vực kinh doanh trong trực quan, mặc dù và chỉ có rất ít phương pháp chung chung mà làm việc cho đồ thị chung chung.

^{Tuyên bố từ chối trách nhiệm: Tôi làm việc cho công ty tạo thư viện hình ảnh được đề cập ở trên. Tuy nhiên, tôi không đại diện cho nó trên SO.}