2017-02-22 28 views
0

我想在Bokeh中構建一個交互式圖形。到目前爲止,假設我有如下的熱圖。用簡單的英文:如何根據Bokeh中的RangeSlider選擇數據點?

  • 我正在使用rect繪製生成熱圖的矩形。
  • 我正在添加一個RangeSlider。
  • 我附加一個js_callback對範圍的變化。
  • 在自定義回調中,我可以檢索範圍滑塊的開始和結束範圍。

我不確定的是如何選擇任何東西。 This link(cb_obj.selected ['1d']。indices)顯示一個檢索所有選定的數據點。但是,如何做相反的事情呢?

換句話說:

如何選擇那年秋天值A和B之間的矩形?

下面是我已經發現的事情的代碼。

from math import pi 
from bokeh.io import show 
from bokeh.models import ColumnDataSource, HoverTool, 
LinearColorMapper, CategoricalColorMapper, ColorBar, LogColorMapper, 
LogTicker 
from bokeh.plotting import figure 
from bokeh.models.callbacks import CustomJS 

col = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] 
row = ['A', 'B', 'C' , 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
'N', 'O', 'P'] 

mapper = LogColorMapper(palette="Viridis256", low=min_value, 
high=max_value) 
source = ColumnDataSource(data = dict (
     row = test['plate_row'], 
    col = test['plate_col'], 
    values = test['Melt Temp'])) 

TOOLS = "reset, tap,box_select, hover,save,pan,box_zoom,wheel_zoom" 

p = figure(title="Plate Heatmap", x_range = (0.0,25.0), y_range = 
list(reversed(row)), 
     x_axis_location="above", plot_width=650, plot_height=400, 
     tools=TOOLS) 

r1 = p.rect(x="col", y="row", width=1, height=1, 
     source=source, 
     fill_color={'field': 'values', 'transform': mapper}, 
     line_color=None) 

callback = CustomJS(args=dict(source=source), code=""" 
    var data = source.data; 
    var inds = cb_obj.selected['1d'].indices; 
    var lower_bound = cb_obj.start; 
    var upper_boudn = cb_obj.end; 
    // WHAT DO I DO NEXT? 
    source.trigger('change'); 
""") 

range_slider = widgetbox(RangeSlider(start=min_value, end=max_value, 
range= (min_value, max_value), step=0.1, title="Hit Threshold")) 
range_slider.js_on_change('range', callback) 

color_bar = ColorBar(color_mapper=mapper, ticker=LogTicker(), 
       label_standoff=12, border_line_color=None, location= 
(0,0)) 
p.add_layout(color_bar, 'left') 
layout = column(range_slider, p) 
show(layout)  # show the plot 

回答

0

雖然我無法找到一種方法來設置選擇或不選擇,我找到了一種方法來實現相同的結果。這可能是如何使用Bokeh服務器的主要例子。要做到這一點同樣的效果,需要做到以下幾點:

  1. 與Python的更新 功能更換JSCustom回調函數。 udpate函數包含代碼來更新 ColumnDataSource。
  2. 簡單地使用附加到滑塊的on_change事件 替換js_on_change事件。
  3. 將上面的代碼與 「main.py」中的更新函數一起放在以該應用程序命名的文件夾內。
  4. 以「散景服務 - 顯示INSERTAPP_NAME」啓動散景服務器。

該信息可以找到here,它代表了部署交互式可視化的最簡單方法。您的情況可能需要更復雜的部署方案。我也在研究這個問題,但這將是另一個問題。

相關問題