Plotly.js缩放工具：拖动选框过小时异常，如何禁用该特性？

当使用Plotly.js工具栏的缩放工具拖拽绘制选框时，若选框宽度或高度低于默认阈值（5像素），选框会从矩形变为线条样式。要禁用这个特性，只需修改Plotly内部的拖拽最小距离阈值为0即可。

实现代码 #

const z = Array.from({length: 500}, () => Array.from({length: 100}, () => Math.floor(Math.random() * 255)));

// 初始化图表
const plotElement = document.getElementById('plot');
Plotly.newPlot(plotElement, [{type: 'heatmap', z: z}], {})
  .then(() => {
    // 获取图表的拖拽层控制器
    const dragLayer = plotElement._fullLayout._draglayer;
    if (dragLayer) {
      // 将最小拖拽距离设为0，禁用阈值判断
      dragLayer.dragDistanceMin = 0;
    }
  });

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>

原理说明 #

Plotly默认设置dragDistanceMin为5像素，当拖拽距离小于这个值时，会将操作识别为"点击"而非"拖拽选框"，从而改变选框样式。将该值设为0后，无论拖拽距离多小，都会保持矩形选框的样式。

内容的提问来源于stack exchange，提问作者Basj