选择或突出显示 Plotly 热图上的点

Question

假设我们有一个热图：

const z = Array.from({length: 250}, () => Array.from({length: 500}, () => Math.floor(Math.random() * 10)));
Plotly.newPlot('plot',  [{z: z, type: 'heatmap'}]);
document.getElementById("go").onclick = () => { alert(); }

<script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
<button id="go">Click to focus the pixels > 5</button>
<div id="plot"></div>

假设我们有一个

threshold = 5

。

如何强调/突出显示高于阈值的像素？ 或者也许更容易将“低于”阈值的像素设置为透明或灰色。 目标是在视觉上将焦点放在阈值以上的像素上。

如何使用 Plotly.js 做到这一点？

Answer 1

threshold

定义为百分比值，并使用它来定义自定义

colorscale

。

const min = 0;
const max = 10;

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

const threshold = 5; // value included in the highlighted range
const breakpoint = threshold / max; // (percentage from 0.0 to 1.0)

const colorscaleValue = [
  [0.0, 'blue'],
  [breakpoint, 'blue'],
  [breakpoint, 'red'],
  [1, 'red']
];


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

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

如您所见，范围前半部分（50%、0 到 5 像素）内的所有值都将显示为蓝色，高于 50% 的值将显示为红色。在我的示例中，我仅使用两种颜色来定义高于和低于阈值的值。如果您想使用不同的色阶，可以尝试以下操作：

const min = 0;
const max = 10;

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

const threshold = 5; // value included in the highlighted range
const breakpoint = threshold / max; // (percentage from 0.0 to 1.0)

const colorscaleValue = [
  [0.0, 'rgb(255,255,255)'],
  [breakpoint, 'rgb(255,165,0)'],
  [breakpoint, 'rgb(0,0,255)'],
  [1, 'rgb(0,0,100)'],
];


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

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

您当然可以在

colorscale

中设置任意数量的“断点”，只需记住值从

0.0

到

1.0

，它们代表百分比值范围。