Flot能绘制一个向量场吗？

Question

我有一些JS，它探讨了平面模型的一些性质，以及在自旋晶格中引起相变的机制。相变的一个指标是自旋在晶格中的定向方式，为此，我想画一个矢量场。弗洛能这么做吗？

Answer 1

是的，只要对flot库做一个小小的更改，就可以做到这一点。在drawSeriesPoints(series)函数中(1986年版本为0.7行)更改行

symbol(ctx, x, y, radius, shadow);

到这个

symbol(ctx, x, y, radius, shadow, series, Math.floor(i / ps));

这样您就可以在绘制数据池时访问它。

在表单[x coordinate, y coordinate, vector angle, vector length]中格式化数据点，并使用如下自定义符号函数：

function vector(ctx, x, y, radius, shadow, series, index) {

  var vectorAngle = series.data[index][2]; // in radians
  var vectorLength = series.data[index][3]; // in pixels

  var bottom = [Math.round(x + vectorLength * Math.sin(vectorAngle)), Math.round(y - vectorLength * Math.cos(vectorAngle))];
  var top = [Math.round(x - vectorLength * Math.sin(vectorAngle)), Math.round(y + vectorLength * Math.cos(vectorAngle))];
  var left = [top[0] - (top[0] - bottom[0]) / 4 + (top[1] - bottom[1]) / 4, top[1] - (top[1] - bottom[1]) / 4 - (top[0] - bottom[0]) / 4];
  var right = [top[0] - (top[0] - bottom[0]) / 4 - (top[1] - bottom[1]) / 4, top[1] - (top[1] - bottom[1]) / 4 + (top[0] - bottom[0]) / 4];

  ctx.beginPath();
  ctx.moveTo(top[0], top[1]);
  ctx.lineTo(left[0], left[1]);
  ctx.lineTo(right[0], right[1]);
  ctx.lineTo(top[0], top[1]);
  ctx.closePath();
  ctx.fillStyle = series.color;
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(top[0], top[1])
  ctx.lineTo(bottom[0], bottom[1]);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(x, y);
}

完整的例子，如小提琴。