Question

我正在按照这个例子选择一个感兴趣的区域：

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

<script>
var gd = document.getElementById('graph');
var d3 = Plotly.d3;
var formatter = d3.format('.2f');

Plotly.plot(gd, [{
  mode: 'lines',
  x: Array.apply(null, Array(100)).map(() => Math.random()),
  y: Array.apply(null, Array(100)).map(() => Math.random()),
}], {
  dragmode: 'select'
});

gd.on('plotly_selected', (eventData) => {
  var xRange = eventData.range.x;
  var yRange = eventData.range.y;

  Plotly.relayout('graph', 'title',
`x range: [${xRange.map(formatter).join(', ')}]<br>
 y range: [${yRange.map(formatter).join(', ')}]`
  );
});
</script>

但是，当我将模式值更改为“行”而不是“标记”时，图表中不存在框选择按钮（通常应该在平移按钮旁边）。一旦页面呈现，我仍然可以选择一个框，但如果我选择缩放工具，则无法返回到框选择。

Answer 1

我发现可以明确指定应该存在哪些按钮：

Plotly.plot(gd,
            [
                {
                    type: "scatter",
                    x: time,
                    y: current,
                }
            ],
            {},
            {modeBarButtons:
             [
                 ['zoom2d'],
                 ['zoomIn2d'],
                 ['zoomOut2d'],
                 ['autoScale2d'],
                 ['select2d'],
                 ['toImage']
             ]
            }
           );

无论情节类型如何，这似乎都会强制显示这些按钮。

Answer 2

我认为这是设计的，因为你只能真正选择标记，所以如果没有标记，则无需选择。没有什么能阻止你同时使用两者，但修改你的代码看起来像这样：

xvals = Array.apply(null, Array(100)).map(() => Math.random());
yvals = Array.apply(null, Array(100)).map(() => Math.random());   
Plotly.plot(gd, [{
  mode: 'lines',
  x: xvals,
  y: yvals,
},{
  mode: 'markers',
  x: xvals,
  y: yvals,
}], {
  dragmode: 'select'
});

如果您需要标记不可见，则可以将其大小调整为小于线宽，并使markers和lines具有相同的颜色。

如何强制Box Select工具显示在绘图中？

2 个答案: