基于D3.js实现传感器目标信息接收时长时间线的技术咨询

我一直特别认可那个经典的D3时间线实现思路，现在打算把它改造一下，用来展示传感器捕获目标信息的时长情况，让整个捕获过程的时间节点和进度一目了然。

我的数据集与需求说明 #

• 先给大家看看我的数据集样本：首个传感器在第30秒时捕获到了第一组读数，到第45秒的时候，四个传感器都已经成功获取到了目标1和目标2的全部读数。
• 我想要的效果是，用类似那个时间线的展示方式，把每个传感器捕获不同目标的时间窗口清晰呈现出来，同时能直观看到整体从开始到所有传感器完成捕获的时间区间。

具体改造思路 #

• 把原时间线示例中的条目，替换成**「传感器+目标」**的组合，每个组合对应一条独立的时间线
• 时间轴范围设置为30秒到45秒，每个传感器捕获对应目标的起始时间到完成时间，用色块或线段来标记
• 用不同颜色区分目标1和目标2，这样一眼就能分辨不同目标的捕获进度
• 在每条时间线旁边添加明确标注，显示对应的传感器编号和目标ID，避免混淆

核心数据处理与代码参考 #

首先得把原始数据整理成D3容易处理的结构，比如：

// 整理后的传感器-目标时间数据
const sensorTargetData = [
  { sensor: "传感器1", target: "目标1", start: 30, end: 32 },
  { sensor: "传感器1", target: "目标2", start: 31, end: 33 },
  { sensor: "传感器2", target: "目标1", start: 33, end: 35 },
  { sensor: "传感器2", target: "目标2", start: 34, end: 36 },
  { sensor: "传感器3", target: "目标1", start: 36, end: 39 },
  { sensor: "传感器3", target: "目标2", start: 37, end: 40 },
  { sensor: "传感器4", target: "目标1", start: 40, end: 43 },
  { sensor: "传感器4", target: "目标2", start: 41, end: 45 },
];

之后就可以参考原示例的时间轴构建逻辑，调整x轴比例尺（把时间范围对应到像素宽度），然后循环渲染每个数据项对应的时间块，再配上标注和颜色区分，就能实现想要的效果了。

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