Как мне управлять порядком отображения трасс в plotly.js?

Question

У меня отображается большое количество линий трассировки. 50-200 как правило. Я сравниваю исторические данные с симулированными данными. Я хочу выделить одну смоделированную кривую путем выделения другим цветом. Все это прекрасно работает.

Однако отображаемая линия трассировки иногда скрыта большим количеством других линий. Есть ли способ заставить указанную трассировку быть нарисованной поверх других, кроме перерисовки всего графика и добавления этой последней строки? Какой-то эквивалент z-index или механизм "вывести на передний план"?

Answer 1

Возможно, это полезно и для других пользователей Plotly. Фрагмент вытолкнул трассировку 5 на передний план с помощью Plotly's restyleфункция.

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>