过滤数据并使用刻度-d3js

Question

我在d3js中有一个简单的散点图。 可视化的目的是淡化选区上的点。 这可行。 与此对应的是，仅应为那些选定的点以及更新的斜率方程式和R2值显示一条新的趋势线。 点的衰落和斜率方程/ R2值的更新正在选择中。 但是，趋势线似乎被截断并且缩放比例不正确，但是我不知道为什么。

这是一个工作版本。

在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

似乎您在将值分配给ptBy1和ptBx1时离开了“ min”，意思是“ max”

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