javascript - 使用 plotly javascript 库控制不同轨迹的特定 x 轴范围的图例

Question

我想在特定范围内同时控制不同轨迹的图例，比如 x=0 到 x=5。我们该怎么做？

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: 'scatter'
};
var trace3 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
  type: 'scatter'
};

var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
    legend: {"orientation": "h"}};
 
Plotly.newPlot('myDiv', data, layout);

例如，当我们点击一​​个图例时，被包围的部分应该被隐藏起来。

示例代码：Codepen_Sample

更新 2：如果 trace(curve) 由一组不同的子迹线定义，这些子迹线的要控制的图例范围不同但所有曲线的迹线 [名称] 相同。例如，这是伪代码：

for(let i=0; i<5; i++){
    initialise trace1;
    trace2;
    trace3;
}

标签： javascriptplotlyplotly.js

Answer 1

您可以将三个跟踪中的每一个都分解为起始段和结束段，然后将起始段分配为相同name、相同，并使用属性legendgroup在图例中仅显示其中之一。showlegend

由于 plotly.js 默认情况下会为每条迹线设置新颜色，因此您可能希望将每条迹线的起始段和结束段设置为相同的颜色。修复 xaxis 范围将避免在切换图例条目时调整整个绘图的大小。

这是 javascript 和codepen 示例：

var trace1_start = {
  x: [0, 1, 2, 3, 4, 5],
  y: [0, 3, 6, 4, 5, 2],
  type: 'scatter',
  marker: {color: 'orange'},
  name: 'start',
  showlegend: true,
  legendgroup: 'start'
};
var trace1_end = {
  x: [5, 6, 7, 8],
  y: [2, 3, 5, 4],
  type: 'scatter',
  marker: {color: 'orange'},
  name: 'trace1',
};
var trace2_start = {
  x: [0, 1, 2, 3, 4, 5],
  y: [0, 4, 7, 8, 3, 6],
  marker: {color: 'steelblue'},
  type: 'scatter',
  name: 'start',
  showlegend: false,
  legendgroup: 'start'
};
var trace2_end = {
  x: [5, 6, 7, 8],
  y: [6, 3, 3, 4],
  type: 'scatter',
  marker: {color: 'steelblue'}
};
var trace3_start = {
  x: [0, 1, 2, 3, 4, 5],
  y: [5, 7, 3, 2, 8, 6],
  type: 'scatter',
  marker: {color: 'forestgreen'},
  name: 'start',
  showlegend: false,
  legendgroup: 'start'
};
var trace3_end = {
  x: [5, 6, 7, 8],
  y: [6, 1, 9, 3],
  type: 'scatter',
  marker: {color: 'forestgreen'}
};

var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = {showlegend: true,
    legend: {"orientation": "h"}, xaxis: {"range": [0,8]}};
 
Plotly.newPlot('myDiv', data, layout);