Daten Visualisierung Bars Konstruktion

Question

Ich versuche, eine Datenvisualisierung mit Balken zu konstruieren, aber dieser einfache Code, den ich geschrieben habe, gibt keine Ausgabe. Bitte vergib mir, wenn das Problem zu trivial ist ... Ich bin neu in der Visualisierung.

<script type="text/javascript"> 

    var data=d3.csv("ipl210.csv.txt",function(data){ return data;}) 

    var svg=d3.select("body").append("svg") 
      .attr("width",1000) 
      .attr("height",1000);  

    svg.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("rect") 
     .attr("width",50) 
     .attr("height",function(d){return (+d.pts);}) 
     .attr("x",function(d){return (+d.pts);}) 
     .attr("y",250) 
     .attr("fill","black"); 

Hier ist die CSV-Datei.

Team,Pld,Won,Lost,Tied,pts 
RCB,14,9,4,0,19 
CSK,14,9,5,0,18 
MI,14,9,5,0,18 
KKR,14,8,6,0,16 
KXIP,14,7,7,0,14 
RR,14,6,7,0,13 
DC,14,6,8,0,12 
KTK,14,6,8,0,12 
PWI,14,4,9,0,9 
DD,14,4,9,0,9 

Answer 1

d3.csv("ipl210.csv.txt",function(data){ return data;})

Dies ist asynchrone Funktion, so dass Sie restlichen Code in Rückruf sollte .csv Erweiterung

Haben

auch ipl210.csv.txt ausführen sollten

d3.csv("ipl210.csv",function(data){ 
    drawChart(data) 
}) 

function drawChart(data){ 
      var svg=d3.select("body").append("svg") 
        .attr("width",1000) 
        .attr("height",1000); 

      svg.selectAll("rect") 
       .data(data) 
       .enter() 
       .append("rect") 
       .attr("width",50) 
       .attr("height",function(d){return (+d.pts);}) 
       .attr("x",function(d){return (+d.pts);}) 
       .attr("y",250) 
      .attr("fill","black"); 

}