Javascript Bokeh:在悬停回调中更改圆的大小

我不熟悉这个优秀的工具，它是用于Python的Bokeh。我使用Python2.7和Bokeh0.10

我试图做一个基本的情节：

• 两个数据系列
• “同时悬停”：具有相同横坐标的两个系列点都显示某些内容
• 将鼠标悬停在上方时，将高亮显示两个选定点：它们变大，另一个点的填充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、

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

#[…]
悬停\初始\数据={
“x”：[]，
‘y’：[]
}
self.hover\u source=ColumnDataSource（data=hover\u init\u data）
#这些是更大的圆圈
c=自绘制圆(
x='x'，
y='y'，
尺寸=10，
填充颜色为黑色，
线条颜色=无，
source=self.hover\u source，
)
c、 选择\字形=圆(
填充颜色为黑色，
)
c、 非选择图示符=圆(
填充颜色为黑色，
)
hover_callback=CustomJS(
args={'source'：self.source，'hover\u source'：self.hover\u source}，
代码=“”
控制台日志（cb_数据）；
var inds=cb_数据[‘指数]]。指数；
控制台日志（inds）；
var s=源数据；
var h=悬停_源数据；
h['x']=[]
h['y']=[]
对于（i=0；i
y:@y

""",
)
# [...]

注意：也检查一下，还有一些有待改进的地方