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

これは期待どおりに機能していないようです。

正確には何が起こっていますか、どうすれば修正できますか？

EDIT： 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() -functionは行を返しませんが、最初の引数として行を含む関数を呼び出します。

今、私たちは、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) 
}); 

これは、ディスクスペースで行をクラスタ化します。私が追加したコメントに注意してください。

あなたが投稿に追加のコード例では、ランダムデータを生成し、「data.tsv」からデータを触れないDemo here