Plotly中实现连续Domain的X轴重置显示需求

核心思路 #

放弃单轴累加偏移的方式，改用横向子图布局，每个Domain对应一个独立子图并共享Y轴，这样每个子图的X轴自然从0开始，同时通过垂直形状实现Domain间的分隔网格线。

具体实现步骤 #

1. 准备Domain配置与节点分组 #

假设你的Domain长度配置是如下字典：

domain_config = {
    "DomainA": 10,
    "DomainB": 15,
    "DomainC": 8
}

先将NetworkX图中的节点按Domain属性分组：

node_groups = {}
for node in G.nodes(data=True):
    domain = node[1]["domain"]
    if domain not in node_groups:
        node_groups[domain] = []
    node_groups[domain].append(node[0])

2. 重新计算每个Domain内的节点位置 #

每个Domain内的节点X坐标从0开始，按节点数量均匀分布（可自定义规则），Y坐标保留原有逻辑：

import numpy as np

positions = {}
for domain, nodes in node_groups.items():
    domain_length = domain_config[domain]
    # 生成0到domain_length之间的均匀X坐标
    x_coords = np.linspace(0, domain_length, len(nodes))
    # Y坐标示例：按自定义规则生成（这里用随机值演示）
    y_coords = np.random.rand(len(nodes)) * 10
    for i, node in enumerate(nodes):
        positions[node] = (x_coords[i], y_coords[i])

3. 创建横向子图布局 #

用Plotly的make_subplots创建共享Y轴的子图，缩小子图间距以保证视觉连贯：

from plotly.subplots import make_subplots
import plotly.graph_objects as go

domains = list(domain_config.keys())
fig = make_subplots(
    rows=1, cols=len(domains),
    shared_yaxes=True,
    horizontal_spacing=0.01,
    subplot_titles=domains
)

4. 绘制每个Domain的节点与边 #

遍历子图，绘制对应Domain的节点和内部边：

for col, domain in enumerate(domains, 1):
    nodes = node_groups[domain]
    # 绘制节点
    x_nodes = [positions[node][0] for node in nodes]
    y_nodes = [positions[node][1] for node in nodes]
    fig.add_trace(
        go.Scatter(
            x=x_nodes, y=y_nodes,
            mode="markers",
            marker=dict(size=12),
            name=f"{domain} Nodes"
        ),
        row=1, col=col
    )
    # 绘制Domain内部的边
    edges_in_domain = [(u, v) for u, v in G.edges() 
                       if G.nodes[u]["domain"] == domain and G.nodes[v]["domain"] == domain]
    for u, v in edges_in_domain:
        fig.add_trace(
            go.Scatter(
                x=[positions[u][0], positions[v][0]],
                y=[positions[u][1], positions[v][1]],
                mode="lines",
                line=dict(color="gray", width=1),
                showlegend=False
            ),
            row=1, col=col
        )

5. 添加Domain分隔网格线 #

在子图之间添加垂直虚线作为分隔网格线：

# 遍历子图，在相邻Domain间添加分隔线
for col in range(1, len(domains)):
    fig.add_shape(
        type="line",
        x0=domain_config[domains[col-1]], y0=0,
        x1=domain_config[domains[col-1]], y1=10,  # Y范围根据实际需求调整
        xref=f"x{col}", yref="y",
        line=dict(color="lightgray", dash="dash")
    )

6. 调整轴样式与整体布局 #

统一轴样式，隐藏重复Y轴标签，优化整体视觉：

# 设置每个子图的X轴范围
for col, domain in enumerate(domains, 1):
    fig.update_xaxes(
        range=[0, domain_config[domain]],
        title_text="Position",
        row=1, col=col
    )

# 仅保留第一个子图的Y轴标签
fig.update_yaxes(title_text="Y", row=1, col=1)
for col in range(2, len(domains)+1):
    fig.update_yaxes(showticklabels=False, row=1, col=col)

# 调整整体布局
fig.update_layout(
    height=600,
    title_text="NetworkX Graph with Domain-separated X-axis",
    showlegend=False
)

fig.show()

关键补充 #

• 若存在跨Domain的边，需单独处理：通过指定xref和yref参数跨子图绘制连接线条。
• 节点Y坐标可根据业务逻辑（如层级、类别）调整，示例中的随机值仅作演示。
• 子图的horizontal_spacing可按需微调，平衡连贯感与分隔清晰度。

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