plotly.jsのトレースの表示順序を制御するにはどうすればよいですか？

Question

多くのトレースラインが表示されています。典型的には50-200。私は履歴データとシミュレーションデータを比較しています。私は、異なる色で選択することによって、単一のシミュレートされたトラセルを強調したい。これらはすべて正常に動作します。

しかし、表示されているトレースラインは、多くの他のラインによって隠されることがあります。プロット全体を再描画し、最後にそのラインを追加するのではなく、特定のトレースを他のものの上に強制的に描画する方法はありますか？ある種のZ-インデックスに相当するもの、あるいは「前面に持ってくる」メカニズム？

Answer 1

おそらく、これは他のPlotlyユーザーにとっても便利です。スニペットはPlotlyのrestyle関数を使用してトレース5をフォアグラウンドにプッシュしました。

var foreground = 5; //trace which is pushed to the foreground 
 

 
var trace1 = { 
 
    x: [1, 2, 3, 4], 
 
    y: [1, 2, 0.5, 1.5], 
 
    type: 'lines', 
 
    name: 'trace 0' 
 
}; 
 

 
var data = [trace1]; 
 
var i = 0; 
 
var j = 0; 
 
for (i = 1; i < 10; i += 1) 
 
{ 
 
    var trace = {x: [], y: [], type: 'lines', name: 'trace ' + i} 
 
    for (j = 0; j < trace1.x.length; j +=1) 
 
    { 
 
     trace.x.push(trace1.x[j]) 
 
     trace.y.push(trace1.y[j] + Math.random()) 
 
    } 
 
    data.push(trace); 
 
} 
 
Plotly.newPlot('myDiv', data); 
 

 
document.getElementById("reset").disabled = true; 
 
document.getElementById("foreground").onclick = function() 
 
{ 
 
    var temp = data[foreground]; 
 
    data[foreground] = data[data.length - 1]; 
 
    data[data.length - 1] = temp; 
 

 
    Plotly.restyle('myDiv', {line: { 
 
    width: 5 
 
    }}, data.length - 1); 
 
    document.getElementById("foreground").disabled = true; 
 
    document.getElementById("reset").disabled = false; 
 
}; 
 

 
document.getElementById("reset").onclick = function() 
 
{ 
 
    var temp = data[data.length - 1]; 
 
    data[data.length - 1] = data[foreground]; 
 
    data[foreground] = temp; 
 
    Plotly.restyle('myDiv', {line: { 
 
    width: 2 
 
    }}); 
 
    document.getElementById("foreground").disabled = false; 
 
    document.getElementById("reset").disabled = true; 
 
};

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="myDiv" style="width: 480px; height: 400px;"></div> 
 
<button type="button" id='foreground'>Foreground</button> 
 
<button type="button" id='reset'>Reset</button>