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坐标。这段代码在浏览器（F12）的控制台中打印x和y坐标。

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)

如何在散景中的水龙头上获取x坐标和y坐标

1 个答案: