數據可視化的酒吧建設

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

}