Javascript 根据特性值为折线图中的垂直线指定不同的颜色

我想创建一个带有两条垂直线的折线图，这两条垂直线标记一条高值（10）的条纹的开始（红色）和结束（绿色）。这些行的颜色应根据输出变量中的start_end属性指定，如下所示：

关于如何实现这一点有什么想法吗？这是到目前为止我的代码（我使用的是D3V6）

---

我生成了一些数据，并在下面展示了如何以通用方式添加开始行和停止行

const data=[0,3,5,7,5,4,6,7,10,10,7,5,7,6,8,9,9,10,10,10,10,10,10,10,10,9,5,6,4,6,8,10,10,9]{
const now=新日期（）；
现在。设定日期（i）；
返回{
时间戳：现在，
值：v，
};
});
//找到我们第一次击中或停止击中10的所有位置
让主动=假；
data.forEach（（d，i）=>{
如果（d.值===10）{
如果（！活动）{
d、 开始=真；
主动=真；
}
}否则{
//前一个是最后一个活动的
如果（活动）{
数据[i-1].end=true；
主动=假；
}
}
});
常数宽度=600，
高度=300；
常量x=d3.scaleTime（）
.domain（d3.extent（数据，d=>d.timestamp））
.范围（[0，宽度]）；
常数y=d3.scaleLinear（）
.domain（[0,10]）
.范围（[高度-10,10]）；
常量行=d3.line（）
.x（d=>x（d.时间戳））
.y（d=>y（d.value））
const svg=d3.select（'svg'）
.attr（'width'，width）
.attr（'height'，height）
追加（“路径”）
.基准（数据）
.attr（“d”，行）
.风格（“笔划”、“钢蓝”）
.样式（“笔划宽度”，2）
.样式（“填充”、“无”）；
svg.selectAll（“行”）
.data（data.filter（d=>d.start | | d.end））
.输入（）
.附加（“行”）
.attr（“x1”，d=>x（d.时间戳））
.attr（“x2”，d=>x（d.时间戳））
.attr（“y1”，y.range（）[0]）
.attr（“y2”，y.range（）[1]）
.attr（“笔划”，d=>d.start？“绿色”：“红色”）

---

我生成了一些数据，并在下面展示了如何以通用方式添加开始行和停止行

const data=[0,3,5,7,5,4,6,7,10,10,7,5,7,6,8,9,9,10,10,10,10,10,10,10,10,9,5,6,4,6,8,10,10,9]{
const now=新日期（）；
现在。设定日期（i）；
返回{
时间戳：现在，
值：v，
};
});
//找到我们第一次击中或停止击中10的所有位置
让主动=假；
data.forEach（（d，i）=>{
如果（d.值===10）{
如果（！活动）{
d、 开始=真；
主动=真；
}
}否则{
//前一个是最后一个活动的
如果（活动）{
数据[i-1].end=true；
主动=假；
}
}
});
常数宽度=600，
高度=300；
常量x=d3.scaleTime（）
.domain（d3.extent（数据，d=>d.timestamp））
.范围（[0，宽度]）；
常数y=d3.scaleLinear（）
.domain（[0,10]）
.范围（[高度-10,10]）；
常量行=d3.line（）
.x（d=>x（d.时间戳））
.y（d=>y（d.value））
const svg=d3.select（'svg'）
.attr（'width'，width）
.attr（'height'，height）
追加（“路径”）
.基准（数据）
.attr（“d”，行）
.风格（“笔划”、“钢蓝”）
.样式（“笔划宽度”，2）
.样式（“填充”、“无”）；
svg.selectAll（“行”）
.data（data.filter（d=>d.start | | d.end））
.输入（）
.附加（“行”）
.attr（“x1”，d=>x（d.时间戳））
.attr（“x2”，d=>x（d.时间戳））
.attr（“y1”，y.range（）[0]）
.attr（“y2”，y.range（）[1]）
.attr（“笔划”，d=>d.start？“绿色”：“红色”）

您使用的是哪一版本的d3？当有多条条纹时会发生什么？对不起，忘了提一下，我用的是版本6，你用的是哪个版本的d3？当出现多条条纹时会发生什么？对不起，忘了提一下，我使用的是版本6

{
  const svg = d3.select(DOM.svg(width, height))
  
  svg.append('g').call(xAxis)
  svg.append('g').call(yAxis)
 
  svg.append("line")
        .datum(output)
        .attr("d", line)
        .attr("fill", "none")
        .style("stroke", "steelblue")
        .style("stroke-width", 4)
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("x1", xScale(output.timestamp))
        .attr("y1", 0)
        .attr("x2", xScale(output.timestamp))
        .attr("y2", 10)
        
  svg.append('path')
      .datum(segment)
      .attr('d', line)
      .style('fill', 'none')
      .style('stroke', 'black')  
  
  return svg.node()
}

output = [
  {timestamp: "2020-09-25T04:00:54.857Z", jam_factor: 10, start_end: "start"}
  {timestamp: "2020-09-29T18:02:23.282Z", jam_factor: 8.39212, start_end: "end"}
]