map函數從csv獲取半徑數據爲d3 force佈局

Question

我試圖將csv數據拉入到d3.map中，以便創建一個類似於Mike Bostock所做的半徑here。但不是使用隨機數字，而是拉入數據。剩下的代碼似乎很好地工作，當我在那裏扔一個隨機數。任何幫助將不勝感激，因爲我仍然是d3的noob。

d3.csv("fuel.csv", function(csv) { 

for (var i = 0; i < csv.length; i++) { 
       parseFloat(csv[i].comb), 
} 

var nodesFuel = d3.range(csv.length) 
        .map(csv, function(d) { 
         return {radius: d.comb}; 
        }); 

    ... 

Answer 1

爲了解釋原代碼：

var nodes = d3.range(200).map(function() { 
            return {radius: Math.random() * 12 + 4}; 
          }); 

它從d3.range(200)。該函數創建一個從0到199的整數數組，然後調用該數組的.map(callbackFunction)方法。 map函數創建一個與調用它的數組長度相同的新數組，但新數組的每個元素都是從回調函數返回的值。回調函數被賦予數組的值，並將其索引作爲參數，但這裏沒有使用。相反，將忽略整數，並返回一個新對象，其中包含一個單獨的屬性radius，設置爲4到16之間的一個隨機數。

另一種方法可以做同樣的事情（使用可能更熟悉的語法如果你有其他編程語言經驗）將是：

var nodes = new Array(200); 
for(var i=0; i<200; i++) { 
    nodes[i] = {radius: (Math.random() * 12 + 4)}; 
} 

無論哪種方式，最終的結果僅僅是一個隨機的半徑值對象的200個元素的數組。

這與d3.map object無關，它是散列表數據結構的正式實現，用於數據鍵可能與內部Javascript對象屬性和函數名稱衝突的情況。

現在，至於你正在嘗試做什麼。 d3.csv函數讀取您的文件並創建一個命名對象數組。該數組作爲參數傳遞給您的回調函數。如果你想創建對象的一個​​新的數組，每個一個是基於從您的CSV文件的單獨數據行，那麼你可以直接調用數組映射功能時，您csv陣列上：

d3.csv("fuel.csv", function(csv) { 

/* This doesn't do anything. 
// You're parsing the strings but not saving the result! 
for (var i = 0; i < csv.length; i++) { 
       parseFloat(csv[i].comb), 
} 
*/ 

var nodesFuel = csv.map(function(d) { 
         return {radius: parseFloat(d.comb) }; 
        }); 

/* or if you want to save the parsed value in the original array: 
var nodesFuel = csv.map(function(d) { 
         d.comb = parseFloat(d.comb); 
         return {radius: d.comb }; 
        }); 
*/ 

數組nodesFuel現在是一個長度與csv相同的數組，每個條目的對象包含屬性radius，其中半徑值是來自csv數組中相應條目的comb屬性的解析值。