Как конвертировать в формат JSON D3?

Question

Хотя после многочисленных примеров D3, данные обычно получает отформатирована в формате, указанном в flare.json:

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

У меня есть список смежности следующим образом:

A1 A2 
A2 A3 
A2 A4 

, который я хочу, чтобы преобразовать в вышеуказанном формате , В настоящее время я делаю это на стороне сервера, но есть ли способ достичь этого, используя функции d3? Я нашел один here, но подход, похоже, требует модификации основной библиотеки d3, которую я не сторонник из-за ремонтопригодности. Какие-либо предложения?

Answer 1

Там нет предписанного формата , так как вы обычно можете переопределять свои данные с помощью различных функций доступа (например, hierarchy.children) и array.map. Но формат, который вы цитируете, вероятно, является наиболее удобным представлением для деревьев, потому что он работает с аксессуарами по умолчанию.

Первый вопрос: собираетесь ли вы отображать graph или tree. Для графиков структура данных определена в терминах nodes и links. Для деревьев вход в макет - это корневой узел, который может иметь массив из child nodes, а у листовых узлов - value.

Если вы хотите отобразить диаграмму , и все, что у вас есть, это список ребер, то вы захотите перебрать по краям, чтобы создать массив узлов и массив ссылок. Скажем, у вас есть файл под названием «graph.csv»:

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

Вы можете загрузить этот файл, используя d3.csv, а затем произвести массив узлов и связей:

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}); 
    } 
}); 

Вы можете затем передать эти узлы и ссылки на макете силы, чтобы визуализировать график:

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

Если вы хотите создать дерево , то вам нужно сделать несколько другую форму преобразования данных, чтобы накапливать дочерние узлы для каждого родителя.

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}); 
    } 
}); 

Как так:

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

Answer 2

D3 не требует определенного формата. Все зависит от вашего приложения. Вы можете, конечно, преобразовать список смежности в формат, используемый в flare.json, но это опять-таки будет конкретный код приложения. В общем, вы не можете этого сделать, поскольку списки смежности как таковые не имеют «головных» или «корневых» элементов, которые вам нужно будет построить. Кроме того, вам нужно будет обрабатывать циклы, сироты и т. Д. Отдельно.

Учитывая, что вы сейчас делаете преобразование на стороне сервера, я бы соблазна сказать, что «если он не сломались, не исправить»;)