Question

我正在进行d3数据可视化，并且正在控制台中收到以下错误消息。

Uncaught TypeError: Cannot read property 'Name' of undefined
at circleHover

以下是相关代码：

// csv data
var urlTwo = d3.csv("http://127.0.0.1:5000/static/data/info_v6.csv", 
function(data) {
data.forEach(function(d) {
    d.Index = +d.Index;
    d.Name = +d.Name;
    d.Characteristics = +d.Characteristics;
    d.Classification = +d.Classification;
    d.DateOfBirth = +d.DateOfBirth;
    d.Imgurl = +d.Imgurl;
    d.Location = +d.Location;
    d.Latitude = +d.Latitude;
    d.Longitude = +d.Longitude;
    d.MethodOfMurder = +d.MethodOfMurder;
    d.NumberOfVictims = +d.NumberOfVictims;
    d.Status = +d.Status;
    d.VictimProfileRevised = +d.VictimProfileRevised;
    d.DateOfMurderRevised = +d.DateOfMurderRevised;
    d._id = +d._id;
    d.DateAtMurder = +d.DateAtMurder;
}); 
console.log(data[0]);
});

// Calling circleHover function here
setTimeout(function() {circleHover($.grep(urlTwo, function(d) {return 
d.Index == 680;})[0])}, 3.25*delay);

// circlehover function

function circleHover(chosen) {

if (modus == "Map"){
    d3.select("#callOut")
        .style("top", "570px")
        .style("left", "30px");
}

下面的一行是失败的

if (hoverType == "city") {d3.select("#callOutCity").html(chosen.Name + 
chosen.Imgurl);}
    d3.select("#td-name").html(chosen.Name);
    d3.select("#td-imgurl").html(chosen.Imgurl); 
    d3.select("#td-dob").html(numFormatTime(chosen.DateOfBirth));
    //d3.select("#td-dob").html(chosen.Date of birth);
    d3.select("#td-location").html(chosen.Location);
    d3.select("#td-characteristics").html(chosen.Characteristics);
    d3.select("#td-method-of-murder").html(chosen.MethodOfMurder);
    d3.select("#td-number-of-victims").html(chosen.NumberOfVictims);
    d3.select("#td-victim-profile").html(chosen.VictimProfileRevised);
    d3.select("#td-status").html(chosen.Status);

    d3.select("#callOut")
    .style("visibility","visible");

}//circleHover

我不确定为什么要说它无法读取未定义的属性“ Name”，因为从技术上讲，urlTwo（我的csv文件）不是“ undefined”变量吗？（是我定义的？）

Answer 1

d3.csv函数不返回值。这行

var urlTwo = d3.csv("http://127.0.0.1:5000/static/data/info_v6.csv",

离开urlTwo仍未定义。您应该将代码移动到d3.csv的回调之下（或从d3.csv的回调中调用）-在调用data.forEach之后。在这种情况下应该可以使用（注意，用数据替换了urlTwo）

setTimeout(function() {circleHover($.grep(data, function(d) {return 
d.Index == 680;})[0])}, 3.25*delay);

-编辑- 这是修改后的代码：

// csv data

d3.csv("http://127.0.0.1:5000/static/data/info_v6.csv", 
function(data) {
  data.forEach(function(d) {
      d.Index = +d.Index;
      d.Name = +d.Name;
      d.Characteristics = +d.Characteristics;
      d.Classification = +d.Classification;
      d.DateOfBirth = +d.DateOfBirth;
      d.Imgurl = +d.Imgurl;
      d.Location = +d.Location;
      d.Latitude = +d.Latitude;
      d.Longitude = +d.Longitude;
      d.MethodOfMurder = +d.MethodOfMurder;
      d.NumberOfVictims = +d.NumberOfVictims;
      d.Status = +d.Status;
      d.VictimProfileRevised = +d.VictimProfileRevised;
      d.DateOfMurderRevised = +d.DateOfMurderRevised;
      d._id = +d._id;
      d.DateAtMurder = +d.DateAtMurder;
  }); 

  // Calling circleHover after the data has loaded
  setTimeout(function() {circleHover($.grep(data, function(d) {return 
  d.Index == 680;})[0])}, 3.25*delay);
});

// circlehover function
function circleHover(chosen) {
if (modus == "Map"){
    d3.select("#callOut")
        .style("top", "570px")
        .style("left", "30px");
}

Answer 2

您是否100％确定CSV文件中的数据点之一具有Index值680？

否则，$.grep将返回一个空数组，并用[0]对其进行索引将返回undefined。

未捕获到的TypeError：在circleHover

2 个答案: