Question

所以我对js和D3很新，我在代码中不断收到此错误。 “未捕获的TypeError：无法在d3.min.js的第1行读取未定义的属性'长度'。这是我的代码：

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

这是我的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>

非常感谢任何帮助!!

Answer 1

d3.csv期望具有以下签名的回调函数：

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)作为回调函数的第一个语句，并查看控制台中显示的内容。

使用D3.js

1 个答案: