Flotはベクトルフィールドをプロットできますか？

Question

私は、平面モデルのいくつかの特性と、スピンの格子内で相転移を起こすメカニズムを探るJSをいくつか持っています。相転移の指標の1つは、スピンが格子内で配向される方法であり、そのためにはvector fieldをプロットしたいと思います。 Flotはそうすることができますか？

Answer 1

はい、これを行うには、flotライブラリを少し変更します。 drawSeriesPoints(series)機能（バージョン0.7でのライン1986）で、それを描画するときに、あなたがデータポイントにアクセスできるように、これが行われている。この

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

にライン

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

を変更。

形[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.