D3.js：爲佈局獲取我自己的數據

我正在與the D3 cluster force layout進行實驗。但是我不確定如何綁定數據，因此我無法擁有自己的數據。D3.js：爲佈局獲取我自己的數據

這就是我所嘗試過的，沒有任何約束力，它不能工作。

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 
...

來源

2016-06-16 QuikProBroNa

您添加到您發佈的代碼示例生成隨機數據並不會從「data.tsv」觸摸你的數據。你的tsv文件究竟是什麼？ – Jieter

我已經添加了tsv文件的格式，請看看@Jieter – QuikProBroNa

首先，確保該文件實際上是用製表符，而不是空格分隔。在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

來源

2016-06-16 11:52:50 Jieter

非常感謝！有一個小的改變，什麼是diskSpace是一個字符串？像「16GB」，而不是16？ – QuikProBroNa

diskSpace沒有被解析爲字符串（前面沒有+），只要它與你想在同一個集羣中擁有的東西相同，它是否是字符串或數字並不重要。我剛剛通過追加G來測試它，仍然有效。 – Jieter

哦！是的，它的工作，你非常！ :) – QuikProBroNa

D3.js：爲佈局獲取我自己的數據

回答

相關問題