javascript - Bokeh:双击圆圈时的JS回调

Question

我在单击圆圈时在网页上显示一些信息，现在我想在双击时添加一些交互:打开一个新选项卡加载一个 url 希望使用 OpenURL .

这是我当前的代码:

p = bokeh.plotting.figure(tools=TOOLS)
cr = p.circle(y_true[:, 1], y_pred[:, 1], size=5, source=source)

taptool = p.select(type=bokeh.models.TapTool)
taptool.callback = bokeh.models.CustomJS(args={'circle': cr.data_source},
        code=self.show_data_callback())

show_data_callback 只返回一个带有 JS 代码的字符串，显示有关被点击的圆圈的信息。

Answer 1

遵循 here 中的教程在 bokeh chat 的帮助下，我创建了一个扩展程序，其中包含用于单击和双击操作的不同操作:

from bokeh.core.properties import Instance
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, TapTool, CustomJS, OpenURL
from bokeh.plotting import figure

output_file('tool.html')

JS_CODE = """
p = require "core/properties"
TapTool = require "models/tools/gestures/tap_tool"

class NewTapToolView extends TapTool.View

  _get_canvas_position: (e) ->
    canvas = @plot_view.canvas
    vx = canvas.sx_to_vx(e.bokeh.sx)
    vy = canvas.sy_to_vy(e.bokeh.sy)
    return [vx, vy]

  _tap: (e) ->
    console.log('click')
    [vx, vy] = @_get_canvas_position(e)
    append = e.srcEvent.shiftKey ? false
    @_select(vx, vy, true, append)

  _doubletap: (e) ->
    console.log('double click')
    [vx, vy] = @_get_canvas_position(e)
    append = false
    @_select(vx, vy, true, append)

class NewTapTool extends TapTool.Model
  default_view: NewTapToolView
  type: "NewTapTool"

  tool_name: "New Tap Tool"

  @define { source: [ p.Instance ] }

module.exports =
  Model: NewTapTool
  View: NewTapToolView
"""


class NewTapTool(TapTool):
    __implementation__ = JS_CODE
    source = Instance(ColumnDataSource)


x = y = [i for i in range(10)]
source = ColumnDataSource(data=dict(x=x, y=y))

plot = figure(x_range=(0, 10), y_range=(0, 10), tools=[NewTapTool(source=source)])
plot.title.text = "Double click on a dot to test"
plot.circle('x', 'y', source=source, size=10)

newtaptool = plot.select(type=TapTool)
newtaptool.callback = OpenURL(url="https://en.wikipedia.org/")

show(plot)

该示例仅在双击圆圈时打开维基百科。在 _tap 函数中，可以自定义单击的行为。希望对您有所帮助!