用d3和numericjs在javascript中绘制错误椭圆

Drawing an error ellipse in javascript with d3 and numericjs

本文关键字：绘制 错误 javascript d3 numericjs      更新时间：2023-09-26

我正在尝试用javascript实现绘制协方差误差椭圆的方法。

errorEllipse = function(stdDevX, stdDevY, cor, center, level) {
  var errEllipse,
  cov = cor * stdDevX * stdDevY,
  covmat = [
  [stdDevX * stdDevX, cov],
  [cov, stdDevY * stdDevY]
  ],
  eig = numeric.eig(covmat),
  scale = Math.sqrt(jStat.chisquare.inv(level, 2)),
  maxLambdaI = indexOfMax(eig.lambda.x),
  minLambdaI = indexOfMin(eig.lambda.x),
  rx = stdDevX > stdDevY ? Math.sqrt(eig.lambda.x[maxLambdaI]) * scale : Math.sqrt(eig.lambda.x[minLambdaI]) * scale,
  ry = stdDevY > stdDevX ? Math.sqrt(eig.lambda.x[maxLambdaI]) * scale : Math.sqrt(eig.lambda.x[minLambdaI]) * scale,
  v1 = eig.E.x[maxLambdaI],
  theta = Math.atan2(v1[1], v1[0]) * 180 / Math.PI;
  if (theta < 0) {
    theta += 360;
  }
  //make the ellipse object
  errEllipse = {
    rx: rx,
    ry: ry,
    cx: center.x,
    cy: center.y,
    orient: -theta
  };
  return errEllipse;
};

我在当前尝试的结果中看到的最明显的问题是椭圆不符合数据。很难准确地找到我的错误所在。

有人能给我看吗1.）我如何获得或绘制椭圆的半径和角度有什么问题。或2.）在javascript中绘制错误/置信度省略号的任何示例。

我使用的库numericjs用于特征向量和值，jstat和d3用于绘图。

这是一个带有当前代码的plnkr。

errorEllipse函数在"script.js"文件中。可通过编辑testData.js.更改测试数据

更新：

我添加了用d3绘制椭圆的代码，以防出现问题：

svg.append('ellipse')
  .attr('class', 'q-ellipse-99')
  .attr('rx', Math.abs(xScale(xExtent[0] + ellipse99.rx) - xScale(xExtent[0])))
  .attr('ry', Math.abs(yScale(yExtent[0] + ellipse99.ry) - yScale(yExtent[0])))
  .attr('transform', 'translate(' + xScale(ellipse99.cx) + ',' + yScale(ellipse99.cy) + ')rotate(' + ellipse99.orient + ')');

xExtent和yExtent数组都是通过对数据调用d3.extent（）返回的。

最初的问题是我在绘制时没有缩放椭圆的rx和ry值。上面的代码现在似乎可以正常工作（正在更新中）。这里是plnkr的一个分支，它使用随机的正常测试数据（如下）。

function genTestData(numPoints){
  var data = {x:[], y:[]};
  for(var i = 0; i < numPoints; i++){
    data.x[i] = jStat.normal.inv(Math.random(), 8.5, 2);
    data.y[i] = jStat.normal.inv(Math.random(), 6.5, 3);
    data.y[i] += data.x[i] * 2.1; //to test ellipse
  }
  return data;
}
相关文章：