D3.js时间轴图表：如何在泳道内实现同名称活动的分组归线展示

开发背景 #

• 基于社区分享的D3.js不同宽度分带比例尺实现方案完成二次开发
• 二次开发新增两项能力：添加可用于时间轴平移的brush组件，将SVG渲染区域调整为响应式布局；核心比例尺计算逻辑与原示例保持一致

当前待实现目标 #

• 完成泳道内的活动分组归位：同名称的活动条目，在所属泳道内固定排布在同一行，避免同名活动穿插分布在不同行

已开展的尝试 #

在计算行偏移量的环节，计划先通过分组逻辑统计每个泳道内的不重复活动数，以此拿到准确的行总数再计算行偏移，但编写的代码无法正常运行，尝试的代码片段如下：

const offset = [0]
data.forEach(function (d) {
  const act = d3.group(d, (a) => a.activity);
  console.log([...act].length);
  this.push([...act].length);
}, offset);

配套参考材料 #

• 已准备可复现的最小调试代码示例，示例中附完整开发说明注释
• 已配套绘制目标效果参考图，明确最终期望的展示样式

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