使用 plotly.js 动画功能

Question

昨天Plotly发布了新的长篇动画！！！所以我非常渴望对此进行测试，并且由于当前缺乏文档（我想是暂时的），我在如何使用它方面苦苦挣扎。我确实查看了 GitHub 上的代码，但是……没有用。

我在模板中定义了我的 div 元素：
```
<div id="plotDiv"> </div>
```

我想让情节响应调整大小事件，因此我按照 plotly 网站上的示例进行操作：

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

然后生成数据（angular魔法和其他东西的位）但最后它看起来像这样：
```
data = {x: [array_ot_dates], y: [array_of_not_so_random_values], type:'bar'};
```
根据动画功能的jsdocs，你需要传递一个框架：
```
let plotlyFrame = {data:data, layout:{}};
```
试试调用动画吧！！！
```
Plotly.animate(gd, plotlyFrame);
```

然后就是 Kaboum！

第一个错误是：这个元素不是 Plotly 图：[object HTMLDivElement] 但是当我尝试这个时：

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

我有我的剧情……

所以我尝试通过使用空数据调用 Plotly.plot 然后调用动画函数来 "predefine" gd...

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

然后我得到以下错误：

plotly.js:116922 未捕获（承诺）类型错误：无法读取未定义的属性 '_module'（…）

可能第二个原因是我正在使用 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 在空地块上。

我希望这足以澄清问题！这是一个非常大的功能，所以我们很乐意收到反馈并听到有关 successes/failures 的信息！

使用 plotly.js 动画功能

Using plotly.js animation feature

javascript

plotly