javascript 放大Plotly热图

bounty还有6天到期。回答此问题可获得+400声望奖励。Basj正在寻找典型答案。

目前Plotly中有两种“缩放”行为。JS热图：
1.在这里，您可以采取任何矩形形状的缩放（单击，拖放）。但是像素不是正方形的，这对于某些应用来说是不合适的（长宽比不保留，有时应该保留）：

const z = Array.from({length: 500}, () => Array.from({length: 100}, () => Math.floor(Math.random() * 255)));
    Plotly.newPlot('plot', [{type: 'heatmap', z: z}], {});

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

1.由于{'yaxis': {'scaleanchor': 'x'}}，这里的像素是正方形，但是您只能使用特定的纵横比矩形形状进行缩放，这有时是UX/UI的限制因素：

const z = Array.from({length: 500}, () => Array.from({length: 100}, () => Math.floor(Math.random() * 255)));
    Plotly.newPlot('plot', [{type: 'heatmap', z: z}], {'yaxis': {'scaleanchor': 'x'}});

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

问题：如何两者兼得，我。e.你可以画一个矩形选择缩放的任何形状？并保持方形像素缩放对象应在图中居中（如果需要，使用水平或垂直白色）。

好吧，即使我没有找到一个解决所有问题的整体解决方案，我确实找到了一种方法，使固定缩放一个正方形，而不是矩形（根据示例脚本#2），这意味着放大值的块/像素也显示为正方形，并且在放大后不会变形为矩形（这可能比处理figsize扭曲的矩形形状和缩放更好，你在示例片段中得到的）。
这是通过将aspectmode属性设置为"square"和将aspectratio设置为{"x": 1, "y": 1}来完成的。这将允许矩形缩放选择变成正方形，同时保留像素的纵横比，因此它们也将保持正方形。
要使缩放对象在图中居中，可以将xaxis.range和yaxis.range设置为选定范围。
下面是基于您的代码的示例代码段：

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

    const layout = {
      width: 500,
      height: 500,
      margin: {l: 50, r: 50, t: 50, b: 50},
      xaxis: {range: [0, 100]},
      yaxis: {range: [0, 500], scaleanchor: 'x'},
      aspectmode: 'square',
      aspectratio: {x: 1, y: 1}
    };

    Plotly.newPlot('plot', [{type: 'heatmap', z: z}], layout);

    const plotDiv = document.getElementById('plot');

    plotDiv.on('plotly_selected', function(eventData) {
      const xRange = [eventData.range.x[0], eventData.range.x[1]];
      const yRange = [eventData.range.y[0], eventData.range.y[1]];
      Plotly.relayout('plot', {xaxis: {range: xRange}, yaxis: {range: yRange}});
    });

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

这样，与您的绘图交互的用户可能无法放大 * 任何 * 缩放的形状，但方形形状至少比替代的固定矩形缩放更直观，这也扭曲了绘图的图形大小。
另一个不错的选择（如果你不固定的“区域”-缩放）将设置mousewheel: true内的const layout使用鼠标滚轮放大使用它代替。但是我还没有找到足够好的文档来展示如何正确使用它，但是值得检查。
希望能帮上忙👍

javascript 放大Plotly热图

1条答案

相关问题

热门标签

最新问答