时间戳

首页 > 解决方案 > 散景触发 js_on_change 以首次显示图形

javascript - 散景触发 js_on_change 以首次显示图形

问题描述

我正在我的网站中绘制一个熊猫数据源的散景图。熊猫数据框df如下所示：

X   Y   Type
0   5    A
0   15   B
1   12   A
1   18   B

我添加了一个Select带有值A和的对象B。基本上，用户在该选择对象中选择值A或，我的回调过滤 DataSource 并绘制与所选类型相对应的图形：BCustomJS

source = ColumnDataSource(df)
select = Select(title="Select Type:", options=['A', 'B'])
callback = CustomJS(args={'source':source}, code = """
    var t = cb_obj.value
    var a = df.filter(function(c){if (c['Type'] == t) return c;});
    source.data['X'] = []
    source.data['Y'] = []
    for (var i=0; i < a.length; i++) {
      source.data['X'].push(a[i]['%s']);
      source.data['Y'].push(a[i]['Y']);
    }
    source.change.emit();
  """
select.value = 'A'

问题是图表在第一次显示时看起来很乱。实际上，它绘制了所有X和Y列，我必须手动更改下拉列表中的默认选择类型，以触发回调并正确过滤数据。

我可以在第一次显示我的图表之前以编程方式触发该回调吗？

标签： javascriptpythonbokeh

解决方案

没有办法预先触发回调。相反，您应该确保（在 Python 中）将 CDS 初始化为您实际想要显示的正确初始状态。

但是，如果您尝试在数据子集之间进行选择，那么您上面的方法将无法工作。您实际上正在更新您拥有的唯一数据源，每次回调都会丢弃数据（您无法取回）。相反，您应该使用 select 回调来配置 Bokeh 过滤器：

https://docs.bokeh.org/en/latest/docs/user_guide/data.html#filtering-data

具体来说，您可能想要一个GroupFilter，并且在 Discourse 上有一些示例/讨论：

https://discourse.bokeh.org/t/scatter-plot-legend-doesnt-update-correctly-when-data-is-updated/5545

推荐阅读