能否在Plotly中于3D线条上叠加柱状图或实现类似可视化效果？

方案1：3D线条+带数值标注的标记点 #

适合在3D线条的采样点上直接展示叠加数值，直观清晰：

import plotly.graph_objects as go
import numpy as np

# 生成绿色3D主线数据
t = np.linspace(0, 10, 20)
x = np.cos(t)
y = np.sin(t)
z = t

# 待叠加的目标数值组
overlay_values = np.random.randint(1, 10, size=len(t))

fig = go.Figure()

# 添加3D主线
fig.add_trace(go.Scatter3d(
    x=x, y=y, z=z,
    mode='lines',
    line=dict(color='green', width=4),
    name='3D主线'
))

# 添加带数值标注的标记点（叠加数据）
fig.add_trace(go.Scatter3d(
    x=x, y=y, z=z,
    mode='markers+text',
    marker=dict(size=8, color='#ff4d4d'),
    text=[f'{v}' for v in overlay_values],
    textposition='top center',
    name='叠加数值'
))

fig.update_layout(scene=dict(
    xaxis_title='X轴',
    yaxis_title='Y轴',
    zaxis_title='Z轴'
), title='3D线条叠加数值标注')

fig.show()

方案2：3D线条+垂直于线条的柱状图 #

如果需要更具立体感的“叠加”效果，可生成垂直于3D线条方向的柱状图来表示数值：

import plotly.graph_objects as go
import numpy as np

# 生成3D主线数据
t = np.linspace(0, 10, 15)
x = np.cos(t)
y = np.sin(t)
z = t

# 叠加数值（柱状图高度）
bar_heights = np.random.uniform(0.2, 0.8, size=len(t))

# 计算垂直于3D线条的方向向量
dx = np.gradient(x)
dy = np.gradient(y)
perp_x = -dy
perp_y = dx
perp_z = np.zeros_like(z)
# 归一化方向向量
norm = np.sqrt(perp_x**2 + perp_y**2 + perp_z**2)
perp_x /= norm
perp_y /= norm

fig = go.Figure()

# 添加绿色3D主线
fig.add_trace(go.Scatter3d(
    x=x, y=y, z=z,
    mode='lines',
    line=dict(color='green', width=4),
    name='3D主线'
))

# 添加每个采样点的垂直柱状图
for i in range(len(t)):
    start_x, start_y, start_z = x[i], y[i], z[i]
    end_x = start_x + perp_x[i] * bar_heights[i]
    end_y = start_y + perp_y[i] * bar_heights[i]
    
    fig.add_trace(go.Scatter3d(
        x=[start_x, end_x],
        y=[start_y, end_y],
        z=[start_z, start_z],
        mode='lines',
        line=dict(color='#3399ff', width=6),
        showlegend=False if i>0 else True,
        name='叠加柱状图'
    ))

fig.update_layout(scene=dict(
    xaxis_title='X轴',
    yaxis_title='Y轴',
    zaxis_title='Z轴'
), title='3D线条叠加垂直柱状图')

fig.show()

注意事项 #

• 若你的目标图有特定的叠加形态，可根据实际坐标系统调整垂直方向向量的计算逻辑
• Plotly支持多层3D trace叠加，核心是保证叠加元素的坐标与3D线条的采样点一一对应
• 复杂场景下还可尝试Mesh3d或Cone类型的trace实现定制化效果

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