No access to my data in the callback function of d3.csv() method
Question
The callback function draw seems not to have any access to the data inside the callback provided to d3.csv() . In the callback console.log prints:
data: null
<!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>
The csv-data:
"","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"
Background info: My actual goal is to use a column like Age or Survived as the range for the x-axis.
2 answers
solution1
1 ACCPTED 2016-12-05 10:54:06
Your row conversion function, ie the second parameter to d3.csv() , is not correct. Have a look at the documentation for details:
If a row conversion function is specified, the specified function is invoked for each row, being passed an object representing the current row (
d), the index (i) starting at zero for the first non-header row, and the array of column names. If the returned value is null or undefined, the row is skipped and will be ommitted from the array returned by dsv .parse; otherwise, the returned value defines the corresponding row object.
There are two issues:
The function is called for every row, not for the entire data like your function is supposed to be called.
As noted by Adrian in his comment you need to return the value for the row; otherwise, the row will be skipped.
The following function should do the trick:
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);
solution2
1 2016-12-05 10:55:47
Your accessor (or row) function is not correct.
For start, the accessor function doesn't need a forEach . Besides that, you have to return each row. All together, these are the changes:
d3.csv("modified_data_titanic.csv", function(d) {
d.Age = +d.Age;
d.Survived = +d.Survived;
return d;
}, draw);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.