D3.js：为布局获取我自己的数据

Question

我正在与the D3 cluster force layout进行实验。 但是我不确定如何绑定数据，因此我无法拥有自己的数据。

这就是我所尝试过的，没有任何约束力，它不能工作。

d3.tsv("data.tsv", function(data){ 

    nodes = d3.range(n).map(function(data) { 
     var i = Math.floor(Math.random() * m), 
      r = Math.sqrt((i + 1)/m * -Math.log(data.diskSpace)) * maxRadius, 
      d = { 
       cluster: i, 
       radius: data.radius, 
       x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
       y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
      }; 
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; 
    return d; 
}); 

这似乎没有按预期工作。

究竟发生了什么以及如何解决？

编辑： 的TSV文件

model diskSpace radius 
DE431 8 8 
DD342 16 18 
... 

Answer 1

首先，确保该文件实际上是用制表符，而不是空格分隔。在d3中加载tsv如下所示：

d3.tsv('data.tsv', function (rows) { 
    console.log(rows); 
}); 

一行数组将被记录到控制台。请注意，此调用是异步进行的，d3.tsv()-函数不返回行，而是调用一个函数，将行作为第一个参数。

现在我们需要将这些数据转换成能在D3力布局的理解：

d3.tsv('data.tsv', function (rows) { 
    var nodes = rows.map(function (item) { 
     var i = item['diskSpace'], 
      r = +item['radius'], // note the + to convert to number here. 
      d = { 
       cluster: i, 
       radius: r, 
       x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
       y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
      }; 
     if (!clusters[i] || (r > clusters[i].radius)) { 
      clusters[i] = d; 
     } 
     return d; 
    }); 

    // insert code generating the force layout here (including the cluster and collide functions) 
}); 

这将磁盘空间聚类行。请注意我添加的评论。

工作Demo here