散景:用于鼠标移动或单击的CustomJS回调 [英] Bokeh: CustomJS Callback for Mouse Move or Click

问题描述

我想根据当前鼠标位置更新绘图数据.

我想要的是类似解决方案

您可以像下面的代码示例一样使用HoverTool和CustomJS.本示例绘制了一条从光标位置到(1,1)点的线.打开JavaScript控制台时，您可以在移动鼠标时看到x和y的值.

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

s = ColumnDataSource(data = dict(x=[0,1],y=[0,1])) #points of the line
callback = CustomJS(args=dict(s=s), code="""
        var geometry = cb_data['geometry'];
        var x_data = geometry.x; // current mouse x position in plot coordinates
        var y_data = geometry.y; // current mouse y position in plot coordinates
        console.log("(x,y)=" + x_data+","+y_data); //monitors values in Javascript console
        var x = s.get('data')['x'];
        var y = s.get('data')['y'];
        x[0] = x_data;
        y[0] = y_data;
        s.trigger('change');
    """)
hover_tool = HoverTool(callback=callback)
p = figure(x_range=(0,1), y_range=(0,1), tools= [hover_tool,
                        "crosshair,box_zoom,wheel_zoom,pan,reset"])
p.line(x='x',y='y',source=s)
show(p)

Javascript控制台的输出:

...
VM615:7 (x,y)=0.37494791666666666,0.37447916666666664
VM615:7 (x,y)=0.37494791666666666,0.37114583333333334
VM615:7 (x,y)=0.37161458333333336,0.37114583333333334
VM615:7 (x,y)=0.38828125,0.37114583333333334
VM615:7 (x,y)=0.43161458333333336,0.3878125
VM615:7 (x,y)=0.7216145833333333,0.4878125
...

I want to update my plot data based on the current mouse position.

What I'm aiming for is something like the interactive power function plot, but instead of taking the exponent from a slider, take the exponent to be the current x-value of the mouse cursor (in plot coordinate space, not display coordinates).

If it's not possible to get an onMouseMove callback, onClick would also be ok. However, I don't want to have to click a specific graph (then I could use TapTool), but tapping anywhere in the plot should suffice.

解决方案

You can use HoverTool and CustomJS as in the code example below. This example plots a line from the cursor position to the (1,1) point. When opening a JavaScript Console, you can see the values of x and y as you move the mouse.

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

s = ColumnDataSource(data = dict(x=[0,1],y=[0,1])) #points of the line
callback = CustomJS(args=dict(s=s), code="""
        var geometry = cb_data['geometry'];
        var x_data = geometry.x; // current mouse x position in plot coordinates
        var y_data = geometry.y; // current mouse y position in plot coordinates
        console.log("(x,y)=" + x_data+","+y_data); //monitors values in Javascript console
        var x = s.get('data')['x'];
        var y = s.get('data')['y'];
        x[0] = x_data;
        y[0] = y_data;
        s.trigger('change');
    """)
hover_tool = HoverTool(callback=callback)
p = figure(x_range=(0,1), y_range=(0,1), tools= [hover_tool,
                        "crosshair,box_zoom,wheel_zoom,pan,reset"])
p.line(x='x',y='y',source=s)
show(p)

Output of the Javascript console:

...
VM615:7 (x,y)=0.37494791666666666,0.37447916666666664
VM615:7 (x,y)=0.37494791666666666,0.37114583333333334
VM615:7 (x,y)=0.37161458333333336,0.37114583333333334
VM615:7 (x,y)=0.38828125,0.37114583333333334
VM615:7 (x,y)=0.43161458333333336,0.3878125
VM615:7 (x,y)=0.7216145833333333,0.4878125
...

这篇关于散景:用于鼠标移动或单击的CustomJS回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！