未捕获的名称:无法读取在circleHover处未定义的属性‘TypeError’
未捕获的名称:无法读取在circleHover处未定义的属性‘TypeError’
提问于 2018-11-25 23:56:22
我正在进行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文件)在技术上不是这里的’未定义‘变量吗？(这是我定义的？)
Stack Overflow用户
发布于 2018-11-26 00:15:33
d3.csv函数不返回值。这一行
var urlTwo = d3.csv("http://127.0.0.1:5000/static/data/info_v6.csv", 使urlTwo仍未定义。在调用data.forEach之后，你应该将你的代码移到d3.csv的回调函数下(或者从d3.csv的回调函数中调用)。在这种情况下，这应该是可行的(注意，用数据替换了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");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53469222
复制相关文章
相似问题
腾讯云开发者
