d3.js v5 分层返回缺失：0

Question

我创建了一个非常简单的测试用例来使用 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>

Answer 1

问题发生在这里：

    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>

d3.js v5 分层返回缺失：0

d3.js v5 stratify returning missing: 0

d3.js