在d3.csv（）方法的回調函數中無法訪問我的數據

回調函數draw似乎沒有任何訪問回調函數中提供給d3.csv()的數據。在回調console.log打印：在d3.csv（）方法的回調函數中無法訪問我的數據

數據：空

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Correlation XX</title> 
    <script src="d3v4.js"></script> 
    <script type="text/javascript"> 

     function draw(data) { 
     console.log("data: " + data); // <-- talking about this line 
     var width = 860, 
      height = 500; 

     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", width) 
        .attr("height", height) 
        .append("g") 
        .attr("transform", "translate(50, 50)"); 
     } 
    </script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     d3.csv("modified_data_titanic.csv", function(data) { 
     data.forEach(function(d) { 
      d.Age = +d.Age; 
      d.Survived = +d.Survived; 
     }); 
     }, draw); 
    </script> 
    </body> 
</html>

的CSV數據：

"","PassengerId","Survived","Pclass","Name","Sex","Age","SibSp","Parch","Ticket","Fare","Cabin","Embarked","Child","Survived_new","Category" 
"1",1,0,3,"Braund, Mr. Owen Harris","male",22,1,0,"A/5 21171",7.25,"","S","FALSE",0,"20-29 m" 
"2",2,1,1,"Cumings, Mrs. John Bradley (Florence Briggs Thayer)","female",38,1,0,"PC 17599",71.2833,"C85","C","FALSE",0,"30-39 f" 
"3",3,1,3,"Heikkinen, Miss. Laina","female",26,0,0,"STON/O2. 3101282",7.925,"","S","FALSE",0,"20-29 f" 
"4",4,1,1,"Futrelle, Mrs. Jacques Heath (Lily May Peel)","female",35,1,0,"113803",53.1,"C123","S","FALSE",0,"30-39 f" 
"5",5,0,3,"Allen, Mr. William Henry","male",35,0,0,"373450",8.05,"","S","FALSE",0,"30-39 m" 
"6",6,0,3,"Moran, Mr. James","male",NA,0,0,"330877",8.4583,"","Q",NA,0,NA 
"7",7,0,1,"McCarthy, Mr. Timothy J","male",54,0,0,"17463",51.8625,"E46","S","FALSE",0,"50-59 m" 
"8",8,0,3,"Palsson, Master. Gosta Leonard","male",2,3,1,"349909",21.075,"","S","TRUE",0,"0-9 m" 
"9",9,1,3,"Johnson, Mrs. Oscar W (Elisabeth Vilhelmina Berg)","female",27,0,2,"347742",11.1333,"","S","FALSE",0,"20-29 f" 
"10",10,1,2,"Nasser, Mrs. Nicholas (Adele Achem)","female",14,1,0,"237736",30.0708,"","C","TRUE",0,"10-19 f" 
"11",11,1,3,"Sandstrom, Miss. Marguerite Rut","female",4,1,1,"PP 9549",16.7,"G6","S","TRUE",0,"0-9 f" 
"12",12,1,1,"Bonnell, Miss. Elizabeth","female",58,0,0,"113783",26.55,"C103","S","FALSE",0,"50-59 f" 
"13",13,0,3,"Saundercock, Mr. William Henry","male",20,0,0,"A/5. 2151",8.05,"","S","FALSE",0,"20-29 m"

背景信息：我的實際目標是使用一列像年齡或生存作爲範圍爲x軸。

來源

2016-12-05 Amir Rahbaran

返回forEach後的數據。 data.forEach（function（d）{d.Age = + d.Age; d.Survived = + d.Survived; }）;返回數據;' – Adrian

您的行轉換函數，即d3.csv()的第二個參數不正確。有一看documentation對於細節：

如果指定了行轉換功能，指定的函數被調用對於每一行，在傳遞表示當前行（d），索引的對象（i ）從零開始，第一個非標題行和列名稱數組。如果返回值爲空或未定義，則該行將被跳過，並將從dsv .parse返回的數組中被省略;否則，返回的值定義相應的行對象。

這裏有兩個問題：

的函數被調用的每一行，而不是像你的功能將整個數據應該被調用。
正如Adrian在他的comment中指出的那樣，您需要返回該行的值;否則，該行將被跳過。

下面的函數應該做的伎倆：

d3.csv("modified_data_titanic.csv", function(d) { // in this case d is one row 
    d.Age = +d.Age; 
    d.Survived = +d.Survived; 
    return d; 
}, draw);

來源

2016-12-05 10:54:06 altocumulus

Thx很多。我使用'''forEach'''因爲這篇文章：http://learnjsdata.com/read_data.html –

如果您重新閱讀文章，您會注意到有兩種方法可以解決這個問題。第一個代碼段用** 2 **參數調用'd3.csv（）'，其中沒有提供轉換函數。第二個參數是可選的！在回調中，'data'將會保存完整的分析行數組。這可以使用'.forEach（）'來迭代。然而，下面幾段中的第二段提供了轉換功能，即它提供**三個**參數，就像你的問題一樣。選擇哪種方式在很大程度上取決於您對數據進行預處理和後處理的需求。 – altocumulus

好的，謝謝你！ –

你訪問（或行）的功能是不正確的。

首先，訪問器函數不需要forEach。除此之外，你必須返回每一行。總之，這些是變化：

d3.csv("modified_data_titanic.csv", function(d) { 
    d.Age = +d.Age; 
    d.Survived = +d.Survived; 
    return d; 
}, draw);

來源

2016-12-05 10:55:47

Thx很多。因爲這篇文章我使用了'''forEach'''：http://learnjsdata.com/read_data.html –

在d3.csv（）方法的回調函數中無法訪問我的數據

回答

相關問題