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

Question

我有一个最佳拟合线的散点图。我想从每个数据点到回归线绘制垂直线（残差线）。我怎样才能做到这一点？

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

编辑：
正如所指出的，我错误地说我的行的数据包含在“数据”中;但是，该行是使用名为lin_reg_results的数组绘制的，其结构如下：

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

lin_reg_results个数据点是通过执行线性回归服务器端创建的，然后使用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);

Answer 1

您需要为每个数据点添加一条线，从该点的坐标到它与线相交的位置。代码看起来类似于以下内容（某些代码改编自this question）：

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;
  });