散景：根据滑块在地图上更改点

Question

我正在努力扩展我的绘图技巧并开始玩Bokeh。

现在我想做点什么，在我脑海中看起来很简单，但我似乎无法弄明白该怎么做。

我有三个定时事件，每个都有三个点。现在我想在地图上显示与滑块选择的时间对应的不同点。

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

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.lenght ......

Answer 2

几个小时后，我终于设法修复了滑块。以下回调使其工作：

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;

    point_visible.x = []
    point_visible.y = []

    // Update the visible data
    for(var i = 0; i < point_available.x.length; i++) {  
        if (point_available.time[i] == time_val){
            point_visible.x.push(point_available.x[i]);
            point_visible.y.push(point_available.y[i]);
        }   
    }
    source_visible.change.emit();
""")