3

所以我正在尝试使用 D3.js 创建一个分层树图。它应该可以在 QtWebView 之上工作，到目前为止，一切都很好：它可以工作。现在我需要处理应用程序的数据处理位。我的数据以 CSV 格式存储（不是我的选择，我对此也没有任何意见），如下所述。

我的问题是：如何从此 CSV 输出 JSON？

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

我在读取/写入 CSV/JSON 文件时没有问题。我只需要知道如何制作一个算法，让我从这些数据中输出 JSON。

这是我的示例 CSV 文件（node_type 和 node_size 仅用于展示）：

node_id，名称，node_size，node_type，parent_node
1,节点1,122,4,17
2、节点2、127、4、20
3、节点3、64、2、5
4、节点4、147、5、14
5、节点5、146、5、12
6、节点6、57、4、10
7、节点7、149、1、20
8、节点8、141、6、10
9、节点9、65、5、10
10,节点10,108,2,10
11、节点11、97、6、2
12,节点12,102,2,5
13、节点13、79、6、3
14,node14,90,2,2
15,节点15,129,1,8
16、节点16、76、1、8
17、节点17、68、6、13
18、节点18、53、5、7
19,节点19,112,6,20
20,节点20,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：我认为可能会产生重大影响的一个小细节：我在本地调用它，并且在本地我不是指在“本地主机”网络服务器中，而是在文件中。从我在Jerome Crukier 的教程中读到的内容：

这将不再适用于本地文件系统（即在浏览器中打开文件）。生成的文件只能在本地的网络服务器上运行（即页面有一个 url）。

我不确定我的代码是否正是这种情况，但再一次，如果有人有任何见解，将不胜感激。

编辑4：

好吧，在网上搜索了一番之后，我不得不承认我不知道如何使用 Google 和 Stackoverflow：具有讽刺意味的是，我在这里找到了我需要知道的一切，由 mbostock（来自 D3.js）自己解释。我现在明白了，我不知道自己真正在寻找什么，但不知何故我找到了。

关于这个（仍然悬而未决的）问题，现在不太确定该怎么做。

4

1 回答 1

6

您可以使用 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});       
    }
});

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

于 2013-04-23T15:52:28.210 回答