如何在散景中点击获取 x 坐标和 y 坐标

Question

我遇到了如何使用 Tap 工具在散景图中显示 x 和 y 坐标的问题

我尝试了以下代码。现在我想为点击工具写一个回调，我该怎么做。如何在单击正方形时显示 x 和 y 坐标

  from bokeh.models import ColumnDataSource, OpenURL, TapTool
  from bokeh.plotting import figure, output_file, show

  output_file("openurl.html")

  p = figure(plot_width=400, plot_height=400,
               tools="tap", title="Click the Dots")

  source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[2, 5, 8, 2, 
                         7]))


  p.square('x', 'y', color='green', size=20, source=source)

  taptool = p.select(type=TapTool)

  show(p)

Answer 1

您可以通过编写在选择更改时调用的回调来获取点击时的 x 和 y 坐标。当前选定字形的索引可以在 source.selected.indices 中找到。这些索引可用于从 source.data 中获取 x 和 y 坐标。这段代码在浏览器的控制台中打印 x 和 y 坐标 (F12)。

from bokeh.models import ColumnDataSource, TapTool, CustomJS
from bokeh.plotting import figure, output_file, show

output_file("openurl.html")

p = figure(plot_width=400, plot_height=400,
             tools="tap", title="Click the Dots")

source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[2, 5, 8, 2, 7]))

p.square('x', 'y', color='green', size=20, source=source)

callback = CustomJS(args=dict(source=source), code="""
    var selectedIndex = source.selected.indices;
    for (var i = 0; i < selectedIndex.length; i++) {
        console.log("Index:", selectedIndex[i]);
        console.log("x:", source.data['x'][selectedIndex[i]]);
        console.log("y:", source.data['y'][selectedIndex[i]]);
    }
""")

taptool = p.select(type=TapTool)
source.selected.js_on_change('indices', callback)
show(p)