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”网络服务器中，而是在文件< / em>的。从我在Jerome Crukier's tutorial中读到的内容：

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

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

编辑4：

好的，经过一些网上搜索后，我不得不承认不知道如何使用Google＆amp; 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});       
    }
});

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

D3.js - 从csv数据构建一个强制定向的分层树

1 个答案: