我显示了大量跟踪线。通常为 50-200。我正在将历史数据与模拟数据进行比较。我想通过不同颜色的选择来突出显示单个模拟跟踪线。所有这些都很好用。
但是,显示的跟踪线有时会被大量其他线隐藏。除了重新绘制整个绘图并最后添加该行之外,是否有方法强制将指定的迹线绘制在其他迹线之上?某种 z-index 等效项或“置于前面”机制?
也许这对其他 Plotly 用户也有用。该代码片段使用 Plotly 的
react
函数将迹线 7 推送到前台。
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>
我在数据数组的末尾有顶部迹线,但它仍然没有出现在顶部。
事实证明,它的类型与其他类型不同,而且似乎优先考虑
scattergl
而不是默认类型。因此,当我将数据中所有对象的类型更改为scattergl
时,最终遵循了数据数组中的顺序。
之前的例子:
const data = [];
data.push({
x: [0, 1, ...],
y: [43, 100, ...],
ids: ["first", "second", ...],
type: "scattergl",
mode: "markers",
marker: {opacity: 1, color: "green", size: 8},
showlegend: false,
name: "",
});
// Highlight quake
data.push({
x: [10],
y: [55],
ids: ["selected"],
mode: "markers",
marker: {opacity: 1, color: "green", size: 8},
showlegend: false,
name: "",
});
修复后:
// Highlight quake
data.push({
x: [10],
y: [55],
ids: ["selected"],
type: "scattergl", // <---- add this
mode: "markers",
marker: {opacity: 1, color: "green", size: 8},
showlegend: false,
name: "",
});