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

Question

所以我正在尝试使用 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：我认为可能会产生重大影响的一个小细节：我在本地调用它，并且在本地我不是指在“本地主机”网络服务器中，而是在 file。根据我在Jerome Crukier's tutorial 中读到的内容：

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

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

编辑 4：

好吧，在网上搜索了一番之后，我不得不承认我不知道如何使用 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});       
    }
});

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