Bokeh DataTableセルコンテンツをクリックするには？

Question

Bokeh DataTableセルの値をクリックする方法を知っていますか？

私が使用している場合：

data = dict(
items=bokehItems, 
    values0=bokehValues0, 
    values1=bokehValues1, 
    values2=bokehValues2 
) 

source = ColumnDataSource(data) 

columns = [ 
    TableColumn(field="items", title="Item"), 
    TableColumn(field="values0", title="Value"), 
    TableColumn(field="values1", title="Cluster"), 
    TableColumn(field="values2", title="Interaction"), 
] 



data_table_worst_cases = DataTable(source=source, columns=columns, height=280, 
            row_headers=False, fit_columns=True) 


source.callback = CustomJS(args=dict(source=source), code=""" 
    console.log(cb_obj.get('data')); 
""") 

私は常に完全なテーブルの内容ではなく、特定のセルを取得し、テーブルに私をクリックしてください。

Answer 1

あなたはコード全体を投稿していないので、直接回答するのは難しいです。 しかし、以下の例に基づいて、問題を解決する方法を理解できるはずです。

from random import randint 
import bokeh 
import bokeh.plotting 
from datetime import date 

data = dict(dates = [date(2014, 3, i + 1) for i in range(10)], 
      downloads = [randint(0, 100) for i in range(10)], 
      identities = ['id_' + str(x) for x in range(10)]) 

source = bokeh.models.ColumnDataSource(data) 

columns = [bokeh.models.TableColumn(field = "dates", title = "Date", 
      formatter = bokeh.models.DateFormatter()), 
      bokeh.models.TableColumn(field = "downloads", title = "Downloads")] 

source.callback = bokeh.models.CustomJS(args = dict(source = source), code = """ 
     console.log('Selected rows:'); 
     data = source.data 
     var indices = source.selected["1d"].indices; 

     for (var i = 0; i<indices.length; i++) 
     { 
      console.log(i+":"+indices[i]); 
      console.log(data['dates'][source.selected["1d"].indices[0]]); 
      console.log(data['downloads'][source.selected["1d"].indices[0]]); 
      console.log(data['identities'][source.selected["1d"].indices[0]]); 
     } 
     """) 
data_table = bokeh.models.DataTable(source = source, columns = columns, width = 400, height = 280, editable = True) 

bokeh.io.show(data_table) 

Answer 2

やPythonのコールバックを使用して別のバージョン：

from random import randint 
from datetime import date 
from bokeh.models import ColumnDataSource, TableColumn, DateFormatter, DataTable 
from bokeh.layouts import column 
from bokeh.models.widgets import TextInput 
from bokeh.client import push_session 
from bokeh.plotting import curdoc 

data = dict(dates = [date(2014, 3, i + 1) for i in range(10)], 
      downloads = [randint(0, 100) for i in range(10)], 
      identities = ['id_' + str(x) for x in range(10)]) 

source = ColumnDataSource(data) 

columns = [TableColumn(field = "dates", title = "Date", 
      formatter = DateFormatter()), 
      TableColumn(field = "downloads", title = "Downloads")] 

data_table = DataTable(source = source, columns = columns, width = 400, height = 280, editable = True) 
table_row = TextInput(value = '', title = "Row index:") 
table_cell_column_1 = TextInput(value = '', title = "Date:") 
table_cell_column_2 = TextInput(value = '', title = "Downloads:") 

def function_source(attr, old, new): 
    try: 
     selected_index = source.selected["1d"]["indices"][0] 
     table_row.value = str(selected_index) 
     table_cell_column_1.value = str(source.data["dates"][selected_index]) 
     table_cell_column_2.value = str(source.data["downloads"][selected_index]) 
    except IndexError: 
     pass 

source.on_change('selected', function_source) 

session = push_session(document = curdoc()) 
curdoc().add_root(column(data_table, table_row, table_cell_column_1, table_cell_column_2)) 
session.show() 
session.loop_until_closed() 

Answer 3

そして、ここではあなたもクリックされている表の列を区別することができる方法である。

from random import randint 
from datetime import date 
from bokeh.models import ColumnDataSource, TableColumn, DateFormatter, DataTable, CustomJS 
from bokeh.layouts import column 
from bokeh.models.widgets import TextInput 
from bokeh.client import push_session 
from bokeh.plotting import curdoc 

selected_source = ColumnDataSource({'column': [-1], 'row': [-1]}) 
source = ColumnDataSource(dict(dates = [date(2014, 3, i + 1) for i in range(10)], downloads = [randint(0, 100) for i in range(10)])) 

columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()), TableColumn(field = "downloads", title = "Downloads")] 
data_table = DataTable(source = source, columns = columns, width = 400, height = 280, editable = True) 

text_row = TextInput(value = None, title = "Row index:") 
text_column = TextInput(value = None, title = "Column Index:") 
text_date = TextInput(value = None, title = "Date:") 
text_downloads = TextInput(value = None, title = "Downloads:") 

def table_click(row, column): 
    print ('Row %s Column %s clicked' % (row, column)) 

source_code = """ 
var grid = document.getElementsByClassName('grid-canvas')[0].children; 
var row = ''; 
var col = ''; 

for (var i=0,max=grid.length;i<max;i++) 
{ 
    if (grid[i].outerHTML.includes('active')) 
    { 
     row=i; 
     for (var j = 0, jmax = grid[i].children.length; j < jmax; j++) 
     { 
      if(grid[i].children[j].outerHTML.includes('active')) 
       { col = j } 
     } 
    } 
} 

new_data = {'column': [col], 'row': [row]}; 
source.data = new_data 
""" 

source.callback = CustomJS(args = dict(source = selected_source), code = source_code) 

def function_source(attr, old, new): 
    try: 
     selected_index = source.selected["1d"]["indices"][0] 
     text_row.value = str(selected_source.data["row"][0]) 
     text_date.value = str(source.data["dates"][selected_index]) 
     text_downloads.value = str(source.data["downloads"][selected_index]) 
     text_column.value = str(selected_source.data["column"][0]) 
     source.selected.update({"0d":{"indices": []}, "1d":{"indices":[]}, "2d":{"indices":[]}}) 
     table_click(selected_source.data["row"][0], selected_source.data["column"][0]) 
    except IndexError: 
     pass 

source.on_change('selected', function_source) 

session = push_session(document = curdoc()) 
curdoc().add_root(column(data_table, text_row, text_column, text_date, text_downloads)) 
session.show() 
session.loop_until_closed()