散景:在悬停回调中改变圆的大小

Question

我是Python Bokeh这个极好的工具的新手。我使用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"开始失效:悬停太粗，总是选择几个点。我试着混合尺寸=20和半径=2，但它也没有工作。
• 我没有设法添加一个图例(但我可以自己制作)。

除了这些问题，我对散景非常满意!非常感谢开发这个图书馆& &;帮助像我这样的新手。

t .

Answer 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>
    """,
)
# [...]

注释:检查这个老问题，还有几个有待改进的