选择下拉选项后，如何在图上 "change.emit" 或 "trigger change"？

Question

知道三重 '?' 所在的位置吗？

import pandas as pd
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider, Select
import bokeh.plotting as bp
from bokeh.plotting import Figure, output_file, show
from bokeh.models import HoverTool, DatetimeTickFormatter

# Create an output file
bp.output_file('columnDataSource.html')

# Create your plot as a bokeh.figure object
myPlot = bp.figure(height = 600,
               width = 800,
               y_range=(0,3))

x_values = [1, 2, 3, 4, 5]
y_values = [1, 2, 3, 4, 5]

myPlot.line(x = x_values, y= y_values, line_width=2)

callback = CustomJS(args={
    'source1': {'x': [1,2,3,4], 'y':[1,1,1,1]},
    'source2': {'x': [0,0,0,0], 'y':[2,2,2,2]},
    'source3': {'x': [1,2,3,4], 'y':[1,1,1,1]}}, 

    code="""

    var data1 = source1;
    var data2 = source2;
    var data3 = source3;

    var f = cb_obj.value;

    if(f == 'A'){
    console.log("A selected from dropdown.");
    data1.x = data1.x;
    data1.y = data1.y;
    }

    else if(f == 'B'){
    // Substitute all old data1 values in with data2 values
    console.log("B selected from dropdown.");
    data1.x = data2.x;
    data1.y = data2.y;
    }

    else{
    console.log("C selected.");
    // Substitute all old data1 values in with data3 values
    data1.x = data3.x;
    data1.y = data3.y;
    }

    // Problematic line!
    ???.change.emit();
""")


select = Select(title='Choose', value='A', options=['A','B','C'])
select.js_on_change('value', callback)

layout = column(select, myPlot)

show(layout) # et voilà.

我希望我的 x 和 y 值能够根据我的散景图进行更改和绘制。

目前没有任何变化，因为我不知道应该调用哪个对象的 "trigger" 函数。请帮助，我是 Bokeh 的新手。

Answer 1

如果您通过引用更新了数据源字段，则可以 ColumnDataSource.change.emit()当您仅更新 x 或仅更新 y:

ColumnDataSource.data['x'] = [4, 3, 2, 1]
ColumnDataSource.change.emit()

当你更新它们时，你会做：

ColumnDataSource.data = new_data

其中 new_data 是一个新的 json 对象，如 {'x': [1], 'y':[2]}。这样做的原因是，当现有对象被新对象替换时，JS 可以自动检测更改，但它无法通过引用检测更改，因此在这些情况下，您需要显式调用：ColumnDataSource.change.emit() 来更新 BokehJS 模型。

这是您修改后的代码：

from bokeh.models import CustomJS, ColumnDataSource, Select, Column
from bokeh.plotting import figure, show

myPlot = figure(y_range = (0, 4))

data =  {'A': {'x': [1, 2, 3, 4], 'y':[1, 1, 1, 1]},
         'B': {'x': [1, 2, 3, 4], 'y':[2, 2, 2, 2]},
         'C': {'x': [1, 2, 3, 4], 'y':[3, 3, 3, 3]} }

source = ColumnDataSource(data['A'])
myPlot.line('x', 'y', line_width = 2, source = source)

callback = CustomJS(args = {'source': source, 'data': data},
code = """source.data = data[cb_obj.value]; """)

select = Select(title = 'Choose', value = 'A', options = ['A', 'B', 'C'])
select.js_on_change('value', callback)

layout = Column(select, myPlot)
show(layout)

选择下拉选项后，如何在图上 "change.emit" 或 "trigger change"？

Once a dropdown option is selected, how do I "change.emit" or "trigger change" on the plot?

bokeh

bokehjs