散景粘性十字准线

Bokeh sticky crosshair

提问人:nico 提问时间:10/16/2023 更新时间:10/21/2023 访问量:54

问:

散景中,有没有类似于绘图中的尖峰线的工具? 十字准线工具接近于此,但是否有可能使其粘附在绘图上?

蟒蛇 散景

评论


答:

1赞 mosc9575 10/21/2023 #1

我不知道有一个实现的粘性工具,但可以使用和 进行原型设计。bokehHoverToolCustomJS

下面的代码需要一些解释。

  1. 我将范围设置为轴以获取和。默认情况下,这些不存在。p.x_range.startp.y_range.start
  2. 我必须收集每种颜色的渲染器才能将其注册到正确的回调。如果有多种颜色,我必须添加多个 HoverTools
  3. 目前,JS 代码要求数据源的正确名称。这是可以改进的。a

最小示例

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, HoverTool

source = ColumnDataSource(dict(a=[1,2,3,4,5], x=[1,2,3,4,5]))

p = figure(x_range=(0.9,5.1), y_range=(0.9,5.1))

p.line('a', 'x', source=source, color='red')
cr = p.circle('a', 'x', source=source, color='red')

extra_source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})
sb = p.segment(
    x0='x0',
    y0='y0',
    x1='x1',
    y1='y1',
    color='red',
    alpha=0.6,
    line_width=2,
    line_dash="dashed",
    source=extra_source
)

# add a hover tool that sets the link data for a hovered circle
code = """
const data = {'x0': [],'y0': [],'x1': [],'y1': []}
const indices = cb_data.index.indices
console.log(cb_data)
for (let i of indices) {
    // horizontal dashed line
    data['x0'].push(p.x_range.start)
    data['y0'].push(circle.data.a[i])
    data['x1'].push(circle.data.x[i])
    data['y1'].push(circle.data.a[i])

    // vertical dashed line
    data['x0'].push(circle.data.x[i])
    data['y0'].push(p.y_range.start)
    data['x1'].push(circle.data.x[i])
    data['y1'].push(circle.data.a[i])
}
segment.data = data
"""

callback = CustomJS(args={'circle': cr.data_source, 'segment': sb.data_source, 'p':p}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(p)

输出

sticky tool