散景：在悬停回调中更改圆圈大小

Posted 2023-05-08

【中文标题】散景：在悬停回调中更改圆圈大小

【英文标题】：Bokeh: changing circle size in hover callback

【发布时间】：2016-01-04 12:09:08

【问题描述】：

我不熟悉 Bokeh for Python 这个出色的工具。我使用 Python 2.7 和 Bokeh 0.10。

我正在尝试做一个基本的情节：

两个数据系列 '同时悬停'：具有相同横坐标的两个系列点都在显示一些东西 将鼠标悬停在上方时，两个选定点会突出显示：它们变大，另一个将 fill_alpha 设为 0.2

我尝试了很多东西，结果好坏参半。

import numpy as np
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, Circle, HoverTool, CustomJS

output_file("callback.html")

#data definition
x = np.arange(100)
y = 20 + 10 * np.random.uniform(size = 100)
y2 = 20 + 10 * np.random.uniform(size = 100)

label1 = np.arange(100)


#sources creation
source = ColumnDataSource(
        data=dict(
            x=x,
            y=y,
            label  = label1
        )
    )

source2 = ColumnDataSource(
        data=dict(
            x=x,
            y=y2,
            label  = label1
        )
    )

hover = HoverTool(
        tooltips=[

            ("label", "@label")
        ]
    )


p = figure(plot_width=800, plot_height=800, tools=[hover,'box_zoom,resize,wheel_zoom,reset'],
           title="Mouse over the dots")


circle1 = Circle(x='x', y='y', radius=20, fill_color='red',fill_alpha = 1)
circle2 = Circle(x='x', y='y2', radius=20,fill_color = 'green',fill_alpha = 1)
circle1_grey = Circle(x='x', y='y', radius=2, fill_color='red',fill_alpha = 0.2)
circle2_grey = Circle(x='x', y='y', radius=2, fill_color='green',fill_alpha = 0.2)


cr = p.add_glyph(source, circle1_grey, selection_glyph=circle1, nonselection_glyph=circle1_grey)
cr2 = p.add_glyph(source2, circle2_grey, selection_glyph=circle2, nonselection_glyph=circle2_grey)


callback = CustomJS(args='sourceA': source, 'sourceB' : source2, code="""
        var dataA = sourceA.get('data');
        var dataB = sourceB.get('data');
        var f = cb_data['index'];


        sourceA.set('selected', f);
        sourceB.set('selected', f);
        sourceA.trigger('change');
        sourceB.trigger('change');
    """)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr,cr2], mode='vline'))


show(p)

有了这个解决方案，有几点让我不开心：

选中时圆圈不会变大。我尝试在回调中这样做，但我也没有做对。 缩放时，点变得太大并开始重叠。为了解决这个问题，使用 'size = 20' 可以工作，但随后 'mode=vline' 开始失败：悬停太粗并且总是选择几个点。我尝试将 size=20 和 radius = 2 混合，但也没有用。 我没有设法添加图例（但我可以自己制作）。

除了这些问题，我对 Bokeh 非常满意！非常感谢开发这个库并帮助像我这样的菜鸟。

t.

【参考方案1】：

现在的解决方案是这样的。但我认为

# [...]

hover_init_data = 
    'x': [],
    'y': []

self.hover_source = ColumnDataSource(data=hover_init_data)

# these are the bigger circles
c = self.plot.circle(
    x='x',
    y='y',
    size=10,
    fill_color='black',
    line_color=None,
    source=self.hover_source,
)
c.selection_glyph = Circle(
    fill_color='black',
)
c.nonselection_glyph = Circle(
    fill_color='black',
)

hover_callback = CustomJS(
    args='source': self.source, 'hover_source' : self.hover_source, 
    code='''
        console.log(cb_data);
        var inds = cb_data['index'].indices;
        console.log(inds);
        var s = source.data;
        var h = hover_source.data;

        h['x'] = []
        h['y'] = []
        for (i = 0; i < inds.length; i++)  // You can limit the number of overlapped points here
            h['x'].push(s['x'][inds[i]])
            h['y'].push(s['y'][inds[i]])
        
        hover_source.change.emit();
    ''',
)

hover = HoverTool(
    callback=hover_callback,
    renderers=[main_circle_renderer],   // if there are more than one renderer the callback is not triggered
    tooltips="""
        <b>x: </b> @x <br>
        <b>y: </b> @y <br>
    """,
)

# [...]

注意：请检查此old issue，还有一些待改进