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

Question

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

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

它返回这个图：

但我想要这样的东西：

我的数据框包含每个回合中每个部分的 (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在列icon 。

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

Answer 1

我能够将 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()