plotly.jsアニメーション機能の使用

Question

昨日新しい機能アニメーションをプロットします。だから私はこれを試してみたいと思っていましたが、現在の文書の不足（一時的に私が思う）で、私はそれを使う方法についてかなり苦労しています。 私はGitHubのコードを覗いてみましたが、うまくいきませんでした。

1. 私は、テンプレートの私のdiv要素を定義します。

   <div id="plotDiv"> </div> 
   

2. 私は、このように私はplotlyウェブサイト上の例を踏襲し、イベントのサイズを変更するに応答プロットを持っていると思った：

   const d3 = Plotly.d3; 
   const gd3 = d3.select("#plotDiv") 
       .style({width: "95%", "margin-left": "2.5%"}); 
   const gd = gd3.node(); 
   

3. 次に、データ（角魔法のビットなど）を生成しますが、最終的には次のようになります。

   data = {x: [array_ot_dates], y: [array_of_not_so_random_values], type:'bar'}; 
   

4. アニメーション機能についてjsdocsによると、あなたはフレームに合格する必要があります。

   let plotlyFrame = {data:data, layout:{}}; 
   

5. は、アニメーションを呼び出すようにしてください！

   Plotly.animate(gd, plotlyFrame); 
   

そして、そこにはKaboumを行きます！だから私が試した

Plotly.newPlot(gd, data, {}); 

私は私のプロットを持っている...

：[オブジェクトHTMLDivElement] しかし、私はこれをしようとすると：この要素はPlotlyプロットではありません：

最初のエラーがあります

...空のデータ、その後、アニメーション機能をPlotly.plotを呼び出すことにより、

Plotly.plot(gd, [], {}); 
// make my data not empty 
Plotly.animate(gd, plotlyFrame); 

をGDを「事前定義」そして私はfolloを取得します翼のエラー：

plotly.js：116922キャッチされない例外TypeError（約束で）：プロパティを読み取ることができません未定義の「_module」（...）

おそらく第二は、私は、角使っているという事実から来る可能性があり、このように、関数をある時点で3回近くの行で呼び出します。

アドバイスはありますか？アイデア？

Answer 1

私はアニメーション機能を担当した人です！まず、ここでドキュメントを見つけることができます。

具体的な質問については、アニメーションを作成する前にプロットを初期化する必要があるようです（これをドキュメントに追加します）。たとえば、次のように

var frame = [{ 
    data: { 
    y: [...new values...] 
    } 
}] 

Plotly.plot(gd, [{x: [...], y: [...]}]).then(function() { 
    Plotly.animate(gd, frame) 
}); 

ユーザー入力のいくつかの並べ替えは、アニメーションをトリガされた場合は、入力イベントが物事を処理し、Plotly.plotはチャンスがあった前にクビにしてはかなりそうにないだろうから、約束はおそらく（必要はありません初期化）。

さらに、実際にアニメーションするトレースを使用してプロットを初期化する必要があると思われます。私はおそらく空のデータを取り除くことができると思いますが、少なくともトレースを定義する必要があります。 Plotly.plot(gd, [{x: [], y: []}])。私はあなたの試行の問題の問題は、Plotlyが存在する限りトレースのリストについては[]がまだ空であるということです。それは存在するトレースのタイプについて何も教えてくれないからです。また、実際にはではなく、であることが、実際には最初のプロットを空想的な方法で描くことです。それは達成される可能性がありますが、空のプロットにはanimateが自動的に与えられません。

問題を明らかにするには十分だと思います！それはかなり大きな機能だったので、私たちはフィードバックを愛し、成功/失敗について聞いています！