2017-07-03 28 views
0

私は通常の散布図の多くのドットの1つをユーザーがクリックして、そのドットに関する詳細を得るダッシュボード上で作業しています。各ドットはデータのグループを表し、クリックすると、関連するデータ・グループがリストされている表をユーザーが見ることができます。Bokehプロット上のクリック可能なドット

テーブルがプロットのすぐ隣に表示され、新しいドット(または複数のドット)が選択されるたびに行が変更されます。

この表にフィルタを追加する必要があるため、対話型である必要があります。プロットはフィルタリング中に変更されず、テーブル内の関連データのみが変更されます。

私は私が達成したい正反対を達成し、次の例で、見てきました:私は逆転する試みでボタンのコールバック内ソース1ソース2を交換しようとした

from bokeh.plotting import Figure, output_file, show 
from bokeh.models import CustomJS 
from bokeh.models.sources import ColumnDataSource 
from bokeh.layouts import column, row 
from bokeh.models.widgets import DataTable, TableColumn, Toggle 

from random import randint 
import pandas as pd 

output_file("data_table_subset_example.html") 

data = dict(
     x=[randint(0, 100) for i in range(10)], 
     y=[randint(0, 100) for i in range(10)], 
     z=['some other data'] * 10 
    ) 
df = pd.DataFrame(data) 
#filtering dataframes with pandas keeps the index numbers consistent 
filtered_df = df[df.x < 80] 

#Creating CDSs from these dataframes gives you a column with indexes 
source1 = ColumnDataSource(df) # FIGURE 
source2 = ColumnDataSource(filtered_df) # TABLE - FILTERED 

fig1 = Figure(plot_width=200, plot_height=200) 
fig1.circle(x='x', y='y', source=source1) 

columns = [ 
     TableColumn(field="x", title="X"), 
     TableColumn(field="z", title="Text"), 
    ] 
data_table = DataTable(source=source2, columns=columns, width=400, height=280) 

button = Toggle(label="Select") 
button.callback = CustomJS(args=dict(source1=source1, source2=source2), code=""" 
     var inds_in_source2 = source2.get('selected')['1d'].indices; 
     var d = source2.get('data'); 
     var inds = [] 

     if (inds_in_source2.length == 0) { return; } 

     for (i = 0; i < inds_in_source2.length; i++) { 
      inds.push(d['index'][i]) 
     } 

     source1.get('selected')['1d'].indices = inds 
     source1.trigger('change'); 
    """) 

show(column(fig1, data_table, button)) 

をフィルタリング(図の点を選択してデータテーブルをフィルタリングする)。しかし、データテーブルはまったくフィルタリングされず、代わりにデータポイントに対応する行が単に選択されます。 ではない行の残りの部分をどのようにフィルタリングするか考えてみると、プロットでが選択されていますか?

+0

答えはほとんど間違いありませんが、私はその質問が広すぎると思います。たとえば、スタンドアロンの(サーバーではない)Bokeh文書を使用するかどうか、またはBokehサーバーアプリケーションを使用するかどうかは不明です(多分あなた自身はまだわからないかもしれません)。プロジェクトのメーリングリストはもっと良いリソースです:https://groups.google.com/a/continuum.io/forum/#!forum/bokeh – bigreddot

+0

@bigreddot私は例を加えて編集しました私の質問。もう一度確認していただけますか?可能であれば、Bokehサーバーを他の理由で使用したくないのですが、必要に応じてそれに切り替えることができます。あなたの答えをありがとう! – swenia

答えて

1

私は別の質問で答えが見つかりました:Bokeh DataTable won't update after trigger('change') without clicking on header

はどうやらデータテーブルの変更があまりにもトリガする必要があります。

+0

データソースがプロットやテーブルなどをバックアップしているかどうかにかかわらず、BokehJSでデータソースのデータを「インプレース」(つまり、 '.data'を置き換えるのではなく)に更新するときは、明示的な変更トリガーが必要です。 – bigreddot

+0

bigreddot、それを得た。ありがとう! – swenia

関連する問題