首页 文章

没有点击 Headers ,Bokeh DataTable赢了't update after trigger(' change')

提问于
浏览
3

散景版:0.10 Python:3.4木星:4.x

目标:创建一个仅显示从散点图中选择的数据的表

问题:尽管有:s2.trigger('change'),DataTable在点击后才会自行刷新 . 在Bokeh网站的其他示例中,一个图将使用此技术更新另一个:请参阅http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-selections

如果你使用上面提到的版本,下面的代码应该在Jupyter笔记本中运行 .

并且,感谢您的帮助 . 乔

from bokeh.io import output_notebook, show
    from bokeh.plotting import figure
    from bokeh.models import CustomJS, ColumnDataSource
    from bokeh.models.widgets import DataTable, TableColumn
    from bokeh.io import vform

    output_notebook()

    x = list(range(-20, 21))
    y0 = [abs(xx) for xx in x]

    # create a column data source for the plots to share
    source = ColumnDataSource(data=dict(x=x, y0=y0))
    s2 = ColumnDataSource(data=dict(x=[1],y0=[2]))

    source.callback = CustomJS(args=dict(s2=s2), code="""
            var inds = cb_obj.get('selected')['1d'].indices;
            var d1 = cb_obj.get('data');
            var d2 = s2.get('data');
            d2['x'] = []
            d2['y0'] = []
            for (i = 0; i < inds.length; i++) {
                d2['x'].push(d1['x'][inds[i]])
                d2['y0'].push(d1['y0'][inds[i]])
            }
            s2.trigger('change');
        """)


    # create DataTable

    columns = [
            TableColumn(field="x", title="x"),
            TableColumn(field="y0", title="y0"),
        ]
    dt = DataTable(source=s2, columns=columns, width=300, height=300 )

    # create a new plot and add a renderer
    TOOLS = "box_select,lasso_select,help"
    left = figure(tools=TOOLS, width=300, height=300)
    left.circle('x', 'y0', source=source)


    show(vform(left,dt))

2 回答

  • 3

    CustomJS 中仅触发s2更改,因此更改's normal that dt doesn't .

    这将完成工作,dt移到JS之上,dt在JS中传递,并且dt被触发:

    dt = DataTable(source=s2, columns=columns, width=300, height=300 )
    source.callback = CustomJS(args=dict(s2=s2, dt=dt), code="""
            var inds = cb_obj.get('selected')['1d'].indices;
            var d1 = cb_obj.get('data');
            var d2 = s2.get('data');
            d2['x'] = []
            d2['y0'] = []
            for (i = 0; i < inds.length; i++) {
                d2['x'].push(d1['x'][inds[i]])
                d2['y0'].push(d1['y0'][inds[i]])
            }
            console.log(dt);
            s2.trigger('change');
            dt.trigger('change');
        """)
    
  • 2

    如果您只关心更新表,那么您实际上不需要传递数据源和“数据表” . 这是因为“数据表”已将源作为属性 . 这是完整的代码(请注意,只传递“dt”):

    from bokeh.io import output_notebook, show
    from bokeh.plotting import figure
    from bokeh.models import CustomJS, ColumnDataSource
    from bokeh.models.widgets import DataTable, TableColumn
    from bokeh.io import vform
    
    output_notebook()
    
    x = list(range(-20, 21))
    y0 = [abs(xx) for xx in x]
    
    # create a column data source for the plots to share
    source = ColumnDataSource(data=dict(x=x, y0=y0))
    s2 = ColumnDataSource(data=dict(x=[1],y0=[2]))
    
    # create DataTable
    
    columns = [
        TableColumn(field="x", title="x"),
        TableColumn(field="y0", title="y0"),
    ]
    dt = DataTable(source=s2, columns=columns, width=300, height=300 )
    
    # create a new plot and add a renderer
    TOOLS = "box_select,lasso_select,help"
    left = figure(tools=TOOLS, width=300, height=300)
    left.circle('x', 'y0', source=source)
    
    source.callback = CustomJS(args=dict(mytable=dt), code="""
    var inds = cb_obj.get('selected')['1d'].indices;
    var d1 = cb_obj.get('data');
    var d2 = mytable.get('source').get('data');
    d2['x'] = []
    d2['y0'] = []
    for (i = 0; i < inds.length; i++) {
    d2['x'].push(d1['x'][inds[i]])
    d2['y0'].push(d1['y0'][inds[i]])
    }
    mytable.trigger('change');
    """)
    
    show(vform(left,dt))
    

相关问题