使用d3.stratify构建树形结构时d.data缺失category、score字段的问题

我明白你遇到的困扰了——用d3.stratify把扁平数据转成树形结构后，能拿到d.data.id和d.data.name，但d.data.category和d.data.score却显示undefined。这里其实有个容易混淆的细节，咱们一步步理清楚：

核心误区：节点自身属性 vs 原始数据对象 #

首先要澄清：d3.stratify生成的每个树形节点，自身会带有id属性（由你设置的.id(function(d) { return d.name; })决定，对应原始数据里的name字段），但这个id是节点对象的属性，并不是原始数据d.data里的字段！

你说能通过d.data.id获取ID，其实是个小误解——原始数据里根本没有id字段，你实际访问的大概率是节点的d.id（而非d.data.id），只是不小心写错了路径。而d.data.name能正常访问，是因为原始数据里确实存在这个字段。

为什么d.data.category/score会显示undefined？ #

正常情况下，d3.stratify会把原始数据对象完整保留在节点的data属性里，所以d.data.category和d.data.score应该是存在的。出现undefined大概率是这几个原因：

• 混淆了节点对象和data对象：比如误把d.category当成d.data.category来访问；
• 对score的null值产生误解：原始数据里部分节点的score是null，如果用if(d.data.score)判断，null会被视为false，容易误以为是undefined；
• 后续代码修改了data属性：比如生成树形结构后，用其他方法覆盖了d.data。

正确的访问方式示例 #

下面是一段完整的示例代码，展示如何正确访问所有字段：

var flatData = [ 
  {"name": "Data Encrypted", "parent": null, "category": "test", "score": null }, 
  {"name": "Malware on Target", "parent": "Data Encrypted", "category": "test", "score": null }, 
  {"name": "Malware executed", "parent": "Data Encrypted", "category": "test", "score": "1" }, 
  {"name": "Files modified", "parent": "Data Encrypted", "category": "test", "score": "1" }, 
];

// 生成树形结构
var treeData = d3.stratify()
  .id(function(d) { return d.name; })
  .parentId(function(d) { return d.parent; })
  (flatData);

// 遍历所有节点，打印字段
treeData.descendants().forEach(node => {
  console.log(`节点ID: ${node.id}`); // 节点自身的id属性，对应原始name
  console.log(`原始name: ${node.data.name}`);
  console.log(`category: ${node.data.category}`);
  console.log(`score: ${node.data.score}`); // 注意区分null和undefined
});

快速验证技巧 #

如果还是不确定，可以在生成treeData后直接打印根节点的data：

console.log(treeData.data);

你会看到完整的原始数据对象，包含category和score字段。

内容的提问来源于stack exchange，提问作者spids