应用 d3.stratify() 后如何访问原始数据?

Question

我有一个大型CSV，结构如下：

id,value
Animal,
Animal.Cat,
Animal.Cat.Female,
Animal.Cat.Female.Domestic,
Animal.Cat.Female.Domestic.Kittn,
Animal.Cat.Female.Domestic.Kittn.Brown,
Animal.Cat.Female.Domestic.Kittn.Brown.Pearl,"Pearl.Cat.Domestic.Brown.Female.Kittn.43529.K19-032349.Ca03.A387384.05/25/2019.05/29/2019.4.Stray.Over_The_Counter.Transfer.Hssc.Treatable/Rehab.Treatable/Rehab.County.County.95407.95407(38.403734,_-122.736775).1"
Animal.Cat.Male,
Animal.Cat.Male.Domestic,
Animal.Cat.Male.Domestic.Small,
Animal.Cat.Male.Domestic.Small.Brown,
Animal.Cat.Male.Domestic.Small.Brown.Elliott,"Elliott.Cat.Domestic.Brown.Male.Small.05/31/2005.K19-032383.Vet.A387892.05/31/2019.05/31/2019.0.Stray.Field.Euthanize..Unknown.Dead.Santa_Rosa.Santa_Rosa.95404.95404(38.458384,_-122.675588).1"

我正在使用 d3 层次结构模块来创建树形图。使用d3.stratify构造层次结构后，我尝试从 CSV 访问原始值id和value：

nodes.append("text")
.text(function(d) { 
var string = d.id.substring(d.id.lastIndexOf(".") + 1);
console.log(d.id + " " + d.value);
return string.replace(/_/g, " "); 
})

使用d.id成功获取id值，但记录d.value会产生undefined。

下面是演示该问题的可执行 CodeSandbox。

Answer 1

使用 stratify 运算符创建层次结构时d3.stratify原始数据存储在节点的.data属性中。您需要访问该属性才能获取值。您在节点上看到的id属性是一个红鲱鱼，因为它是 D3 通过应用stratify.id()访问器创建的内部 ID。由于您没有自行指定访问器，因此默认启动了使用已存在的.id属性。因此，内部 ID 等于您的原始 ID;但是，对于涉及不同访问器的其他情况，这可能是任何人工构造的 ID。

要访问原始值，您应该始终求助于节点的.data属性。对于您的代码，这将是：

nodes.append("text")
.text(function(d) { 
const data = d.data;   // The .data property contains your original values
console.log(data.id + " " + data.value);
// ...
});