如何将 plotly 散点图的符号更改为 svg 文件

How can I change the symbol of a plotly scatterplot to a svg file

我正在尝试制作一个图表,其中散点图的点是棋子。现在代码非常简单:

fig = px.scatter(
    x = df_game.x, 
    y = df_game.y,
    color = df_game.color,
    symbol = df_game.icon,
    opacity = 0.1
    )
fig.show()

它returns这张图:

但我想要这样的东西:

我的数据框包含每个回合的每个棋子的 (x, y) 位置,如下所示:

   turn piece color  x  y          icon
0     0     r     w  1  1  icons/wr.svg
1     0     n     w  1  2  icons/wn.svg
2     0     b     w  1  3  icons/wb.svg
3     0     q     w  1  4  icons/wq.svg
4     0     k     w  1  5  icons/wk.svg

我要使用的图标在 icon 栏中。

如何将默认图标更改为我的 .svgs?

我能够将 SVG 图像转换为 PNG 图像并显示它。要安装的库是'cariosvg'。用它把转换后的二进制转为base64的字符串,并设置为图片的引用。

import plotly.express as px
import base64
import cairosvg
import io

x = df['x'].tolist()
y = df['y'].tolist()

chess_images = df['icon'].tolist()

fig = px.scatter(x=x, y=y)

for i,(src,yy) in enumerate(zip(chess_images, y),start=1):
    img = io.BytesIO(cairosvg.svg2png(url='./data/chess/'+src))
    base_img = base64.b64encode(img.read())
    fig.add_layout_image(
        source='data:image/png;base64,{}'.format(base_img.decode()),
        xref="x",
        yref="y",
        x=i,
        y=yy-0.25,
        xanchor="center",
        yanchor="bottom",
        sizex=0.5,
        sizey=0.5,
        layer='above'
    )
    
fig.show()