Plotly / Dash：如何在气泡图的边缘强制裁剪？

Posted 2023-02-18

【中文标题】Plotly / Dash：如何在气泡图的边缘强制裁剪？

【英文标题】：Plotly / Dash: how to force clipping at the margins of a bubble plot?

【发布时间】：2021-11-30 11:15:01

【问题描述】：

获取以下示例代码：

import plotly.graph_objects as go

fig = go.Figure(data=[go.Scatter(
    x=[1, 2, 3, 4], y=[10, 11, 12, 13],
    text=['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],
    mode='markers',
    marker=dict(
        color=['rgb(93, 164, 214)', 'rgb(255, 144, 14)',  'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
        size=[40, 60, 80, 100],
    )
)])

fig.show()

哪个输出...

将红色气泡大小更改为300，我们得到...

如您所见，x 轴和 y 轴都已重新缩放以适应新的标记大小。

但是，我需要轴保持不变，尽管标记大小增加了，但它应该被剪裁。

这是必要的，因为我的项目需要在另一个绘图上打开和关闭气泡（通过回调），并且当打开气泡时，图表的宽度会发生变化。

任何想法如何完成静态 x 和 y 轴并剪裁标记而不考虑大小？

cliponaxis=True 似乎没有产生预期的结果。

以下是所需剪辑的示例：

【参考方案1】：

这可以通过固定坐标轴范围来实现。

导入 plotly.graph_objects

fig = go.Figure(data=[go.Scatter(
    x=[1, 2, 3, 4], y=[10, 11, 12, 13],
    text=['A<br>size: 40', 'B<br>size: 60', 'C<br>size: 80', 'D<br>size: 100'],
    mode='markers',
    marker=dict(
        color=['rgb(93, 164, 214)', 'rgb(255, 144, 14)', 'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
        size=[40, 60, 80, 500],
    ), cliponaxis=True
)])
fig.update_yaxes(range=[10, 13])
fig.update_xaxes(range=[1, 4])

fig.show()