D3.js - создание силового направленного иерархического дерева из данных csv

Question

Итак, я пытаюсь создать иерархическую древовидную диаграмму, используя D3.js. Предполагается, что он работает поверх QtWebView и до сих пор так хорош: он работает. Теперь мне нужно обработать бит обработки данных приложения. Мои данные хранятся в формате CSV (не мой выбор, и я не имею никакого мнения по этому вопросу) и описан ниже.

Мой вопрос: Как вывести JSON из этого CSV?

Я искал примеры на несколько дней, но я застрял. Я просто задавался вопросом, может ли кто-нибудь указать мне в правильном направлении, так как я получаю примеры того, как создавать дерево с данными в формате JSON, а люди говорят о том, как использовать плагины для вывода JSON с Qt.

У меня нет проблем при чтении/записи в файлы CSV/JSON. Мне просто нужно знать, как сделать алгоритм, который позволит мне из этих данных выводить JSON.

Это мой пример CSV файл (node_type и node_size только для шоу):

 
node_id,name,node_size,node_type,parent_node 
1,node1,122,4,17 
2,node2,127,4,20 
3,node3,64,2,5 
4,node4,147,5,14 
5,node5,146,5,12 
6,node6,57,4,10 
7,node7,149,1,20 
8,node8,141,6,10 
9,node9,65,5,10 
10,node10,108,2,10 
11,node11,97,6,2 
12,node12,102,2,5 
13,node13,79,6,3 
14,node14,90,2,2 
15,node15,129,1,8 
16,node16,76,1,8 
17,node17,68,6,13 
18,node18,53,5,7 
19,node19,112,6,20 
20,node20,147,5,6 

EDIT: Я попробовал кончик Пабло Наварро и произвел следующий сценарий для D3.js для обработки. Это не вызывает никаких ошибок, но ничего не отображается. Может ли кто-нибудь намекнуть на почему?

EDIT2: Исправлена ​​опечатка в коде.

var width = 960, height = 500; 
    var color = d3.scale.category20(); 
    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 
    var nodesArray = [], edgesArray = []; 

    d3.csv('nodes.csv', function(data) { 
     for (var k = 0, n = data.length; k < n; k += 1) { 
      nodesArray.push({name: data[k].name, size: data[k].node_size, id: data[k].node_id}), 
      edgesArray.push({source: data[k].node_id, target: data[k].parent_node});  
     } 
    }); 

    var force = d3.layout.force() 
     .nodes(nodesArray) 
     .links(edgesArray) 
     .size([width, height]) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(edgesArray) 
     .enter().append("line") 
     .attr("class", "link") 
    var node = svg.selectAll(".node") 
     .data(nodesArray) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", nodesArray.size) 

EDIT3: Одна маленькая деталь, которую я думает, что может делать все различия: Я звоню это локально, а на местном уровне, я не имею в виду в «локальный» веб-сервер своего рода, но в файл. Из того, что я прочитал в Jerome Crukier's tutorial:

Это больше не будет работать в локальной файловой системе (т.е. открыть файл в браузере). Результирующий файл может работать только на веб-сервере, который может быть локальным (т.е. страница имеет URL-адрес).

Я не уверен, что это точно так же, как с моим кодом, но еще раз, если у кого-то есть понимание, оно будет оценено.

EDIT 4:

Ok, после некоторого поиска в Интернете, я к сожалению, должен признать, не зная, как использовать Google & Stackoverflow: Я узнал все, что нужно знать here, как ни странно, объясняется mbostock (из D3.js). Теперь я понимаю, что понятия не имею, что я на самом деле искал, но почему-то нашел это.

Не совсем уверен, что теперь делать в отношении этого (все еще открытого) вопроса.

Answer 1

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

d3.csv('url.csv', function(data) { 

    var nodes = [], edges = []; 

    for (var k = 0, n = data.length; k < n; k += 1) { 
     nodes.push({name: data[k].name, size: data[k].size, id: data[k].id}), 
     edges.push({source: data[k].id, target: data[k].parent});  
    } 
}); 

с этой структурой, вы будете иметь возможность использовать раскладку силы, или преобразовать узлы, ребро массивов к древовидной структуре.