javascript - Bokeh :根据 slider 更改 map 上的点

Question

我正在尝试扩展我的绘图技能并开始使用 Bokeh。

现在我想做一些事情，在我看来很简单，但我似乎不知道该怎么做。

我有三个限时事件，每个事件都有三分。现在我想在 map 上显示与 slider 选择的时间相对应的不同点。

下面的代码是我到目前为止得到的，但 map 绘图不想更新。

import pandas as pd

from bokeh.io import show, output_notebook    
from bokeh.models import ColumnDataSource, HoverTool, LinearColorMapper    
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.plotting import figure, show
from bokeh.layouts import column, widgetbox
from bokeh.models import CustomJS, Slider

TOOLS = "pan,wheel_zoom,reset,save"

points = pd.DataFrame(data = {'x': [1, 2, 3, 1, 2, 3, 1, 2, 3], 
                              'y': [4, 5, 6, 5, 6, 4, 6, 4, 5],
                             'time': [1, 1, 1, 2, 2, 2, 3, 3, 3]})

visible_points = points[(points['time'] == 1)]

source_visible = ColumnDataSource(data=dict(x=visible_points['x'], y=visible_points['y'], time=visible_points['time']))
source_available = ColumnDataSource(data=dict(x=points['x'], y=points['y'], time=points['time']))

mapplot = figure(title="Slider Test Plot", tools=TOOLS, width=950, height=650)
mapplot.add_tile(CARTODBPOSITRON)
mapplot.circle(x="x", y="y", size=15, fill_color="blue", fill_alpha=0.2, source=source_visible)

slider = Slider(title='Time',
                value=1,
                start=1,
                end=3,
                step=1)

slider.callback = CustomJS(args=dict(source_visible = source_visible, source_available = source_available), code="""
        var time_val = cb_obj.value;
        // Get the data from the data sources
        var point_visible = source_visible.data;
        var point_available = source_available.data;
        // Update the visible data
        for(var i = 0; i < point_available.length; i++) {  
            if (point_available['time'][i] == time_val){
                point_visible.x = point_available['x'][i];
                point_visible.y = point_available['y'][i];
            }   
        }
        source_visible.change.emit();
    """)


layout = column(mapplot, slider)

show(layout)

非常感谢任何反馈!

Answer 1

我认为这是因为您拼写错误point available.length...