如何控制 plotly.js 中轨迹的显示顺序？

Question

我显示了大量的跟踪线。通常为 50-200。我正在将历史数据与模拟数据进行比较。我想通过选择不同的颜色来突出显示单个模拟轨迹线。所有这些工作正常。

但是，显示的跟踪线有时会被大量其他线隐藏。除了重绘整个图并最后添加那条线之外，有没有办法强制将指定的轨迹绘制在其他轨迹之上？某种 z-index 等效或“带到前面”机制？

Answer 1

也许这对其他 Plotly 用户也有用。该代码片段使用 Plotly 的函数将迹线 7 推送到前台react。

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

//generate some random data
var trace1 = {
  x: [1, 2, 3, 4],
  y: [1, 2, 0.5, 1.5],
  type: 'lines',
  name: 'trace 0',
  line: {
width: 2
  }
};

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,
'line': {
  'width': 2
}
  };
  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);
}

var buttonForeground = document.getElementById("foreground");
var buttonReset = document.getElementById("reset");

var div = document.getElementById('myDiv');
Plotly.newPlot(div, data);

buttonReset.disabled = true;
buttonForeground.onclick = function() {
  var temp = data[foreground];
  data[foreground] = data[data.length - 1];
  data[data.length - 1] = temp;
  data[data.length - 1]['line']['width'] = 5;
  Plotly.react(div, data);

  switchButtons();
};

document.getElementById("reset").onclick = function() {
  var temp = data[data.length - 1];
  data[data.length - 1] = data[foreground];
  data[foreground] = temp;
  data[foreground]['line']['width'] = 2;
  Plotly.react(div, data, {});
  
  switchButtons();
};

function switchButtons() {
  buttonForeground.disabled = !buttonForeground.disabled;
  buttonReset.disabled = !buttonReset.disabled;
}

<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>