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

Question

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

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

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

我可以轻松读取/写入 CSV/JSON 文件。我只需要知道如何制作一种算法，让我可以从这些数据中输出 JSON。

这是我的示例 CSV 文件(node_type 和 node_size 只是为了展示):

node_id,name,node_size,node_type,parent_node1,node1,122,4,172,node2,127,4,203,node3,64,2,54,node4,147,5,145,node5,146,5,126,node6,57,4,107,node7,149,1,208,node8,141,6,109,node9,65,5,1010,node10,108,2,1011,node11,97,6,212,node12,102,2,513,node13,79,6,314,node14,90,2,215,node15,129,1,816,node16,76,1,817,node17,68,6,1318,node18,53,5,719,node19,112,6,2020,node20,147,5,6

EDIT:I tried Pablo Navarro's tip and produced the following script for D3.js to handle. It's not producing any errors, but nothing is displayed. Can anyone hint on why?

EDIT2: Fixed typo in code.

    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 :

This will no longer work in a local file system (ie opening a file in the browser). The resulting file can only run on a webserver, which can be local (ie the page has a 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});       
    }
});

有了这个结构，你就可以使用强制布局，或者将节点、边数组转换为树结构。