Balkendiagramm erstellen, aber keinen Wert aus CSV-Datei abrufen Fehler abrufen NaN

Question

Mar 26, 2016, 08:09 AM

Balkendiagramm erstellen, aber keinen Wert aus CSV-Datei abrufen Fehler abrufen NaN

Balkendiagramm mit D3 erstellen und Wert aus CSV-Datei aus demselben Ordner abrufen

Aber immer Fehler auf der Konsole wie 15NaN

Below ist mein Code

/*
define margin followed by height & width for svg
*/
//define margin
var margin = {
    top:20,right:10,bottom:100,left:40
}
//define w & h
var w = 700 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
/*
define svg by selecting the body and append the svg to body with proper 
height and width then appen it to g
*/
var svg = d3.select("body").
    append("svg").
    attr({
        "width": w + margin.left + margin.right,
        "height": h + margin.top + margin.bottom
    }).
    append("g").
    attr("transform", "translate(" + margin.left + "," + margin.right + ")");
/*
define scale then followed by axis
*/
//define x & y scale
var xScale = d3.scale.ordinal().
    rangeRoundBands([0, w], 0.2, 0.2);
var yScale = d3.scale.linear().
    range([h, 0]);
//define x& y axis
var xAxis = d3.svg.axis().
    scale(xScale).
    orient("bottom");
var yAxis = d3.svg.axis().
    scale(yScale).
    orient("left");
/*
import the data here we have csv data
*/
d3.csv("data.csv", function(error,data) {
    if(error) console.log("Error: data not loaded!");

    data.forEach(function(d) {
        d.country = d.country;
        d.gdp = +d.gdp;       
        console.log(d.gdp);  
    });

});

svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<!DOCTYPE html>
<html>
<head>
    <title>D3 Tutorial Demo</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    
    <div class="container-fluid text-center">
        <h1>Bar Graph - 2015 GDP Based On PPP Valuation</h1>
    </div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

nd hier sind meine data.csv-Wer

country	gdp
Brazil	3.20
Italy	2.17
India	8.02
Saudi Arebia	1.13
Russa	3.47
Italy	2.17
Australia	1.13
Spain	1.68
Korea	1.84
United States	17.9
China	19.51
Japan	4.84
Germany	3.84
Turkey	1.57
United Kingdom	2.66

Nicht sicher, was falsch ist Vielen Dank für Ihre Hilfe