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 
} 

私のことができるようにしたいですpopulationDataの配列に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>