Javascript 如何将圆连接到具有垂直于x轴的线的路径以创建“误差线”？

我有一个散点图和一条最合适的线。我想画垂直线，从每个数据点到回归线的剩余误差线。我该怎么做

如果可能的话，我想使用一个过渡来旋转最佳拟合线，并使误差线随着最佳拟合线的旋转而展开或收缩。任何帮助都将不胜感激

编辑： 正如所指出的，我错误地说我的行的数据包含在数据中；但是，这条线是使用一个名为lin_reg_results的数组绘制的，该数组的结构如下：

var lin_reg_results = [{'x':3.4,'y':4.6},{'x':3.6,'y',2.4}...]

lin_reg_结果数据点是通过在服务器端执行线性回归，然后使用ajax将结果传回的方式创建的

var x = d3.scale.linear()
  .domain(d3.extent(data, function(d) { return d[x_val]; }))
  .range([0, width]);

var y = d3.scale.linear()
  .domain(d3.extent(data, function(d) { return d[y_val]; }))

// PLOT THE DATA POINTS

svg.selectAll(".dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("transform", "translate("+50+"," + 10 + ")")
  .attr("r", 2.5)
  .attr("cx", function(d) { return x(d[x_val]); })
  .attr("cy", function(d) { return y(d[y_val]); })
  .style("fill", function(d) { return color(d[z_val]); });

// DRAW THE PATH
var x = d3.scale.linear()
  .domain(d3.extent(data, function(d) { return d['x']; }))
  .range([0, width]);

var y = d3.scale.linear()
  .domain(d3.extent(data, function(d) { return d['y']; }))

var line = d3.svg.line()
  .x(function(d) { return x(d['x']); })
  .y(function(d) { return y(d['y']); })
  .interpolate("linear"); 

svg.append("path")
  .datum(lin_reg_results)
  .attr("transform", "translate("+50+"," + 10 + ")")
  .attr("id","regression_line")
  .attr("class", "line")
  .attr("d", line);

---

您需要为每个数据点从该点的坐标到与该线相交的位置追加一条线。代码如下所示，其中一些代码改编自：

---

你能给我们看看你用来划界的代码吗？看起来您正在将与点相同的数据绑定到直线，并使用相同的方式计算坐标。这将导致每一点都有一行。谢谢你的回复-你是正确的，我发布的代码中有一个错误。我已经更新了我的问题-如果还需要进一步的详细信息，请告诉我。您是否想要一条从最佳拟合线到数据点的垂直线。是的，这正是我想要的。我相信这可以通过使用点积向量找到点到参考线的垂直线来解决。如果您在应用此应用程序时遇到问题，请告诉我，我可以搜索我的一个应用程序进行演示。感谢您的帮助-在做了一些研究之后，似乎这是正确的方法。但是，var line=d3.selectpath.regression\u line.node返回null。我想，一旦我弄清楚这是怎么回事，这个解决方案就会起作用。虽然这会起作用，但在你找到它与每个x值相交的点之前，沿着这条路径爬行看起来不是很有效。由于您可能知道y=mx+b形式的最佳拟合线方程，因此最好使用该方程从数据中确定x值处直线的y值，然后将该y值放入y刻度。在这种特殊情况下，您甚至可以在第一个点和最后一个点之间进行线性插值，不需要任何介于两者之间的东西。不过，代码一般都能正常工作。感谢Lars和Amelia-我今天将尝试实现一些建议的解决方案，并在完成后进行更新。@Lars-我使用的是您的解决方案的一个稍加修改的版本，该版本为我提供了x1、x2、y1、y2的正确值，但它在正文外追加了一行。你知道为什么会这样吗？

d3.selectAll("line")
  .data(data)
  .enter()
  .append("line")
  .attr("x1", function(d) { return x(d[x_val]); })
  .attr("x2", function(d) { return x(d[x_val]); })
  .attr("y1", function(d) { return y(d[y_val]); })
  .attr("y2", function(d) {
    var line = d3.select("#regression_line").node(),
        x = x(d[x_val]);
    function getXY(len) {
      return line.getPointAtLength(len);
    }
    var curlen = 0;
    while (getXY(curlen).x < x) { curlen += 0.01; }
    return getXY(curlen).y;
  });