javascript - 使用 plotly.js 动画功能

Question

昨天Plotly发布了新的长篇动画!!!所以我非常渴望对此进行测试，并且由于当前缺乏文档(我想是暂时的)，我在如何使用它方面苦苦挣扎。我确实查看了 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. 然后生成数据(一些 Angular 魔术和其他东西)但最后它看起来像这样:

   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 图:[object HTMLDivElement]但是当我尝试这个时:

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

我有我的计划......

所以我尝试通过使用空数据调用 Plotly.plot 然后调用 animate 函数来“预定义”gd ...

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

然后我得到以下错误:

plotly.js:116922 Uncaught (in promise) TypeError: Cannot read property '_module' of undefined(...)

可能第二个原因是我正在使用 angular，因此在一个点连续调用函数 3 次。

有什么建议吗？想法？

Answer 1

我是制作动画片的人!首先，您可以在此处找到文档。

关于您的具体问题，答案似乎是您需要在制作动画之前初始化绘图(我会将其添加到文档中!)。例如:

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

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

如果某种用户输入触发了动画，promise 可能是不必要的(因为输入事件将处理事情并且在 Plotly.plot 有一个初始化的机会)。

此外，至少我相信您需要使用您希望设置动画的轨迹实际初始化绘图。我认为你可能可以摆脱空数据，但你仍然需要至少定义一个跟踪，例如Plotly.plot(gd, [{x: [], y: []}])。我认为您尝试修复的问题是，就 Plotly 而言，跟踪列表的 [] 仍然是空的，因为它没有说明存在的跟踪类型。另外，仅供引用，该功能不是真正设计的一件事是以花哨的方式绘制初始图。这可能会完成，但它不是自动给定的 animate 空图。

我希望这足以澄清问题!这是一个非常大的功能，所以我们很乐意收到反馈并了解成功/失败的消息!