在plot .ly中显示添加和/或删除绘图元素的动画

Question

我正在尝试生成情节。当一个新的数据元素被添加到现有的图形中，或者当一个数据元素被从图形中移除时，它应该被动画化。

目前我正在使用plot。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动画那些。

关于如何做到这一点，我已经查看了plot文档:https://plot.ly/javascript/animations/

这似乎表明你必须有一个以前的状态，然后过渡到一个新的状态。文档似乎只指示如何动画改变数据值，而不是如何动画新行或动画删除的行。

As动画最近才被添加到Plot。我想知道是否有人知道如何最好地恢复我的图形。

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>