如何在Plotly.js中复刻Matplotlib的c=density颜色映射效果？

我参考Plotly 3D散点图教程制作了如下3D散点图：

但我希望实现类似Matplotlib制作的这幅图的效果：

即通过颜色展示每个数据点的密度（数据点出现次数越多，沿色条的颜色越浅）。简言之，就是要在Plotly.js中复刻Matplotlib里ax.scatter(x, y, z, c=density, cmap='viridis')的功能。

解决方案 #

要实现这个效果，只需对Plotly.js的配置做以下修改：

1. 准备密度数据数组
   首先将每个数据点对应的密度值整理成JavaScript数组，对应每个(x,y,z)组合的密度，比如对应Python示例数据的JS版本：

   var density = [11, 2, 16, 30, 4, 1, 1, 28, 2, 4, 15, 6, 3, 4, 26];
   

2. 修改散点图Trace配置
   在原有的scatter3d trace中，为marker添加颜色绑定、颜色映射规则，并开启颜色条：

   • marker.color：绑定密度数组，实现按密度着色
   • marker.colorscale：设置为'Viridis'，对应Matplotlib的viridis色卡
   • marker.reversescale：设置为true，实现“密度越高颜色越浅”的效果（Viridis默认是数值越高颜色越深）
   • marker.showscale：设置为true，显示颜色条

3. 添加红色标记点
   新增一个scatter3d trace，对应Matplotlib里的红色星号标记点。

完整代码示例 #

// 对应Python示例的数据
var x = [1, 1, 2, 2, 1, 1, 2, 2, 3, 4, 4, 3, 3, 4, 4];
var y = [1, 2, 2, 1, 1, 2, 2, 1, 1, 2, 1, 1, 2, 2, 1];
var z = [1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1];
var density = [11, 2, 16, 30, 4, 1, 1, 28, 2, 4, 15, 6, 3, 4, 26];
// 红色标记点的坐标，替换为实际值
var ux = 0, uy = 0, uz = 0;

// 主散点Trace，按密度着色
var trace1 = {
    x: x,
    y: y,
    z: z,
    mode: 'markers',
    marker: {
        size: 12, 
        line: {
            color: 'rgba(217, 217, 217, 0.14)',
            width: 0.5
        }, 
        opacity: 0.8,
        color: density, // 绑定密度数据
        colorscale: 'Viridis', // 使用Viridis色卡
        reversescale: true, // 反转颜色，实现高密度浅色
        showscale: true // 显示颜色条
    },
    type: 'scatter3d'
};

// 红色标记点Trace
var trace2 = {
    x: [ux],
    y: [uy],
    z: [uz],
    mode: 'markers',
    marker: {
        size: 18,
        color: 'red',
        symbol: 'star', // 星号标记
        line: {
            width: 0.3
        }
    },
    type: 'scatter3d',
    name: 'You'
};

var data = [trace1, trace2];
var layout = {
    margin:{
        l: 0, 
        r: 0, 
        b: 0, 
        t: 0
    },
    legend: {
        visible: true
    }
};

Plotly.newPlot('your-div-id', data, layout); // 替换为你的DOM元素ID

关键属性说明 #

• marker.color：相当于Matplotlib的c=density，将颜色与密度值关联
• colorscale: 'Viridis'：完全匹配Matplotlib的cmap='viridis'色卡
• reversescale: true：反转颜色映射方向，满足“数据点出现次数越多颜色越浅”的需求
• showscale: true：对应Matplotlib的colorbar，显示颜色与密度的对应关系

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