javascript - 过滤数据并使用比例 - d3js

Question

我在 d3js 中有一个简单的散点图。可视化的目的是淡出选区上的点。这有效。与此一致，新的趋势线应该仅针对那些选定的点以及更新的斜率方程和 R2 值出现。点的淡化和斜率方程/R2值的更新正在进行选择。但是，趋势线似乎被 chop 并且未正确缩放，但我不明白为什么。

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

此代码在所有数据点(未过滤数据)时运行良好，但在发生过滤时则不然。

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

这是过滤点 - 趋势线被 chop

Answer 1

在为 ptBy1 和 ptBx1 赋值时，您似乎将“min”留在了“max”的位置

在您的“blockbuilder”中进行了此更改，它似乎按预期工作。