假设我们有一个热图:

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分.

如何放大/高亮显示高于阈值的像素? 或者,将阈值为below%的像素设置为透明或灰色更容易.

目标是在视觉上将焦点放在阈值以上的像素上.

How to do this with Plotly.js?

推荐答案

如果您可以定义像素的离散值范围(例如最小值0和最大值10),则可以将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, 'white'],
  [breakpoint, 'white'],
  [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%(包括5到10,5个像素)的值将显示为红色.在我的示例中,我只使用两种 colored颜色 来定义高于和低于阈值的值.如果要使用不同的色标,可以try 执行以下操作:

const min = 0;
const max = 10;

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


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

const colorscaleValue = [
  [0.0, 'rgba(169,169,169,0.5)'],
  [breakpoint, 'rgba(169,169,169,0.5)'],
  [breakpoint, 'rgb(220,170,132)'],
  [1, 'rgb(178,10,28)'],
];


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.01.0,并且它们以百分比表示值范围.

Javascript相关问答推荐

如何在NightWatch.js测试中允许浏览器权限?

React Hooks中useState的同步问题

获取表格的左滚动位置

如何修复循环HTML元素附加函数中的问题?

在页面上滚动 timeshift 动垂直滚动条

Google Apps脚本中的discord邀请API响应的日期解析问题

Cookie中未保存会话数据

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新?

这个值总是返回未定义的-Reaction

使用Google API无法进行Web抓取

提交链接到AJAX数据结果的表单

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

OpenAI转录API错误请求

匹配一个或多个可选重复的特定模式

将多个文本框中的输出合并到一个文本框中

有没有办法在R中创建一张具有多个色标的热图?

如何在Web项目中同步语音合成和文本 colored颜色 更改

当达到高度限制时,如何裁剪图像?使用html和css

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?