数据可视化工具条构建

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

}