如何在 D3.js 的 join 进入选择中正确访问绑定的每个数据项-html教程-PHP中文网

如何在 D3.js 的 join 进入选择中正确访问绑定的每个数据项

在 D3.js v7+ 中，join 的 enter 回调函数内无法直接按元素获取对应数据（enter.datum() 仅返回首个数据），需改用 selection.each() 遍历每个 DOM 节点并访问其绑定的局部数据 d。

在 d3.js v7+ 中，`join` 的 `enter` 回调函数内无法直接按元素获取对应数据（`enter.datum()` 仅返回首个数据），需改用 `selection.each()` 遍历每个 dom 节点并访问其绑定的局部数据 `d`。

D3.js 的 .join() 方法是声明式数据绑定的核心，但在实际开发中，一个常见误区是误以为 enter 回调中的 enter.datum() 能返回当前处理元素所对应的数据项。实际上，enter.datum() 返回的是整个 enter 选择中第一个元素绑定的数据（即 data[0]），而非当前迭代项——这导致在多组动态实例化（如为每条 {n: 3} 数据创建独立 Rects 实例）时逻辑失效。

✅ 正确做法是：先调用 .join() 获取完整的 enter 选择（不传回调），再链式调用 .each(function(d, i) { ... })。each 的回调函数会为每个进入的元素单独执行，参数 d 即该元素绑定的原始数据对象，this 指向当前 DOM 节点，可安全用于构造上下文相关的可视化类实例。

以下为优化后的关键代码段：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

const data = [{n: 3, text: 'some text'}, {n: 2, text: 'some other text'}];

// 第一步：执行 join，获取 enter 选择（不立即处理）
const enter = d3.select('#root')
  .selectAll('li')
  .data(data)
  .join(); // ← 返回 enter selection，含多个节点

// 第二步：对每个 enter 元素单独处理，d 即当前数据项
enter.each(function(d, i) {
  const li = d3.select(this); // 当前

节点 const n = d.n; // ✅ 正确获取本项的 n 值 const r = new Rects(n); li.append('li') .text(`There should be \`d.n=${d.n}\` rects:`) .call(r.draw.bind(r)); });

⚠️ 注意事项：

不要将 new Rects(enter.datum().n) 写在 join((enter) => {...}) 回调内——此时 enter.datum() 是歧义的，且 enter 本身是选择集而非单个元素；
each() 是访问逐元素数据的标准且推荐方式，语义清晰、符合 D3 数据驱动范式；
若需同时处理 update/exit，可分别对 join 返回的三元组（{enter, update, exit}）调用 each，但本例仅关注 enter 场景；
类实例（如 Rects）应严格基于当前 d 构造，避免闭包捕获错误的 n 值。