Javascript 使用D3.js时出现长度错误_Javascript_Arrays_D3.js_Typeerror

Javascript 使用D3.js时出现长度错误

javascript arrays d3.js

Javascript 使用D3.js时出现长度错误,javascript,arrays,d3.js,typeerror,Javascript,Arrays,D3.js,Typeerror,所以我对js和D3非常陌生，我的代码中不断出现这个错误。d3.min.js第1行的“Uncaught TypeError:无法读取未定义的属性'length'。这是我的密码： d3.csv("ExecutedOffenders.csv", function(csv) { //racial demographics graph var height=700; var width=700; var newHeight=350; var newWidth=350; va

所以我对js和D3非常陌生，我的代码中不断出现这个错误。d3.min.js第1行的“Uncaught TypeError:无法读取未定义的属性'length'。这是我的密码：

    d3.csv("ExecutedOffenders.csv", function(csv) {
  //racial demographics graph
  var height=700;
  var width=700;
  var newHeight=350;
  var newWidth=350;
  var parseDate = d3.time.format("%m/%d/%Y").parse;

  yearMap = [];

  years = _.map(_.range(1982,2015),function(n){return n.toString()});

  for (var i = 0; i < csv.length; i++) {
    if ((years.indexOf((parseDate(csv[i].date)).getFullYear().toString()) >= 0) == false) {
      years.push((parseDate(csv[i].date)).getFullYear().toString());
    }
  }


  for (var i = 0; i < years.length; i++) {
    yearObject = {};
    yearObject.year = years[i];
    yearObject.count = (_.filter(csv, function(execution) { return (parseDate(execution.date)).getFullYear().toString() === years[i]})).length
    yearMap.push(yearObject);
  }

  countMap = _.map(yearMap, function(obj) {
    return obj.count;
  });
  console.log(countMap);

  var x = d3.scale.linear().domain([0,yearMap.length]).range([0,width/1.2]);
  var y = d3.scale.linear().domain([0,d3.max(countMap)]).range([height/2,0]);



  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(_.range(0,yearMap.length))
    .tickFormat(function(d){
      return yearMap[d].year;
    });

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

  var line = d3.svg.line()
    .x(function(d) {return x(yearMap.indexOf(d));})
    .y(function(d) {return y(d.count);});

  var lineGraph = d3.select("#svgContainer").append("svg")
    .attr("width",700)
    .attr("height",450)
    .append("g")
    .attr("transform","translate(30,30)");

  x.domain([0,yearMap.length]);
  y.domain([0,d3.max(countMap)]);

  lineGraph.selectAll("circle")
    .data(yearMap)
    .enter()
    .append("circle")
    .attr("cx",function(d){return x(yearMap.indexOf(d));})
    .attr("cy",function(d){return y(d.count);})
    .attr("r",3)
    .attr("transform","translate(20,0)");

  lineGraph.selectAll("text")
    .data(yearMap)
    .enter()
    .append("text")
    .text(function(d) {
      return d.count;
    })
    .attr("x",function(d) {
      return x(yearMap.indexOf(d));
    })
    .attr("y",function(d) {
      return y(d.count);
    })
    .attr("transform","translate(20,-10)")
    .style("font-size","9px")
    .style("fill","red");

  lineGraph.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(20,350)")
    .call(xAxis)
    .selectAll("text")
      .style("text-anchor","end")
      .attr("dx","-.8em")
      .attr("dy",".15em")
      .attr("transform","translate(-5,0) rotate(-90)");

  lineGraph.append("g")
      .attr("class", "y axis")
      .attr("transform","translate(20,0)")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Number of Executions");

  lineGraph.append("path")
      .datum(yearMap)
      .attr("class", "line")
      .attr("d", line)
      .attr("transform","translate(20,0)");

console.log(yearMap)
});

d3.csv（“executed.csv”，函数（csv）{
//种族人口统计图
var高度=700；
var宽度=700；
var newHeight=350；
var-newWidth=350；
var parseDate=d3.time.format（“%m/%d/%Y”）.parse；
年图=[]；
years=u.map（u.range（19822015），函数（n）{return n.toString（）}）；
对于（变量i=0；i=0）==false）{
years.push（（parseDate（csv[i].date））.getFullYear（）.toString（））；
}
}
对于（变量i=0；i


这是我的HTML结构
<html class="no-js" lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="http://underscorejs.org/underscore-min.js" charset="utf-8"></script>
</head>
<div id="svgContainer"></div>
</html>



非常感谢您的帮助
 需要具有以下签名的回调函数：
d3.csv(url, function(error, data) {
  // if error is "truthy", data will be undefined
  // otherwise, the inverse is true
});

请注意，错误是第一个参数。我认为现在的情况是CSV加载正确，因此您的CSV
变量实际上是null
，因为没有错误。您可以通过以下方式确认这一点：
使用Chrome（或类似）开发工具在回调函数中设置断点，并检查csv
变量；或
插入console.log（arguments）
作为回调函数的第一条语句，并查看控制台中显示的内容
您是否遗漏了一些代码，或者这是定义年份的第一个位置<代码>年份=u.map（u.range（1982，2015），函数（n）{return n.toString（）}）否。我正在使用下划线js。这里：有什么原因你没有把var
放在years
前面吗？@ryanpcmcquen这并不完全重要，它会使它成为一个全局变量，但不会导致错误。我猜csv.length
不起作用，因为csv不是数组。你可能想找到一种新的方法来确定这一点。