bqplot 图像的 on_click/hover 事件

Question

我正在尝试使用带有图像芯片和散点图的 ipywidgets 和 bqplot 构建交互式仪表板。 散点图中的每个点都对应一个图像芯片，因此我希望（1）在将鼠标悬停在相应图像上时“突出显示”该点，以及（2）在单击时更改该点的颜色并存储 x 值一个图像。

尽管图像标记存在on_click和on_hover ，但我没有设法使它们起作用。 请参阅下面我到目前为止所拥有的

import io
import datetime

import numpy as np
import ipywidgets as ipw
from PIL import Image as PImage
import bqplot as bqp
import pandas as pd

#########
## Generate list of random images, with associated x and y values
#########
def random_image():
    """Generate a random ipywidget Image
    """
    arr = np.random.randint(255, size=(300, 300, 3), dtype=np.uint8)
    img = PImage.fromarray(arr)
    with io.BytesIO() as fileobj:
        img.save(fileobj, 'PNG')
        img_b = fileobj.getvalue()
    img_w = ipw.Image(value=img_b)
    return img_w


origin = datetime.datetime(2020, 1, 1)
img_list = [{'image': random_image(),
             'x': origin + datetime.timedelta(idx),
             'y': np.sin(idx)} for idx in range(10)]

###########
## Create scatter plot
###########
scale_y = bqp.LinearScale()
scale_x = bqp.DateScale()
scatter = bqp.Scatter(x=pd.Series([item['x'] for item in img_list]),
                      y=[item['y'] for item in img_list],
                      scales={'x': scale_x, 'y': scale_y})
axis_x = bqp.Axis(scale=scale_x)
axis_y = bqp.Axis(scale=scale_y, orientation='vertical')

scat_fig = bqp.Figure(marks=[scatter],
                      layout={'width':'1500px', 'height':'300px'},
                      axes=[axis_x, axis_y])


#########
## Create grid (or row) of image chips
#########
layout = ipw.Layout(width='150px', height='200px')
img_fig_list = []
for item in img_list:
    image = bqp.Image(image=item['image'])
    fig = bqp.Figure(
#         title=item['x'].strftime('%Y-%m-%d'),
        marks=[image], padding_x=0, padding_y=0, min_aspect_ratio=1, max_aspect_ratio=1,
        fig_margin = dict(top=10, bottom=10, left=10, right=10),
        layout=layout)
    #image.on_click(click_fn)
    img_fig_list.append(fig)

############
## Combine scatter and image chips and display them
############
img_row = ipw.HBox(img_fig_list)
ipw.VBox([scat_fig, img_row])

额外的问题：是否可以在同一个图中并排放置多个图像？

Answer 1

on_hover() 将起作用，只需定义一个回调 function 以便在 hover 时调用它。 尝试使用 on_element_click() 而不是 on_click()