Flot 可以绘制矢量场吗？

Question

我有一些 JS 探索了平面模型的一些特性以及导致自旋晶格相变的机制。相变的一个指标是自旋在晶格中的定向方式，为此我想绘制 vector field。 Flot 能做到吗？

Answer 1

是的，您可以通过对 flot 库进行一点小改动来做到这一点。在 drawSeriesPoints(series) 函数中（版本 0.7 中的第 1986 行）更改行

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

Complete example as fiddle.

Flot 可以绘制矢量场吗？

Can Flot plot a vector field?

flot