D3.js如何为每个g.stage分组正确追加单个rect.range元素

问题原因 #

你对select方法的使用确实存在问题：D3 中只有selectAll返回的选择集支持完整的 enter/update/exit 数据绑定流程，select方法返回的是单元素选择集，不存在有效的 enter 集合，因此你调用range.enter()不会触发新元素的创建逻辑，导致range rect无法生成。

修复方案 #

将原range相关的代码替换为如下逻辑即可：

// 代表整个阶段的range元素
const range = stages
  .merge(stagesEnter)
  .selectAll("rect.range")
  // 每个stage对应1个range，绑定长度为1的数组，元素为当前stage的数据
  .data(d => [d]);
const rangeEnter = range.enter()
  .append("rect")
  .classed("range", true);
// 后续如果需要更新range的宽高、位置等属性，可通过merge处理
range.merge(rangeEnter)
  // 示例属性设置，可根据实际业务需求修改
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 100)
  .attr("height", 20);

该逻辑通过selectAll选中每个stage下的range rect，绑定单元素数组实现每个stage对应1个range元素的需求，且range元素会先于item元素渲染，自然处于DOM下层作为范围背景使用，完全符合你预期的结构要求。

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