散景选择小部件回调使用 CustomJS 过滤数据框和绘图答案

【问题标题】：bokeh select widget callback using CustomJS to filter dataframe and plot散景选择小部件回调使用 CustomJS 过滤数据框和绘图
【发布时间】：2018-06-01 17:54:07
【问题描述】：

我想使用 CustomJS 向我的散景选择小部件添加回调。我需要根据来自选择小部件的回调过滤我的数据框。由于我是 JavaScript 编程的新手，我无法编写回调代码

    true_source=ColumnDataSource(data={'a':df.loc[, 'MONTH_YR'],
                            'b':df.loc[, 'MCOUNT'],
                            'qty':df.loc[,'MPDCQTY'],
                            'value':df.loc[,'MQTYRATE'],
                            'section':df.loc['MSECTION']})

    #I added the true_source so I could have a reference from my original dataframe while filtering

    source=ColumnDataSource(data={'x':df.loc[df['MSECTION']=='TURRET','MONTH_YR'],
              'y':df.loc[df['MSECTION']=='TURRET', 'MCOUNT'],
              'qty':df.loc[df['MSECTION']=='TURRET','MPDCQTY'],
               'value':df.loc[df['MSECTION']=='TURRET','MQTYRATE']})

    def callback_select(attr, old, new):
        s=section.value
        new_data={'x':df.loc[df['MSECTION']==s, 'MONTH_YR'],
                  'y':df.loc[df['MSECTION']==s, 'MCOUNT'],
                  'qty':df.loc[df['MSECTION']==s,'MPDCQTY'],
              'value':df.loc[df['MSECTION']==s,'MQTYRATE']}
        source.data=new_data

因为我想部署一个 HTML 文件，所以在 python 中编写回调是行不通的。所以我尝试使用 CustomJS 编写回调。但是我确定我写错了。

    callback=CustomJS(args=dict(source=source, ts=true_source), code=""""
                    var data1=ts.data;
                    var section=data1['section']
                    var a=data1['a']
                    var b=data1['b']

                    var data=source.data;
                    var f=cb_obj.value;

                    var x=[];
                    var y=[];
                    var j=0;

                    for(var i=0;i<section.length;i++){
                        if(section==f){
                        x[j].push(a[i]);
                        y[j].push(b[i]);
                        }   
                    }   
                    source.change.emit();    
                            """)

this image here shows the plot, select option dosent work

谁能帮我解决这个 JS 代码？

【问题讨论】：

您正在制作和填充一些局部变量列表 x 和 y - 然后立即将它们丢弃。为了使它们生效，您需要使用它们将 source.data 设置为新的字典。目前尚不清楚您要做什么，因此很难更具体。你几乎肯定也想要if(section[i]==f)，而不是你现在拥有的。
那些 x 和 y 是源的键。我想根据 if(section___)更新它们> 条件。
我想要的只是在 JavaScript 中重写 def callback_select() 。那些 x 和 y 应该是源 ColumnDataSource 键。我在某处看到要更新的密钥也需要在 CustomJS 中以某种方式初始化，所以这就是我正在尝试做的事情，我在这里完全做错了。
您已经跳过了callback_select 的最后一部分，这是关键部分：您需要类似source.data = new_data 的内容，但您不需要。你永远不会真正更新source，这就是为什么没有任何变化。
我以某种方式理解....也许是一种懒散的方式，但是是的，我得到了解决方案，thanx

标签： javascript python callback bokeh

【解决方案1】：

对于问题中提到的 python 中的 callbcak，可以在 CustomJS 中创建类似的用于在 htmls 中实现。这里 var x, y, qty, value 是 source 和 a, b 的键, qty, value 用于 true_source。我更新了使用它们的源代码。

callback=CustomJS(args=dict(source=source,ts=true_source), code="""
                    var data=ts.data;
                    var section=data['section'];

                    var a=data['a'];
                    var b=data['b'];
                    var qty_t=data['qty_t'];
                    var value_t=data['value_t'];

                    var data1=source.data;
                    var f=cb_obj.value;

                    var x=[];
                    var y=[];
                    var qty=[];
                    var value=[];

                    for(var i=0;i<a.length; i++){
                        if(section[i]==f){
                          x.push(a[i]);
                          y.push(b[i]);
                          qty.push(qty_t[i]);
                          value.push(value_t[i]);

                        }
                    }
                    data1['x']=x;
                    data1['y']=y;
                    data1['qty']=qty;
                    data1['value']=value;

                    source.change.emit();
            """)

【讨论】：