D3树节点技术问题：按uuid筛选后如何获取与单节点一致的数据？

嘿，我明白你现在遇到的问题了——你拿到的第一个输出是D3的选择集对象（就是包含_groups和_parents的那个），而第二个是单个节点绑定的原始数据的属性列表。要从筛选后的选择集中拿到和单个节点格式一致的数据，其实用D3自带的方法就能搞定，下面给你两种常用的方案：

方案1：使用.data()方法提取数据 #

D3的选择集对象的.data()方法会返回该选择集绑定的所有数据组成的数组。因为你是通过uuid筛选特定单个节点，所以数组的第一个元素就是你要的目标数据：

// 假设你已经通过筛选得到了目标节点的选择集，比如：
const targetNodeSelection = d3.selectAll('.tree-node').filter(d => d.uuid === '你的目标uuid');

// 提取对应的数据
const targetNodeData = targetNodeSelection.data()[0];
console.log(targetNodeData); // 这时候就能看到包含uuid、data、height等属性的完整数据对象，和你单个节点的格式一致

方案2：使用.datum()方法（更适合单个节点的场景） #

如果确定你的筛选只会返回一个节点，那直接用.datum()方法更简洁，它会直接返回当前选择集绑定的单个数据对象，不用再取数组元素：

const targetNodeData = targetNodeSelection.datum();
console.log(targetNodeData);

为什么这两种方法有效？ #

你之前看到的['data', 'height', 'depth', ...]其实是单个节点数据对象的属性名数组，而D3的选择集是对DOM元素的包装，.data()和.datum()就是专门用来获取绑定到DOM元素上的原始数据的方法，这样拿到的数据和你直接访问单个节点的格式完全一致。

如果你的筛选可能返回多个节点，那.data()会返回对应的数据数组，你可以通过遍历数组来处理每个节点的数据~

内容的提问来源于stack exchange，提问作者H. Trujillo