当使用 Plotly 移动色阶范围的滑块时，如何实现更快的渲染？

Question

以下代码用于使用滑块更改 Plotly 热图色标的 \xe2\x80\x9cmin\xe2\x80\x9d 。

\n

但它非常慢：拖动滑块时我们的移动速度为 1 fps。

\n

像用“heatmapgl”替换“heatmap”这样的解决方案并不能真正解决问题（它可能会提高到 2 fps）。

\n

如何使用滑块更灵敏/更快地更改色阶？

\n

对于许多应用程序来说，能够“实时”（超过 10 fps）看到色标变化的结果至关重要，并且可以使用 Matplotlib 等来做到这一点。

\n

如何在 Plotly JS 中获得相同的行为？

\n

\r\n

\r\n

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));  \nvar steps = [], i;\nfor (i = 0; i < 500; i++)\n    steps.push({label: i, method: \'restyle\', args: [\'zmin\', i]});\nPlotly.newPlot(\'myDiv\',  [{z: z, colorscale: \'Jet\', type: \'heatmap\'}], {sliders: [{steps: steps}]});

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 1

每个滑块步骤都需要完全重新绘制热图，这需要时间，特别是因为点数 (500k)。

然而，正如评论中所讨论的，当没有平滑算法时，似乎需要更长的时间（zsmooth:false）时比有（zsmooth:'best'或zsmooth:'fast'）时需要更长的时间，这是不合逻辑的：由于插值成本，它应该是相反的方式。查看代码，我可以确认存在可以解决的性能问题。

在 PR 修复问题之前，您可以使用一个解决方案，其中包括设置：

1. zsmooth:'fast'为了受益于（当前）最快的绘图方法。
2. image-rendering: pixelated以防止浏览器进行平滑处理。

当然，因为太容易了，你会遇到一个错误，即高分辨率热图在使用时会以某种方式“截断”zsmooth:'fast'（这已在版本2.21.0中修复）。为了避免这一问题，我们需要在布局中设置明确的宽度、高度和边距。

铌。关于绘图大小，如果您想让用户有机会正确查看热图，则可能需要设置明确的宽度、高度和边距，即。显然，除非定义了特定的（缩放）范围，否则每块砖至少有一个像素，并且对于滑块而言，每步也有一个像素（最终，分辨率本身可能是一个问题）。

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));  
var steps = [], i;

for (i = 0; i < 500; i++)
    steps.push({label: i, method: 'restyle', args: ['zmin', i]});

const data = [{
  z: z, 
  colorscale: 'Jet', 
  type: 'heatmap', 
  zsmooth: 'fast'
}];

const layout = {
  sliders: [{steps: steps}],
  width: 1200,
  height: 650,
  margin: {
    t: 40,
    b: 110,
    l: 90,
    r: 110
  }
};

Plotly.newPlot('myDiv', data, layout);

.subplot.xy .heatmaplayer image {
  image-rendering: pixelated;  
}

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