データをフィルタリングしてスケールを扱う - d3js

私はd3jsに単純な散布図を用意しました。視覚化の目的は、選択したポイントをフェードアウトさせることです。これは機能します。これに合わせて、選択された点だけでなく、更新された勾配方程式およびR2値に新しい傾向線が現れるはずです。ポイントのフェーディングと勾配方程式/ R2値の更新は、選択に作用しています。しかし、トレンドラインは切り捨てられ、正しくスケーリングされていないように見えますが、その理由を理解することはできません。データをフィルタリングしてスケールを扱う - d3js

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

このコードは、ときにすべてのデータ点（データのフィルタリングなし）うまく機能するが、フィルタリングが発生したときにない次のコードが実行されるon.change後

Here is a working version.

。

これは、すべての点である - これは、フィルタリングポイントでトレンドラインOK