使用plotly.js动画功能

Question

昨天Plotly发布了新的动画片!!! 因此我非常渴望对此进行测试,并且由于目前缺少文档(我认为暂时不行),我在如何使用它方面遇到了很多困难.我确实看到了GitHub上的代码,但是......没有用.

1. 我在模板中定义了div元素:

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

2. 我希望情节响应调整大小事件,因此我按照情节网站上的示例:

   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.plot然后使用animate函数来"预定义"gd ...

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

然后我收到以下错误:

plotly.js:116922 Uncaught(in promise)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在空图上并不是自动的.

我希望这足以澄清问题!这是一个非常大的功能,所以我们喜欢反馈,并听取它的成功/失败!