在Plot.ly中为图上的元素添加和/或移除动画

Question

我正在尝试生成plot.ly图，当新数据元素添加到现有图时，它应该设置动画效果，如果从图中删除了该数据元素，则应该设置动画效果。

当前，我正在使用Plotly.newPlot函数，我的代码如下所示：

Plotly.newPlot('chart', plottablePopulations, layout)

我的数据格式如下：

plottablePopulations = [array of populationData]

populationData = {
   mode: "lines"
   name: "Arab World"
   type: "scatter"
   uuid: ".some unique id."
   x: [...array of x data...]
   y: [...array of y data...]
}

layout = {
   autosize: true,
   height: someHeight,
   title: "population vs year"
   width: someWidth,
   xaxis: object of x axis properties
   yaxis: object of y axis properties
}

我希望能够在种群数据更改数组具有Plotly动画效果的情况下使用。 仅当添加元素或从数组中删除元素而不是数组的变异元素时，才进行这些更改。

我在这里查看了有关如何执行此操作的详细文档： https ://plot.ly/javascript/animations/

似乎表明您必须具有以前的状态，然后才能过渡到新的状态。 该文档似乎仅指示如何对更改的数据值进行动画处理，而不是如何对新行进行动画处理或对删除的行进行动画处理。

由于动画是最近才添加到Plot.ly的，所以我想知道是否有人会知道如何最好地使我的图形恢复动画。

Answer 1

我不确定100％是否是您要的内容，但是一旦按下按钮，就有60％的机会添加新数据点或删除随机数据点。

在这两种情况下，图形都会通过动画进行更新。

唯一的技巧是每次更新图形时都重新计算x和y轴的范围。

该代码段基于此处的第一个示例。

 var data = { x: [0, 1, 2], y: [0.2, 0.5, 1]} Plotly.plot('graph', [{ x: data.x, y: data.y, ids: data.x, line: {simplify: false}, type: "scatter" }]); function randomize() { var rand = Math.random(); if (rand > 0.4) { data.x.push(Math.max.apply(null, data.x) + 1); data.y.push(0.1 + 3 * Math.random()); } else if (rand < 0.5 || data.x.length > 2) { var index = Math.floor(Math.random() * (data.x.length + 1)); data.x.splice(index, 1); data.y.splice(index, 1); } var layout = { xaxis: { range: [Math.min.apply(null, data.x), Math.max.apply(null, data.x) + 0.5] }, yaxis: { range: [0, Math.max.apply(null, data.y)] } }; Plotly.animate('graph', { data: [{ids: data.x}], layout: layout }, { transition: { duration: 1500, ease: 'cubic-in-out' } }) } 

 <div id="graph"></div> <button onclick="javascript:randomize();">Randomize!</button> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>