Xây dựng Đồ thị Chỉ thị Lực từ Chỉ Dữ liệu Liên kết

Question

Tôi mới sử dụng d3.js một chút, nhưng tôi có khá nhiều điều thú vị với nó. Cho đến nay, tôi đã thực hiện một đồ thị theo hướng lực lượng rất gần với nhiều ví dụ và hướng dẫn trên mạng.

Direct Lo ngại

Giống như rất nhiều các ví dụ, tôi có một cấu trúc JSON như thế này:

{"nodes": ["node1", "node2", ... ], 
"links": [{source: 0, target: 1, "field1": 5, ...}, ... ]} 

Tuy nhiên, tôi nghĩ rằng nó sẽ được dễ dàng hơn để xây dựng nguồn dữ liệu của tôi như thế này:

{"links": [ 
    {source: "node1", target: "node2", "field1": 5, ...}, 
    {source: "node2", target: "node4", "field1": 1, ...}, 
    {source: "node3", target: "node4", "field1": 8, ...} 
]} 

Thay vì xác định rõ ràng các nút trong biểu đồ, chúng được xác định hoàn toàn trong cấu trúc liên kết.

lý do

tôi muốn liệt kê các mục tiêu cuối cùng của dự án trong trường hợp ai đó đã có một số mã ví dụ cụ thể hoặc cách thành ngữ để làm điều này trong đó tôi không biết.

Mục tiêu của dự án cuối cùng sẽ là biểu đồ đang cập nhật trong thời gian thực. Back-end đang được phát triển và có thể thay đổi và sửa đổi.

Hiện tại, tôi đang tưởng tượng việc kéo xuống nguồn cấp dữ liệu JSON cập nhật cứ sau X giây và cập nhật cấu trúc của biểu đồ đó với thông tin mới. Nguồn cấp dữ liệu được kéo sẽ chỉ chứa các cấu trúc được cập nhật của biểu đồ, do đó, tập lệnh sẽ cần phải duy trì tất cả các nút và liên kết đã được kéo và thêm bất kỳ nút nào mới, nếu cần.

Cảm ơn!

Tôi xin lỗi nếu điều này đã được yêu cầu trước đó. Tôi đã làm một số tìm kiếm và không tìm thấy bất cứ điều gì. Cảm thấy tự do để xúc phạm và berate tôi nếu tôi bị mất nó.

Answer 1

Tôi đã có để làm điều này một vài lần. Cách tiếp cận đơn giản nhất mà tôi tìm thấy là tính toán các nút cơ sở không có danh sách các liên kết và sau đó biến nó thành một mảng để đồ thị lực sử dụng:

var links = [ .... ]; 
var nodeMap = {}; 
links.forEach(function(d, i) { 
    nodeMap[d.source] = true; 
    nodeMap[d.target] = true; 
}); 

var nodes = []; 
for (key in nodeMap) 
    nodes.push(key); 

d3.layout.force() 
     .nodes(nodes) 
     .links(links); 

Answer 2

Tôi đã thực hiện điều này trong ví dụ "D3 Based Force Directed Radial Graph". Tôi làm điều này vì tôi muốn hiểu cách dữ liệu được sử dụng, nội bộ, độc lập với các cấu trúc như JSON và CSV, mà luôn có thể được xếp lớp, sau này.

Nhưng dù sao, tôi hy vọng ví dụ này sẽ giúp bạn.

tốt nhất của tôi,

Frank