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.

可以绘制一个矢量场吗？

1 个答案: