Plotly.js热力图颜色异常：指定白色却显示灰色

问题出在你对Plotly colorscale的理解偏差上：**colorscale数组的第一个元素是归一化后的相对值（0_{1区间），不是原始z值的绝对值**。你现在直接用了原始的log2FoldChange数值（比如-4、-3、-0.1）作为colorscale的位置参数，Plotly会自动把这些值归一到0}1，导致你定义的白色区间被错误压缩，最终显示为灰色。

解决步骤： #

基于你的zmin=-4、zmax=4，先把每个临界z值转换为归一化比例，公式为：

归一化值 = (原始z值 - zmin) / (zmax - zmin) = (z_val + 4) / 8

比如：

• -4 → 0
• -3 → ( -3 +4 )/8 = 0.125
• -0.1 → (-0.1 +4)/8 = 0.4875
• 0.1 → (0.1 +4)/8 = 0.5125
• 4 → 1

修改后的代码（重点替换colorscale部分）： #

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
    colorscale: [
        [0, '#000A63'],
        [0.125, '#000A63'],
        [0.125, '#000D84'],
        [(1.33)/8, '#000D84'], // -2.67 → (-2.67+4)=1.33
        [(1.33)/8, '#1C2892'],
        [(1.67)/8, '#1C2892'], // -2.33 → (-2.33+4)=1.67
        [(1.67)/8, '#39439F'],
        [0.25, '#39439F'], // -2 → (-2+4)/8=0.25
        [0.25, '#555EAD'],
        [(2.33)/8, '#555EAD'], // -1.67 → 2.33/8≈0.29125
        [(2.33)/8, '#7179BB'],
        [(2.67)/8, '#7179BB'], // -1.33 →2.67/8≈0.33375
        [(2.67)/8, '#8E93C8'],
        [0.375, '#8E93C8'], // -1 →3/8=0.375
        [0.375, '#AAAED6'],
        [(3.33)/8, '#AAAED6'], // -0.67 →3.33/8≈0.41625
        [(3.33)/8, '#C6C9E4'],
        [(3.67)/8, '#C6C9E4'], // -0.33 →3.67/8≈0.45875
        [(3.67)/8, '#E3E4F1'],
        [0.4875, '#E3E4F1'], // -0.1 →3.9/8=0.4875
        [0.4875, '#FFFFFF'],
        [0.5125, '#FFFFFF'], // 0.1 →4.1/8=0.5125
        [0.5125, '#F6E3E3'],
        [(4.33)/8, '#F6E3E3'], //0.33→4.33/8≈0.54125
        [(4.33)/8, '#EDC7C6'],
        [(4.67)/8, '#EDC7C6'], //0.67→4.67/8≈0.58375
        [(4.67)/8, '#E4ABAA'],
        [0.625, '#E4ABAA'], //1→5/8=0.625
        [0.625, '#DB8F8E'],
        [(5.33)/8, '#DB8F8E'], //1.33→5.33/8≈0.66625
        [(5.33)/8, '#D37371'],
        [(5.67)/8, '#D37371'], //1.67→5.67/8≈0.70875
        [(5.67)/8, '#CA5755'],
        [0.75, '#CA5755'], //2→6/8=0.75
        [0.75, '#C13B39'],
        [(6.33)/8, '#C13B39'], //2.33→6.33/8≈0.79125
        [(6.33)/8, '#B81F1C'],
        [(6.67)/8, '#B81F1C'], //2.67→6.67/8≈0.83375
        [(6.67)/8, '#AF0300'],
        [0.875, '#AF0300'], //3→7/8=0.875
        [1, '#970300'],
    ],
    autocolorscale: false,
    hoverongaps: false,
    colorbar: {
        title: {
            text: 'log<sub>2</sub>FC',
            font: {
                size: 14
            }
        }
    },
    showscale: true,
}];

额外验证建议： #

• 修改后查看颜色条，确认白色区间是否正常显示
• 可以打印几个关键z值的归一化结果，比如console.log((-0.1 +4)/8, (0.1+4)/8)，确认区间范围正确

内容的提问来源于stack exchange，提问作者akg44