D3.js - 从csv数据构建一个力导向分层树

Question

所以我试图使用D3.js创建一个分层树图.它应该在QtWebView之上工作,到目前为止,非常好:它可以工作.现在我需要解决应用程序的数据处理位.我的数据以CSV格式存储(不是我的选择,我对此没有任何意见),如下所述.

我的问题是:如何从这个CSV输出JSON？

几天我一直在四处寻找例子,但我被困住了.我只是想知道是否有人可以指出我正确的方向,因为我只是得到了如何使用JSON格式生成数据树的例子以及人们在谈论如何使用插件来输出带Qt的JSON.

我在读取/写入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

编辑:我尝试了Pablo Navarro的提示并为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:我认为可能会产生重大影响的一个小细节:我在本地调用它,而在本地,我并不是指在各种"localhost"网络服务器中,而是在文件中.从我在Jerome Crukier的教程中读到的内容:

这将不再适用于本地文件系统(即在浏览器中打开文件).生成的文件只能在Web服务器上运行,该服务器可以是本地的(即页面有URL).

我不确定这是否与我的代码完全相同,但再一次,如果有人有任何见解,我们将不胜感激.

编辑4:

好了,经过一番网上搜索,我黯然不得不承认不知道如何使用谷歌:我发现我需要知道的一切在这里,讽刺的是,由(的D3.js)自己mbostock解释.我现在明白我不知道我到底在想什么,但不知怎的,我发现了它.

对于这个(仍然开放的)问题,现在还不确定该怎么做.

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

使用此结构,您将能够使用强制布局,或将节点,边数组转换为树结构.