如何在情节中为直线制作动画？答案

【问题标题】：How to animate a straight in plotly?如何在情节中为直线制作动画？
【发布时间】：2021-02-24 11:34:58
【问题描述】：

我想可视化将直线拟合到 2D 数据集的过程。对于每个时期，我都有起点和直线终点的 x 和 y 坐标。下面是带有线条的数据集的示例图像 (matplotlib)。

我看到 plotly 提供了一个动画线条的选项。

上面的情节是用类似这样的代码创建的：

# this should animate my line
fig_data = px.line(df, x="xxx", y="yyy", animation_frame="epoch", animation_group="name", title="fitted line")

# responsible for the red scatter plot points:
fig_data.add_traces(
    go.Scatter(
        x=xxx, 
        y=yyy, mode='markers', name='House in Dataset')
)

数据框如下所示：

epoch       xxx                                       yyy      name
0       0  [0.5, 4]   [1.4451884285714285, 4.730202428571428]  example
1       1  [0.5, 4]  [1.3944818842653062, 4.4811159469795925]  example
2       2  [0.5, 4]   [1.3475661354539474, 4.251154573663417]  example
3       3  [0.5, 4]    [1.3041510122346094, 4.03885377143571]  example

所以应该在 epoch 0 中显示的行从 (0.5,1.44) 开始到 (4,4.73)。但是，没有渲染线。我应该改变什么？

【问题讨论】：

datapoints_x 和 datapoint_y 来自哪里？
我的错。现在修好了。

标签： python plotly plotly-dash

【解决方案1】：

我认为问题在于df 中xxx 和yyy 的格式，因为它们现在是嵌套数组，px.line 似乎没有正确引用它们。

您可以使用pd.Series.explode 来“展平”此数据框（例如here），然后将其用作px.line 的输入。有关熊猫爆炸的更多信息，请参阅here。

使用xdf=df.set_index('epoch').apply(pd.Series.explode).reset_index() 将产生：

epoch   xxx      yyy       name
0   0   0.5 1.445188    example
1   0   4   4.730202    example
2   1   0.5 1.394482    example
3   1   4   4.481116    example
4   2   0.5 1.347566    example
5   2   4   4.251155    example
6   3   0.5 1.304151    example
7   3   4   4.038854    example

使用 cmets 的完整示例：

import plotly.express as px
import pandas as pd

data = {'epoch': [0,1,2,3], 
        'xxx': [[0.5, 4], [0.5, 4], [0.5, 4], [0.5, 4]],
        'yyy': [[1.4451884285714285, 4.7302024285714280], 
                [1.3944818842653062, 4.4811159469795925], 
                [1.3475661354539474, 4.2511545736634170], 
                [1.3041510122346094, 4.0388537714357100]],
       'name':['example','example','example','example']}  
df = pd.DataFrame.from_dict(data)

# now exploding `df`
xdf=df.set_index('epoch').apply(pd.Series.explode).reset_index()

# now plotting using xdf as dataframe input
px.line(xdf, x="xxx", y="yyy", animation_frame="epoch", color="name", title="fitted line")

注意：散点图的原始数据似乎丢失了，但我认为这不是问题所在。

【讨论】：