在 Plot.ly 的绘图上添加和/或删除元素的动画答案

【问题标题】：Animating an addition and/or removal of an element on a plot in Plot.ly在 Plot.ly 的绘图上添加和/或删除元素的动画
【发布时间】：2016-10-21 18:45:52
【问题描述】：

我正在尝试生成 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
}

我希望能够在populationData 数组更改时对它们进行Plotly 动画处理。这些更改仅适用于从数组中添加或删除元素而不是数组的变异元素。

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

这似乎表明你必须有一个以前的状态，然后转换到一个新的状态。该文档似乎仅指示如何为更改的数据值设置动画，而不是如何为新行设置动画或为删除的行设置动画。

由于动画最近才被添加到 Plot.ly 我想知道是否有人可能知道如何最好地重新激活我的图表。

【问题讨论】：

标签： javascript animation plotly

【解决方案1】：

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

在这两种情况下，图表都会使用动画进行更新。

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

sn-p 基于第一个示例here。

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>

【讨论】：