d3.js v5分层返回丢失:0

  • 本文关键字:返回 js v5 分层 d3 d3.js
  • 更新时间 :
  • 英文 :


我创建了一个非常简单的测试用例来使用D3.JS v5分层方法。基于类似的代码,一切看起来都很正常,但我的失败了,我不知道为什么。有人能帮忙吗?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
let csvdata = 
`pk,firstname,lastname,email,title,city,statecode,zip,phone,latitude,longitude,fk_staff
1,Thomas,Bellmer,thomas.bellmer@gmail.com,President,Overland Park,KS,66221,9132216533,38.86182,-94.71264,
2,Xnx,Zgulx,xnx.zgulx@gmail.com,Vice President,Royal Palm Beach,FL,33421,5615120044,26.6802,-80.204984,1
3,Kjc,Duxuk,kjc.duxuk@gmail.com,Vice President,Newtown,IN,47969,7656204292,40.205844,-87.148287,1`
;

data = d3.csvParse(csvdata);
data.forEach(function(d) {                              
d.pk = +d.pk;  
d.fk_staff = +d.fk_staff;                                   
}); 
console.log(data);
let root = d3.stratify()
.id(function(d) { return d.pk; })
.parentId(function(d) { return d.fk_staff; })
(data);
console.log(root);
</script>
</body>
</html>

问题发生在这里:

data.forEach(function(d) {                              
d.pk = +d.pk;  
d.fk_staff = +d.fk_staff;                                   
}); 

某些数据有一个空字符串d.fk_staff。当空字符串被强制为一个数字时,它变为0,并且没有d.pk等于0的数据,因此出现错误。

一个简单的修复方法是不强制使用空字符串:

data.forEach(function(d) {                              
d.pk = +d.pk;  
d.fk_staff = d.fk_staff === '' ? '' : +d.fk_staff;                                   
}); 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
let csvdata = 
`pk,firstname,lastname,email,title,city,statecode,zip,phone,latitude,longitude,fk_staff
1,Thomas,Bellmer,thomas.bellmer@gmail.com,President,Overland Park,KS,66221,9132216533,38.86182,-94.71264,
2,Xnx,Zgulx,xnx.zgulx@gmail.com,Vice President,Royal Palm Beach,FL,33421,5615120044,26.6802,-80.204984,1
3,Kjc,Duxuk,kjc.duxuk@gmail.com,Vice President,Newtown,IN,47969,7656204292,40.205844,-87.148287,1`
;

data = d3.csvParse(csvdata);
data.forEach(function(d) {                              
d.pk = +d.pk;  
d.fk_staff = d.fk_staff === '' ? '' : +d.fk_staff;                                   
}); 
console.log(data);
let root = d3.stratify()
.id(function(d) { return d.pk; })
.parentId(function(d) { return d.fk_staff; })
(data);
console.log(root);
</script>
</body>
</html>

最新更新