Question

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

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

我希望情节能够响应调整大小的事件，因此我按照情节网站上的示例进行操作：

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

然后生成数据（角度魔法和其他东西的位），但最后它看起来像这样：
```
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, {});

我的情节......

所以我试图＆＃34;预定义＆＃34; gd通过调用带有空数据的Plotly.plot然后调用animate函数...

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

然后我收到以下错误：

plotly.js：116922未捕获（在承诺中）TypeError：无法读取属性＆＃39; _module＆＃39;未定义的（...）

可能第二个可能来自我使用角度的事实，因此在近距离调用该函数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并不是自动的。

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

使用plotly.js动画功能

1 个答案: