向图表添加垂直线

// 假设已有D3.js绘制的折线图
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

// 数据点
const data = [
  { date: new Date(2023, 0, 1), value: 10 },
  { date: new Date(2023, 0, 2), value: 20 },
  // ...更多数据点
];

// 添加垂直线
const addVerticalLine = (xPosition) => {
  svg.append("line")
    .attr("x1", xPosition)
    .attr("y1", 0)
    .attr("x2", xPosition)
    .attr("y2", height)
    .attr("stroke", "red")
    .attr("stroke-dasharray", "5,5"); // 可选：虚线样式
};

// 假设我们要在第一个数据点的位置添加垂直线
const firstDataPointX = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width])(data[0].date);

addVerticalLine(firstDataPointX);