javascript - CSV 到 D3 : summing over values for multiple links

Question

我正在 D3 上绘制一个网络图，其数据如下所示:

目标源值

Baird   JON CARLSON 100    
Baird   JASON CONRAD    100    
Baird   JASON CONRAD    100    
Baird   JASON CONRAD    100    
Baird   JANET ESKRIDGE  100    
Baird   LINDA GARNER MULLIN 100    
Baird   JAMES HARRIS    100

...等等

三个“Baird | JASON CONRAD | 100”行不重复；我希望 D3 在输入链接之前对给出“Baird | JASON CONRAD | 300”的个人进行求和。

我是 JS 和 D3 的新手，真的不知道该怎么做，但这是有问题的经典 csv 导入函数:

d3.csv("xxx.csv", function(error, links) {

var nodes = {};

links.forEach(function(link) {
    link.source = nodes[link.source] || 
      (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] ||
      (nodes[link.target] = {name: link.target});
    link.value = +link.value;
});

force

  .nodes(d3.values(nodes))
  .links(links)
  .start()

编辑

我使用nest()对值进行求和，但现在我不知道如何将结果输入到force()的可用链接和节点数组中。

有什么想法吗？这是我的 Nest() 代码:

var nested_links = d3.nest()  
    .key(function(link) { return link.source; })  
    .key(function(link) { return link.target; })  
    .rollup(function(link) { 
        return d3.sum(link, function(l) { return l.value; });  
    }).entries(links);

Answer 1

正如@meetamit所说，你可以使用d3.nest()对于这个任务。

如何 d3.nest()有效吗？

如果你有

var data = [
    ["Baird JON CARLSON", 100],
    ["Baird JASON CONRAD", 100],
    ["Baird JASON CONRAD", 100],
    ["Baird JASON CONRAD", 100],
    ["Baird JANET ESKRIDGE", 100],
    ["Baird LINDA GARNER MULLIN", 100],
    ["Baird JAMES HARRIS", 100]
];

并执行

var nested_data = d3.nest()
                    .key(function(d) {
                        return d[0];
                    })
                    .entries(data);

nested_data会是这样的

[{
    "key":"Baird JON CARLSON",
    "values":[
        ["Baird JON CARLSON",100]
    ]
 },{
     "key":"Baird JASON CONRAD",
     "values":[
        ["Baird JASON CONRAD",100],
        ["Baird JASON CONRAD",100],
        ["Baird JASON CONRAD",100]
     ]
 },{...
}]

通常使用 Javascript，您可以使用 Array.reduce()用于将数组减少到值的总和，但使用 D3js最好的选择是使用 d3.nest().rollup() 。 D3js有太多帮助者来减少 Array()返回值的总和，如果有

var values = [
    ["Baird JASON CONRAD",100],
    ["Baird JASON CONRAD",100],
    ["Baird JASON CONRAD",100]
];

然后你就可以制作

 var sum = d3.sum(values, function(d) {
               return parseFloat(d[1]);
           });

和sum将是300 。粘合所有这些将是

var nested_data = d3.nest()
                    .key(function(d) {
                        return d[0];
                    })
                    .rollup(function(leaves) {
                        return d3.sum(leaves, function(d) {
                            return parseFloat(d[1]);
                        });
                    })
                    .entries(data);

之后您将拥有nested_data像这样的东西

[{
    "key":"Baird JON CARLSON",
    "values": 100
 },{
    "key":"Baird JASON CONRAD",
    "values": 300
 },{
    "key":"Baird JANET ESKRIDGE",
    "values": 100
 },{
    "key":"Baird LINDA GARNER MULLIN",
    "values": 100
 },{
   "key":"Baird JAMES HARRIS",
   "values": 100
}]

检查my Fiddle here

要根据需要创建链接数组，您必须将键和值映射到数组上的正确位置。请注意，如果您使用 2 键函数，您将以双重嵌套对象结束。

var nested_data = d3.nest()
                    .key(function(d) {
                        return [d[0],d[1]];
                    })
                    .rollup(function(leaves) {
                        return d3.sum(leaves, function(d) {
                            return parseFloat(d[2]);
                        });
                    })
                    .entries(data)
                    .map( function (d) {
                        var val = d.key.split(',');
                        return {source: val[0], target: val[1], value: d.values};
                    });

检查my Fiddle here