Javascript 用D3绘制趋势线-实际值&；预测

我有一个多系列的折线图，每个系列都有一条趋势线。我的数据的格式如下：前半部分是实际数据，第二部分是预测（预测）数据。所以在前32周，我有真实的数据，然后这些字段变为0。然后预测字段有数字，实际部分为0。您可以通过查看数据看到这一点。我用if语句处理这个问题

两个系列的线条都很准确

我的问题是预测的趋势线是错误的，我还没有弄清楚，因为它对实际部分是正确的

如果在此处将配置参数从“预测”更改为“实际”，则可以在图表中看到差异：

我使用在线找到的方法将趋势线添加到图表中：

var xSeries;
  var ySeries;
  var leastSquaresCoeff1;
  var x1;
  var y1;
  var x2;
  var y2;
  var trendData = []
  var trendline;
  var leastSquaresCoeff;

  // get the x and y values for least squares
  xSeries = d3.range(d3.min(actualData, function(d) {
    return d.items[columns.indexOf("Week")];
  }), d3.max(actualData, function(d) {
    return d.items[columns.indexOf("Week")];
  }) + 1);
  ySeries = actualData.map(function(d) {
    return parseFloat(d.items[columns.indexOf("Measure")])
  });

  leastSquaresCoeff = leastSquares(xSeries, ySeries);

  // apply the reults of the least squares regression
  x1 = actualData[0].items[columns.indexOf("Week")];
  y1 = leastSquaresCoeff[0] + leastSquaresCoeff[1];
  x2 = actualData[actualData.length - 1].items[columns.indexOf("Week")];
  y2 = leastSquaresCoeff[0] * xSeries.length + leastSquaresCoeff[1];
  trendData = [
    [x1, y1, x2, y2]
  ];

  trendline = svg.selectAll(".trendline")
    .data(trendData).enter()
    .append("line")
    .attr("class", "trendline")
    .style("stroke-dasharray", ("3, 3"))
    .attr("x1", function(d) {
      return x(d[0]);
    })
    .attr("y1", function(d) {
      return y(d[1]);
    })
    .attr("x2", function(d) {
      return x(d[2]);
    })
    .attr("y2", function(d) {
      return y(d[3]);
    })
    .attr("stroke", "#319455")
    .attr("stroke-width", 1);

---

你可以在这里看到我的小提琴（当前设置为forecast）：

我仍然不知道为什么这不起作用。但我发现了一个使用外部库的不同解决方案

我的解决方案基于以下示例：

此代码不绘制回归线：

var regLine = d3.line()
    .x(function(d) { 
        return x(d.Week); 
    })
    .y(function(d) { 
        return y(d.Measure); 
    });

  // Derive a linear regression
  var regression = ss.linearRegression(actualData.map(function(d) {
    return [+d.items[columns.indexOf("Week")], d.items[columns.indexOf("Measure")]];
  }));

  var lin = ss.linearRegressionLine(regression);

  // Create a line based on the beginning and endpoints of the range
  var lindata = x.domain().map(function(x) {
    return {
      Week: x,
      Measure: lin(+x)
    };
  });

  svg.append("path")
      .datum(lindata)
      .attr("class", "reg")
        .style("stroke-dasharray", ("3, 3"))
        .attr("stroke", "#319455")
        .attr("stroke-width", 1)
      .attr("d", regLine);

完成的图表：

var regLine = d3.line()
    .x(function(d) { 
        return x(d.Week); 
    })
    .y(function(d) { 
        return y(d.Measure); 
    });

  // Derive a linear regression
  var regression = ss.linearRegression(actualData.map(function(d) {
    return [+d.items[columns.indexOf("Week")], d.items[columns.indexOf("Measure")]];
  }));

  var lin = ss.linearRegressionLine(regression);

  // Create a line based on the beginning and endpoints of the range
  var lindata = x.domain().map(function(x) {
    return {
      Week: x,
      Measure: lin(+x)
    };
  });

  svg.append("path")
      .datum(lindata)
      .attr("class", "reg")
        .style("stroke-dasharray", ("3, 3"))
        .attr("stroke", "#319455")
        .attr("stroke-width", 1)
      .attr("d", regLine);