データ可視化バーの構築

Question

私はバーを使用してデータの可視化を構築しようとしていますが、私が書いたこの簡単なコードは出力を出すものではありません。問題があまりにも些細なものであれば、私を許してください...私は視覚化が初めてです。

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

ここにはcsvファイルがあります。

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

あなたはまた、コールバック

でipl210.csv.txtを残りのコードを実行する必要がありますので、これは、非同期関数である私の答えは.csv拡張

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

}