在 D3.js v7+ 中，join 的 enter 回调函数内无法直接按元素获取对应 datum（.datum() 仅返回首个数据项），需改用 selection.each() 遍历每个 DOM 节点并结合当前数据 d 实例化逻辑。

在 d3.js v7+ 中，`join` 的 enter 回调函数内无法直接按元素获取对应 datum（`.datum()` 仅返回首个数据项），需改用 `selection.each()` 遍历每个 dom 节点并结合当前数据 `d` 实例化逻辑。

D3.js 的 .join() 方法是声明式数据绑定的核心，但其 enter/update/exit 回调函数的设计初衷是批量操作，而非逐元素上下文感知。正如示例所示：当在 enter 回调中调用 enter.datum()，它返回的是整个 enter selection 的第一个绑定数据（即 data[0]），而非当前正在处理的元素所对应的 datum——这导致无法为每个 <li> 正确初始化不同 n 值的 Rects 实例。

✅ 正确做法是：先执行 .join() 获取完整 selection（含 enter、update、exit），再对 enter selection（或通用 selection）调用 .each((d, i, nodes) => { ... })。在 each 回调中，参数 d 即为当前 DOM 元素（nodes[i]）所绑定的数据对象，可安全用于构造器参数、条件判断或动态配置。

以下是重构后的关键代码段（已优化可读性与健壮性）：

Json Schema Toolkit

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

下载

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

const listItems = d3.select('#root')
  .selectAll('li')
  .data(data)
  .join('li'); // 返回包含 enter/update 的 selection

// ✅ 在 each 中访问每个元素的完整 datum
listItems.each(function(d, i) {
  const li = d3.select(this); // 当前 

元素 const rects = new Rects(d.n); // 使用 d.n 实例化 —— 数据驱动！ li.text(`There should be ${d.n} rects:`) .append('svg') .attr('width', d.n * 20 + 20) .attr('height', 20) .append('g') .attr('transform', 'translate(20,0)') .selectAll('rect') .data([...Array(d.n).keys()]) .join('rect') .attr('x', (i) => i * 20) .attr('y', 0) .attr('width', 20) .attr('height', 20) .attr('fill', (_, i) => ['purple', 'forestgreen', 'orange'][i % 3]); });

⚠️ 注意事项：

• 不要依赖 enter.datum() 获取单个元素数据——它是 selection 级方法，非元素级；
• each() 中的 this 指向原生 DOM 元素，务必用 d3.select(this) 包装以使用 D3 方法；
• 若需区分 enter/update 逻辑（如仅对新元素初始化），可用 li.filter((d, i, nodes) => nodes[i].__data__ === d) 或配合 selection.enter() 提前捕获，但多数场景 each 已足够；
• Rects.draw() 原实现中硬编码了 this.#domain，实际可简化为直接传入 d.n，避免类耦合，提升复用性。

该模式体现了 D3 “数据驱动文档” 的本质：数据决定行为，每个元素在其上下文中独立响应自身数据。掌握 selection.each() 是突破 join 抽象层、实现精细化控制的关键一步。