使用plotly.js动画功能

Using plotly.js animation feature

本文关键字：功能 动画 js plotly 使用      更新时间：2023-09-26

昨天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. 然后生成数据(角魔法和其他东西)，但最终它看起来像这样:

    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来"预定义"gd。用空数据绘图，然后使用animate函数…

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次。

有什么建议吗?想法吗?

我就是制作动画的人!首先，你可以在这里找到文档。

关于你的具体问题，看起来答案是你需要在动画之前初始化情节(我会将其添加到文档中!)。例如:

var frame = [{
  data: {
    y: [...new values...]
  }
}]
Plotly.plot(gd, [{x: [...], y: [...]}]).then(function() {
  Plotly.animate(gd, frame)
});

如果某种用户输入正在触发动画，则可能不需要承诺(因为输入事件将处理事情，并且在Plotly.plot有机会初始化之前不太可能被触发)。

另外，至少我认为您需要用您希望动画的跟踪实际初始化plot 。我认为你可能可以摆脱空数据，但你仍然需要至少有一个跟踪定义，例如Plotly.plot(gd, [{x: [], y: []}])。我认为你尝试修复的问题是，[]的痕迹列表仍然是空的，就Plotly而言，因为这告诉它没有任何关于存在的痕迹类型。另外，并不是真正设计的一件事是以一种奇特的方式绘制初始情节。这可能会实现，但它不是自动给animate在一个空的地块。

我希望这足以澄清问题!这是一个相当大的功能，所以我们希望听到反馈，并听到成功/失败!

相关文章：