Hiển thị biểu đồ mạng JavaScript

Question

Tôi cần biểu đồ trực quan hóa mạng (không phải biểu đồ) trong javascript để nhập json. Tôi cũng đã sử dụng thuật toán công cụ JIT infovis toolkit và cây không gian để hiển thị nhiều cấp độ trong biểu đồ. Nhưng các nút bị thu gọn vì dữ liệu lớn. Trong rgraph, arroheads cạnh sáp nhập với các nút, trong cây không gian nếu con có 4 cha mẹ đặt con quá rộng. vì vậy nó không ổn định với khối lượng lớn dữ liệu. Nhưng tôi không thể tìm thấy đồ thị tương tự như định dạng đầu vào infovis json. Xin vui lòng đề nghị tôi thay thế hoặc giải pháp để giải quyết cây không gian infovis và rgraph. Cảm ơn trước

Answer 1

Theo như tôi biết, có một vài dự án js nguồn mở để làm việc trên trực quan hóa biểu đồ.

1. JIT, bạn đang sử dụng.
2. arborjs
3. protovis từ Stanford. Nó có vẻ tuyệt vời, nhưng nó không còn hoạt động .

Thành thật mà nói, tôi chưa bao giờ sử dụng chúng trong dự án của mình. Bạn có thể tự mình thử.

Answer 2

Đồng thời xem D3, "thư viện JavaScript để thao tác tài liệu dựa trên dữ liệu" và sigma.js, "thư viện JavaScript nhẹ nguồn mở để vẽ đồ thị, sử dụng phần tử canvas HTML".

Answer 3

Bạn có thể muốn kiểm tra tương tác HTML5 bảng xếp hạng thư viện này, được cung cấp bởi Data Visualization Software Lab:

http://datavisualizationsoftwarelab.com/

SDK này cho phép bạn tạo ra hàng loạt các bảng xếp hạng:

• Time dựa biểu đồ
• Biểu đồ mạng
• Biểu đồ tròn
• Sắp có các biểu đồ địa lý, biểu đồ khía cạnh và Biểu đồ XML

Đồ thị là HTML5 thuần túy, không phụ thuộc vào libs khác, do đó dễ dàng tích hợp với bất kỳ khung công tác JS nào (chẳng hạn như jQuery). Sử dụng Canvas để hiển thị, có hỗ trợ đa chạm đầy đủ cho điều hướng, tương tác và khám phá dữ liệu.

Một ví dụ về biểu đồ mạng:

Charts đi kèm với API mở rộng và cài đặt, do đó bạn có thể kiểm soát mọi khía cạnh của các bảng xếp hạng.

Answer 4

Thanh toán netjsongraph.js, một thư viện javascript đơn giản dựa trên D3 sử dụng định dạng NetJSON, được thiết kế đặc biệt cho phần mềm mạng.

Xem netjsongraph demo example.

Tôi hy vọng điều đó sẽ hữu ích.

Answer 5

Đối với tôi - tôi thích vis.js, bởi vì:

• mạng tạo là đàn hồi - tự động điều chỉnh để người dùng mạng lại hình
• Một số tính năng giao diện người dùng hữu ích được tích hợp - chẳng hạn như zoom-in/zoom -out
• Mạng có thể tùy chỉnh cao, - cạnh màu, chiều rộng, v.v ...
• Khi xác định các nút mạng - không cần xác định tọa độ X, Y cho các nút .
  (Tôi đã nhìn thấy một số của lib khi bạn cần phải xác định X, coords Y cho nút, và điều đó thực sự sucks)
• Chưa kể rằng nó là rất dễ sử dụng libarary này, - xem dưới đây:

Cách sử dụng:

// create an array with nodes 
    var nodes = new vis.DataSet([ 
    {id: 1, label: 'Node 1'}, 
    {id: 2, label: 'Node 2'}, 
    {id: 3, label: 'Node 3'}, 
    {id: 4, label: 'Node 4'}, 
    {id: 5, label: 'Node 5'} 
    ]); 

    // create an array with edges 
    var edges = new vis.DataSet([ 
    {from: 1, to: 3, width: 1}, 
    {from: 1, to: 2, width: 6}, 
    {from: 2, to: 4, width: 1}, 
    {from: 2, to: 5, width: 3}, 
    {from: 2, to: 3, width: 1}, 
    ]); 

    // create a network 
    var container = document.getElementById('mynetwork'); 
    var data = { 
    nodes: nodes, 
    edges: edges 
    }; 
    var options = {}; 
    var network = new vis.Network(container, data, options); 

Demo