Plotly.js 热图着色问题：使用灰色而不是白色

Question

我正在研究用 JavaScript 生成绘图热图的代码。我面临的问题是，对于 log2FoldChange 值在 -0.1, 0.1 范围之间的数据，显示的颜色是灰色阴影，而不是我用 #FFFFFF 定义的白色。下面是我的代码：

// Create heatmap data
let heatmap_data = [{
    z: total_L2FC,
    x: indiv_name_list,
    y: gene_list,
    type: 'heatmap',
    hovertemplate: 'Gene: %{y}<br>Individual: %{x}<br>log2FoldChange: %{z}<br>p-adj: %{customdata}<extra></extra>',
    customdata: total_padj,
    zmin: -4,
    zmax: 4,
    colorscale: [
        [-4, '#000A63'],
        [-3, '#000A63'],
        [-3, '#000D84'],
        [-2.67, '#000D84'],
        [-2.67, '#1C2892'],
        [-2.33, '#1C2892'],
        [-2.33, '#39439F'],
        [-2, '#39439F'],
        [-2, '#555EAD'],
        [-1.67, '#555EAD'],
        [-1.67, '#7179BB'],
        [-1.33, '#7179BB'],
        [-1.33, '#8E93C8'],
        [-1, '#8E93C8'],
        [-1, '#AAAED6'],
        [-0.67, '#AAAED6'],
        [-0.67, '#C6C9E4'],
        [-0.33, '#C6C9E4'],
        [-0.33, '#E3E4F1'],
        [-0.10, '#E3E4F1'],
        [-0.10, '#FFFFFF'],
        [0.10, '#FFFFFF'],
        [0.10, '#F6E3E3'],
        [0.33, '#F6E3E3'],
        [0.33, '#EDC7C6'],
        [0.67, '#EDC7C6'],
        [0.67, '#E4ABAA'],
        [1, '#E4ABAA'],
        [1, '#DB8F8E'],
        [1.33, '#DB8F8E'],
        [1.33, '#D37371'],
        [1.67, '#D37371'],
        [1.67, '#CA5755'],
        [2, '#CA5755'],
        [2, '#C13B39'],
        [2.33, '#C13B39'],
        [2.33, '#B81F1C'],
        [2.67, '#B81F1C'],
        [2.67, '#AF0300'],
        [3, '#AF0300'],
        [4, '#970300'],
    ],
    
    autocolorscale: false,
    hoverongaps: false,
    xaxis: {
        tickangle: 45
    },
    yaxis: {
        autorange: true
    },
    colorbar: {
        title: {
            text: 'log<sub>2</sub>FC',
            font: {
                size: 14
            }
        }
    },
    showscale: true,
}];

let layout = {
    height: fig1_height,
    width: fig1_width,
    xaxis: {
        title: {
            text: 'Individual',
            font: {
                size: 14
            }
        }
    },
    yaxis: {
        title: {
            text: 'Gene',
            font: {
                size: 14
            }
        }
    }
};

console.log('fig1_width:', fig1_width);

// Resolve the Promise with the generated heatmap data and layout
resolve({ heatmap_data, layout, fig1_title });

我已经尝试调整似乎是我可以从热图离散色标以及一般热图页面上的绘图文档中获得的所有设置。

我还尝试颠倒定义色阶的顺序，将它们更改为 rgb 而不是 hexscale，并将 zmin-zmax 更改为色阶范围内和之外。

请帮忙。我已经解决这个问题近一周了，但我一生都无法弄清楚出了什么问题。

Answer 1

您需要标准化色标值，以便它们适合标度

[0, 1]

。另外，最后还缺少一个值：

...
[2.67, '#AF0300'],
[3, '#AF0300'],
[3, '#AF0300'], # <- missing
[4, '#970300'],

要标准化值，您可以执行以下操作：

const normalize = v => (v - zmin) / (zmax - zmin);
colorscale.map(([v, color]) => [normalize(v), color])