Giới thiệu

X6 là một công cụ chỉnh sửa biểu đồ dựa trên HTML và SVG cung cấp khả năng tùy chỉnh chi phí thấp và các tiện ích mở rộng tích hợp sẵn có cho phép chúng tôi nhanh chóng xây dựng các ứng dụng như DAG、ER、FlowChart、BPMN , v.v.

Đặc trưng

Nút và cạnh dễ dàng tùy chỉnh

X6 hỗ trợ sử dụng SVG và HTML để hiển thị nội dung nút. Trên cơ sở này, chúng ta cũng có thể sử dụng các thành phần React và Vue để kết xuất các nút, điều này sẽ rất thuận tiện trong quá trình phát triển. Ví dụ: chúng tôi có một yêu cầu mới: thêm menu chuột phải vào nút. Sẽ phức tạp hơn khi triển khai bằng SVG, Chúng tôi có thể dễ dàng triển khai nó với nút phản ứng. Chúng ta có thể sử dụng gói kết xuất React @antv/x6-react-shape đi kèm với X6.

Chúng ta có thể sử dụng bộ định tuyến để xác định hình dạng cạnh. Ví dụ: bộ định tuyến tàu điện ngầm có thể làm cho cạnh giống như sơ đồ đường tàu điện ngầm.

Tương tác phong phú

X6 được tích hợp tương tác kết nối , tương tác nhúng , tương tác tô sáng và thậm chí tương tác với công cụ, Ví dụ: tôi có thể tô sáng cổng trong khi kết nối hoặc di chuyển công cụ để điều chỉnh cạnh.

Plugin ra khỏi hộp

X6 có các plugin tích hợp cho các ứng dụng chỉnh sửa biểu đồ thường được sử dụng, chẳng hạn như biến đổi , snapline , clipboard , bàn phím , lịch sử , lựa chọn , v.v. Ví dụ: chúng ta có thể sử dụng plugin dnd để kéo và thả các thành phần từ thư viện thành phần lưu đồ sang thư viện thành phần lưu đồ. đồ thị.

Các thành phần giao diện người dùng phù hợp

Xây dựng một ứng dụng chỉnh sửa biểu đồ phức tạp cũng cần sử dụng các thành phần giao diện người dùng như Menubar, Toolbar, Dropdown, ContextMenu, Splitbox, v.v. Chúng tôi cung cấp một số thành phần React này trong @antv/x6-react-components .

Màn biễu diễn quá xuất sắc

X6 có rất nhiều cải tiến về hiệu suất, chẳng hạn như hiển thị không đồng bộ, hiển thị trong chế độ xem, cả màn hình đầu tiên và tương tác, đồng thời công cụ kết xuất mới nhanh hơn 5 lần so với công cụ kết xuất SVG cho mục đích chung. Bạn có thể trải nghiệm hiệu suất kết xuất tại đây .

Bố cục mạnh mẽ

X6 hoàn toàn sử dụng lại khả năng bố cục của G6 và thực hiện điều chỉnh định dạng dữ liệu, do đó, việc sử dụng chức năng bố cục trong X6 cũng rất thuận tiện.

Phần kết luận

Cảm ơn bạn đã đọc và cảm ơn tất cả các nhà phát triển đã sử dụng X6 và thậm chí đóng góp cho cộng đồng. X6 vẫn đang khám phá hướng chỉnh sửa đồ họa và chính bạn là người đã giúp X6 có thể phát triển hơn nữa. Chúng tôi sẽ đầu tư vào sự phát triển trong tương lai với sự nhiệt tình hơn. Cuối cùng, hy vọng bạn có thể thêm sao vào github của chúng tôi .