Json D3.js-从csv数据构建部队指挥的层次结构树

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

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

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

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

这是我的示例CSV文件（节点类型和节点大小仅供展示）：

节点id、名称、节点大小、节点类型、父节点 1，节点1122,4,17 2，节点2127,4,20 3，节点3,64,2,5 4，节点4147,5,14 5，节点5146,5,12 6，节点6,57,4,10 7，节点7149,1,20 8，节点8141,6,10 9，节点9,65,5,10 10，节点10108,2,10 11，节点11,97,6,2 12，节点12102,2,5 13，节点13,79,6,3 14，节点14,90,2,2 15，节点15129,1,8 16，节点16,76,1,8 17，节点17,68,6,13 18，节点18,53,5,7 19，节点19112,6,20 20，节点20147,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)

var宽度=960，高度=500；
var color=d3.scale.category20（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
变量nodesArray=[]，edgesArray=[]；
d3.csv（'nodes.csv'，函数（数据）{
对于（变量k=0，n=data.length；k

EDIT3：我认为有一个小细节可能会起到很大的作用：我在本地调用这个函数，我所说的本地并不是指某种“localhost”Web服务器，而是在一个文件中。从我在报纸上读到：

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

我不确定我的代码是否确实如此，但再一次，如果有人有任何见解，我们将不胜感激

编辑4：

好吧，在网上搜索了一段时间后，我不得不遗憾地承认我不知道如何使用Google&Stackoverflow：我找到了我需要知道的一切，讽刺的是，mbostock（来自D3.js）自己解释道。我现在明白了，我不知道我到底在找什么，但不知怎的我找到了

---

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

您可以使用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.csv（'url.csv'，函数（数据）{
变量节点=[]，边=[]；
对于（变量k=0，n=data.length；k

---

使用此结构，您将能够使用force布局，或将节点、边阵列转换为树结构

您可以直接使用CSV。拉尔斯·科托夫：是的，我能，我知道。问题是如何在D3.js刚开始使用CSV的情况下操作数据。您检查过了吗？你会得到D3中的对象（就像JSON一样），你可以用和其他任何东西一样的方式操作它们。我现在意识到我可能没有我想的那么清楚：我知道D3.js可以从CSV中读取数据并从中创建结构。我的问题是D3.js需要什么来创建树？我知道它将节点和边（或链接）作为输入；我知道它们必须是对象数组形式。问题是-D3.js需要什么对象属性来构建表示？@sashoalm：你说得对，我的错，把它删掉了。Pablo，谢谢你的回答。我尝试了你的建议，并产生了我在上面添加的代码。你对它为什么不产生任何可视化有什么见解吗？你需要使用web服务器为文件提供服务。如果HTML和csv文件位于同一目录中，并从此目录运行服务器。例如，您可以运行：python-msimplehttpserver。好提示，巴勃罗！；）

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