如何将多条线添加到D3JS折线图中，其中确定的变量数据源开始于范围内的不同位置？

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleLinear()
  .domain([0, data.length - 1]) // 数据的范围
  .range([0, width]); // SVG容器的宽度范围

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value; })]) // 数据的范围
  .range([height, 0]); // SVG容器的高度范围

var line = d3.line()
  .x(function(d, i) { return xScale(i); }) // x坐标使用索引
  .y(function(d) { return yScale(d.value); }) // y坐标使用数据值
  .curve(d3.curveMonotoneX); // 使用平滑曲线连接数据点

data.forEach(function(dataset) {
  svg.append("path")
    .datum(dataset)
    .attr("class", "line")
    .attr("d", line);
});

svg.selectAll(".line")
  .style("stroke", function(d, i) { return color(i); }) // 根据索引设置线条颜色
  .style("stroke-width", 2); // 设置线条宽度