sigma.js – phiên bản 1.2.2
Sigma.js là một thư viện JavaScript mã nguồn mở nhằm mục đích hiển thị đồ thị với hàng ngàn nút và cạnh, chủ yếu được phát triển bởi @jacomyal và @Yomguithereal.
Tổng quan
Kiến trúc
Từ phiên bản v2, sigma.js tập trung vào việc quản lý hiển thị đồ thị: vẽ, tương tác… Mô hình đồ thị được quản lý trong một thư viện riêng gọi là graphology, đi kèm với các phương thức tiện ích để quản lý cấu trúc dữ liệu đồ thị, và nhiều thư viện phụ để xử lý các vấn đề liên quan đến đồ thị (đo lường, phát hiện cộng đồng, thuật toán bố trí…).
Trang web Graphology cung cấp a list của những thư viện này. Hầu hết chúng có thể giúp bạn giải quyết các vấn đề trong ứng dụng web dựa trên sigma.js của bạn.
Hiển thị
Sigma.js sử dụng WebGL để hiển thị đồ thị. Điều này làm cho nó phù hợp để hiển thị đồ thị trung bình đến lớn trên trang web (hàng ngàn nút và cạnh trở lên). Bạn cũng có thể tùy chỉnh việc hiển thị, nhưng điều này khó hơn so với việc sử dụng các giải pháp dựa trên SVG hoặc Canvas.
Mỗi cách vẽ một nút hoặc cạnh đều được thực hiện dưới dạng một chương trình. Bạn có thể phát triển chương trình của riêng bạn hoặc sử dụng các chương trình do sigma cung cấp. Bạn có thể kiểm tra this example để xem cách sử dụng nhiều chương trình. Ngoài ra, bạn có thể kiểm tra danh sách các chương trình có sẵn here.
Cài đặt
Bạn có thể cài đặt sigma (và graphology – yêu cầu cho sigma hoạt động) trong dự án JavaScript hoặc TypeScript của bạn bằng cách sử dụng npm:
npm install graphology sigma
Ví dụ
Thư mục examples chứa một loạt các dự án TypeScript độc lập mà bạn có thể duyệt và chỉnh sửa trên CodeSandbox hoặc cài đặt cục bộ tương tự:
git clone git@github.com:jacomyal/sigma.js.git
cd sigma.js
npm install
cd examples
npm start --example=load-gexf-file # Change this to the desired example
Danh sách các ví dụ có sẵn
- Fetching and displaying a graph contained in a gexf file (fallback link)
- Using node & edge reducers to handle interactivity (fallback link)
- Fetching, parsing & wrangling a CSV file to create a network map (fallback link)
- Handling drag and drop of nodes as well as node & edge creation on click (fallback link)
- Displaying arbitrary elements, such as cluster labels, synchronized with the network (fallback link)
- Applying different animated layout algorithms to a network (fallback link)
- Displaying nodes in various custom ways (fallback link)
- Saving the graph as a PNG image (fallback link)
- Use events to implement interactions (fallback link)
- See how sigma behaves with larger graphs (fallback link)
Ngoài ra, ứng dụng web dựa trên sigma.js có tính thực tế hơn có sẵn trong thư mục demo. Nó mục tiêu là hiển thị một trường hợp sử dụng thực tế và là trưng bày chính của sigma.js website.
Trang web
Trang web hiện tại là một trang web đơn giản được tạo thủ công có một trang duy nhất. Nó nằm trong thư mục website. Nó cũng trưng bày bản demo dựa trên React.js có sẵn trong thư mục demo bằng một iframe. Trang web chính nó không cần bất kỳ bước xây dựng nào, mặc dù bản demo thì cần.
Nó đã được thiết kế một cách tử tế bởi Robin de Mourat từ đội ngũ Sciences-Po médialab.
Phát triển
Để bắt đầu một máy chủ phát triển sẽ tải lại trang web khi mã được cập nhật, chạy:
npm run website:watch
Sau đó, mở localhost:8080 trong trình duyệt của bạn. Khi bất kỳ tệp nào trong thư mục website được lưu (bao gồm cả bản demo), trang web sẽ được tải lại.
Xây dựng
Để đơn giản làm demo và sao chép bản bundle vào thư mục website, chỉ cần chạy:
npm run website:all
Đóng góp
Bạn có thể đóng góp bằng cách gửi issues tickets và đề xuất pull requests. Đảm bảo rằng các kiểm tra và kiểm tra mã đã qua trước khi gửi bất kỳ yêu cầu kéo nào.
Bạn cũng có thể duyệt tài liệu liên quan here.
Chi tiết tải xuống:
Tác giả: jacomyal
Mã nguồn: https://github.com/jacomyal/sigma.js
Giấy phép: MIT license
