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 normaly，您可以使用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

CSV到D3：对多个链接的值求和

1 个答案: