在Plot.ly的圖上動畫添加和/或刪除元素動畫添加和/或刪除圖中的元素

Question

我試圖生成應該爲新數據元添加動畫的plot.ly圖，因爲它被添加到現有圖或動畫數據元素if它從圖表中刪除。

目前我使用的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動畫時。只有在數組中添加或刪除元素而不是數組的突變元素時，纔會進行這些更改。

我看過了的plotly文檔瞭解如何做到這一點的位置：https://plot.ly/javascript/animations/

這似乎表明，你必須有一個以前的狀態，然後過渡到一個新的狀態。該文檔似乎只指示如何動畫更改數據值，而不是如何爲新行添加動畫或刪除已刪除行的動畫。

由於動畫最近才被添加到Plot.ly中，所以我想知道是否有人可能知道如何最好地恢復我的圖形。

Answer 1

我不是100％確定如果這就是你想要的，但是一旦你按下按鈕，有60％的機會添加新的數據點或刪除一個隨機的數據點。

在這兩種情況下，圖形都用動畫更新。

唯一的技巧是每次更新圖形時重新計算x和y軸的範圍。

該片段基於第一個示例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>