Plotly垂直Sankey图自定义节点位置避免截断的实现方法

核心解决思路：自定义节点位置时，需同步调整布局边距与节点坐标范围，避免节点超出画布边界，同时适配Dash的动态布局需求。

具体调整方案： #

1. 规范节点坐标取值
   垂直Sankey的node.x和node.y为0-1的相对坐标，不要将值设得过于接近0或1（比如x=0、x=1），给画布边缘留足空间。例如左侧节点x设为0.1，中间层0.5，右侧0.9；y值根据节点数量均匀分布，避免挤到顶部或底部。

2. 手动设置布局边距
   在update_layout中调整margin参数，为左右上下预留足够空间，防止节点被截断：

fig.update_layout(
    margin=dict(l=80, r=80, t=40, b=40)
)

3. 适配Dash应用布局
   在Dash中不要固定图表高度，改用相对高度（如style={"height": "80vh"}）让图表自适应容器，同时确保容器无overflow:hidden限制。若节点数量较多，可适当调高图表高度，避免垂直方向拥挤。

4. 完整示例代码

import plotly.graph_objects as go

# 构建自定义节点位置的垂直Sankey图
fig = go.Figure(data=[go.Sankey(
    orientation="v",
    node=dict(
        pad=15,
        thickness=20,
        line=dict(color="black", width=0.5),
        label=["A1", "A2", "B1", "B2", "C1", "C2"],
        # 自定义位置：x控制左右，y控制上下，避开画布边缘
        x=[0.1, 0.1, 0.5, 0.5, 0.9, 0.9],
        y=[0.7, 0.3, 0.8, 0.2, 0.6, 0.4],
        color="blue"
    ),
    link=dict(
        source=[0, 0, 1, 1],
        target=[2, 3, 2, 3],
        value=[8, 4, 2, 8]
    )
)])

# 调整布局避免截断
fig.update_layout(
    title_text="自定义节点位置的垂直Sankey图",
    margin=dict(l=80, r=80, t=40, b=40),
    height=600  # 根据节点数量灵活调整高度
)

# Dash应用中使用示例
# import dash
# from dash import dcc, html

# app = dash.Dash(__name__)
# app.layout = html.Div([
#     dcc.Graph(figure=fig, style={"height": "80vh"})
# ])

# if __name__ == '__main__':
#     app.run_server(debug=True)

核心原理 #

截断问题本质是自定义节点位置超出了Plotly默认画布范围，通过让节点坐标远离边缘，配合布局边距与高度设置，既能完整显示所有内容，又能保留自定义的节点顺序。

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