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

mayingbao 阅读:17 2024-10-01 17:34:08 评论:0

所以我尝试使用 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_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 

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 的)自己解释。我现在明白了,我并不知道自己到底在寻找什么,但不知何故我找到了。

对于这个(仍然悬而未决的)问题,我真的不确定现在该怎么做。

请您参考如下方法:

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

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


标签:json
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号