Kein Zugriff auf meine Daten in der Callback-Funktion der d3.csv() -Methode

Die Callback-Funktion draw scheint keinen Zugriff auf die Daten innerhalb des Callbacks zu haben, das an d3.csv() bereitgestellt wird. In dem Rückruf console.log druckt:Kein Zugriff auf meine Daten in der Callback-Funktion der d3.csv() -Methode

Daten: 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>

Die CSV-Daten:

"","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"

Hintergrundinfo: Mein eigentliches Ziel ist eine Spalte zu verwenden, wie Alter oder Überlebt als die Bereich für die X-Achse.

Quelle

2016-12-05 Amir Rahbaran

Geben Sie die Daten nach Ihrem ForEach zurück. 'data.forEach (Funktion (d) { d.Age = + d.Age; d.Survived = + d.Survived; }); Rückgabedaten; ' – Adrian

Ihre Zeilenumwandlungsfunktion, d. H. Der zweite Parameter zu d3.csv(), ist nicht korrekt. Einen Blick auf die documentation für Details:

Wenn eine Reihe Umwandlungsfunktion angegeben ist, wird die angegebene Funktion für jede Zeile aufgerufen wird, ein Objekt übergeben wird die aktuelle Zeile (d) darstellt, um den Index (i) beginnend bei Null für die erste Nicht-Kopfzeile und das Array von Spaltennamen. Wenn der zurückgegebene Wert null oder nicht definiert ist, wird die Zeile übersprungen und wird aus dem Array übergeben, das von dsv .parse; Andernfalls definiert der zurückgegebene Wert das entsprechende Zeilenobjekt.

Es gibt zwei Probleme:

Die Funktion für jede Zeile aufgerufen wird, nicht für die gesamten Daten wie Ihre Funktion soll aufgerufen werden.
Wie von Adrian in seiner comment erwähnt, müssen Sie den Wert für die Zeile zurückgeben; Andernfalls wird die Zeile übersprungen.

Die folgende Funktion sollte es tun:

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

Quelle

2016-12-05 10:54:06 altocumulus

Thx viel. Ich habe '' 'forEach''' wegen dieses Artikels verwendet: http://learnjsdata.com/read_data.html –

Wenn Sie den Artikel noch einmal gelesen haben, werden Sie feststellen, dass es zwei Ansätze dafür gibt. Das erste Snippet ruft 'd3.csv()' mit ** zwei ** Parametern auf, wobei keine Konvertierungsfunktion bereitgestellt wird. Das zweite Argument ist optional! Im Callback hält 'data' dann das vollständige Array von Parse-Zeilen. Dies kann mit '.forEach()' wiederholt werden. Der zweite Ausschnitt ein paar Absätze weiter unten stellt jedoch eine Umwandlungsfunktion bereit, d.h.es wird ** drei ** Parameter wie in Ihrer Frage geliefert. Welchen Weg Sie wählen, hängt weitgehend davon ab, ob Sie Ihre Daten vorverarbeiten oder nachbearbeiten müssen. – altocumulus

Ah ok, danke einen Haufen! –

Ihre Accessor (oder Zeile) Funktion ist nicht korrekt.

Zu Beginn benötigt die Accessor-Funktion keine forEach. Außerdem müssen Sie jede Zeile zurückgeben. Alle zusammen sind die Änderungen:

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

Quelle

2016-12-05 10:55:47

Vielen Dank. Ich habe '' 'forEach''' wegen dieses Artikels verwendet: http://learnjsdata.com/read_data.html –

Kein Zugriff auf meine Daten in der Callback-Funktion der d3.csv() -Methode

Antwort

Verwandte Themen