Làm thế nào để chuyển đổi sang định dạng JSON của D3?

Question

Trong khi sau rất nhiều ví dụ D3, dữ liệu thường được ở định dạng được đưa ra trong flare.json:

{ 
"name": "flare", 
"children": [ 
    { 
    "name": "analytics", 
    "children": [ 
    { 
    "name": "cluster", 
    "children": [ 
     {"name": "AgglomerativeCluster", "size": 3938}, 
     : 

Tôi có một danh sách kề như sau:

A1 A2 
A2 A3 
A2 A4 

mà tôi muốn chuyển đổi sang định dạng trên . Hiện nay, tôi đang làm điều này trên phía máy chủ nhưng có cách nào để đạt được điều này bằng cách sử dụng các chức năng của d3? Tôi tìm thấy một here, nhưng cách tiếp cận dường như đòi hỏi phải sửa đổi thư viện lõi d3 mà tôi không có lợi vì bảo trì. Bất kỳ đề xuất?

Answer 1

Không có khuôn khổ bắt buộc , vì bạn thường có thể xác định lại dữ liệu của mình thông qua các hàm truy cập khác nhau (chẳng hạn như hierarchy.children) và array.map. Nhưng định dạng bạn trích dẫn có lẽ là biểu diễn thuận tiện nhất cho cây vì nó hoạt động với các trình truy cập mặc định.

Câu hỏi đầu tiên là bạn có dự định hiển thị số graph hoặc tree hay không. Đối với biểu đồ, cấu trúc dữ liệu được xác định theo các điều khoản của nodes và links. Đối với cây, đầu vào cho bố trí là nút gốc, có thể có một mảng là child nodes và các nút lá có liên kết value.

Nếu bạn muốn hiển thị biểu đồ và tất cả những gì bạn có là danh sách cạnh, thì bạn sẽ muốn lặp qua các cạnh để tạo ra một loạt các nút và một chuỗi liên kết. Giả sử bạn có một tập tin gọi là "graph.csv":

source,target 
A1,A2 
A2,A3 
A2,A4 

Bạn có thể tải tập tin này bằng d3.csv và sau đó tạo ra một mảng các nút và các liên kết:

d3.csv("graph.csv", function(links) { 
    var nodesByName = {}; 

    // Create nodes for each unique source and target. 
    links.forEach(function(link) { 
    link.source = nodeByName(link.source); 
    link.target = nodeByName(link.target); 
    }); 

    // Extract the array of nodes from the map by name. 
    var nodes = d3.values(nodeByName); 

    function nodeByName(name) { 
    return nodesByName[name] || (nodesByName[name] = {name: name}); 
    } 
}); 

Sau đó bạn có thể vượt qua các nút và liên kết đến các bố trí lực lượng để hình dung đồ thị:

• http://bl.ocks.org/2949937

Nếu bạn muốn tạo ra một cây thay vào đó, thì bạn sẽ cần thực hiện một dạng chuyển đổi dữ liệu hơi khác để tích lũy các nút con cho mỗi phụ huynh.

d3.csv("graph.csv", function(links) { 
    var nodesByName = {}; 

    // Create nodes for each unique source and target. 
    links.forEach(function(link) { 
    var parent = link.source = nodeByName(link.source), 
     child = link.target = nodeByName(link.target); 
    if (parent.children) parent.children.push(child); 
    else parent.children = [child]; 
    }); 

    // Extract the root node. 
    var root = links[0].source; 

    function nodeByName(name) { 
    return nodesByName[name] || (nodesByName[name] = {name: name}); 
    } 
}); 

Giống như vậy:

• http://bl.ocks.org/2949981

Answer 2

D3 không yêu cầu định dạng cụ thể. Tất cả phụ thuộc vào ứng dụng của bạn. Bạn chắc chắn có thể chuyển đổi một danh sách kề sang định dạng được sử dụng trong flare.json, nhưng điều này một lần nữa sẽ là mã dành riêng cho ứng dụng. Nói chung, bạn không thể làm điều đó như danh sách kề như vậy không có yếu tố "đầu" hoặc "gốc", bạn sẽ cần phải xây dựng một cây. Ngoài ra, bạn sẽ cần phải xử lý các chu kỳ, trẻ mồ côi vv một cách riêng biệt.

Cho rằng bạn đang thực hiện chuyển đổi ở phía máy chủ, tôi muốn được cám dỗ để nói rằng "nếu nó không bị hỏng, không sửa chữa nó";)