2

Vis.js を使用してネットワーク ダイアグラムを描画しています。特定のノードの AJAX 更新を受信すると、キャンバスがそのノードを中央に移動し (Vis.js は既に実行できます)、その上にある種のブルズアイ アニメーションを表示する通知機能が必要です。ノードをクリックするまでユーザーの注意を引きます。私が探しているアニメーション効果に最も近い例は、http://codepen.io/MateiGCopot/pen/ogEKRKにあります。 

var w = c.width = 400,
h = c.height = 400,
ctx = c.getContext('2d'),

frame = 0;

function anim(){
  window.requestAnimationFrame(anim);

  ++frame;

  for(var i = 0; i < w; ++i){
    ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue',
        (360 / (w/3) * i - frame) % 360
    ) : 'rgba(0, 0, 0, .08)';
    ctx.beginPath();
    ctx.arc(w/2, h/2, (i + frame)%w/2, 0, Math.PI*2);
    ctx.stroke();
    ctx.closePath();
  }
}
anim();

これは、このタイプの効果を達成するための最良の方法ですか? 私のマシンで実行すると、CPU 使用率が急上昇するため、それほど効率的ではないようです。
また、このようなものを Vis.js と統合して、画像ノードを描画し、ノードをクリックすると停止するようにするにはどうすればよいですか? この特定の例では、円を外側に描画しますが、内側に描画したいのですが、方向を変更する方法がわかりませんでした。

JavaScript は私の強力なスイートではないので、説明が詳細であればあるほどよいでしょう。また、私は特に Vis.js に縛られているわけではないので、(同等の Vis.js 機能と共に) この機能を既に備えている別のライブラリがあれば、切り替えても問題ありません。

4

1 に答える 1

2

私は visjs ネットワーク ビューの開発者です。これは、パブリック API 内ではまだ不可能です。renderloop 内に独自のコードを簡単に挿入できるようにするバージョン 4.0 に取り組んでいます。すぐに必要な場合 (4 月頃に 4.0 が予定されています)、GitHub ページに問題を投稿してください。これを自分でソースに挿入するのを手伝うことができます。人々が答えを見つけやすくするために、すべての質問を GitHub に残しておきたいと思います。

編集: さらに、もちろん、色を変更したり、フォーカス機能を使用してノードにフォーカスしたりすることもできます。しかし、それはあなたの質問ではありませんでした。回避策は、ノードの上に div をオーバーレイすることです。この場合、ドキュメントにはアニメーションとクリック ハンドラーを含む gif を含めることができます。vis API を使用して、上記のノードの位置を取得できます。

于 2015-03-03T09:13:05.443 に答える