过滤数据和使用scale - d3js

Question

我在d3js中有一个简单的散点图。可视化的目的是淡化选择上的点。这有效。与此一致，新趋势线应仅针对那些选定点以及更新的斜率方程和R2值出现。点的衰落和斜率方程/ R2值的更新正在进行选择。但是，趋势线似乎被截断并且未正确缩放，但我无法弄清楚原因。

Here is a working version.

在on.change之后执行以下代码：

filteredData  = filterJSON(data, 'name', value); // gets filtered json data

  var x = d3.scaleLinear()
      .range([0,width]);

  var y = d3.scaleLinear()
      .range([height,0]);


  var xSeries1 = filteredData.map(function(e) { return e.x; }); // new x values
  var ySeries1 = filteredData.map(function(e) { return e.y; }); // new y values
  var rsq1 = leastSquares(xSeries1,ySeries1); // calculates r2/slope etc. - see function below

 // Add trendline
  ptAx1 =  d3.min(xSeries1);
  ptAy1 =  rsq1[0] *  d3.min(xSeries1) + rsq1[1];
  ptBy1 =  d3.min(ySeries1);
  ptBx1 =  (d3.min(ySeries1) - rsq1[1]) / rsq1[0];



  svg.append("line")
        .attr("class", "regression")
        .attr("x1", x(ptAx1))   
        .attr("y1", y(ptAy1))
        .attr("x2", x(ptBx1))
        .attr("y2", y(ptBy1));




// calculate linear regression
function leastSquares(xSeries,ySeries) {

  var reduceSumFunc = function(prev, cur) { return prev + cur; };

  var xBar = xSeries.reduce(reduceSumFunc) * 1.0 / xSeries.length;
  var yBar = ySeries.reduce(reduceSumFunc) * 1.0 / ySeries.length;

  var ssXX = xSeries.map(function(d) { return Math.pow(d - xBar, 2); })
    .reduce(reduceSumFunc);

  var ssYY = ySeries.map(function(d) { return Math.pow(d - yBar, 2); })
    .reduce(reduceSumFunc);

  var ssXY = xSeries.map(function(d, i) { return (d - xBar) * (ySeries[i] - yBar); })
    .reduce(reduceSumFunc);

  var slope = ssXY / ssXX;
  var intercept = yBar - (xBar * slope);
  var rSquare = Math.pow(ssXY, 2) / (ssXX * ssYY);

  return [slope, intercept, rSquare];
}

此代码适用于所有数据点（不过滤数据），但在过滤时不会。

这是所有要点 - 趋势线确定

这是过滤点 - 趋势线被截断

Answer 1

看起来你离开了＆＃34; min＆＃34;在哪里你的意思＆＃34; max＆＃34;在为ptBy1和ptBx1

赋值时

在您的＆＃34; blockbuilder中进行此更改＆＃34;它似乎按预期工作。