如何使用CustomJS更新散景源

Question

我在尝试更新散景源时使用“选择”小部件和自定义JS时遇到了一些问题。在这种情况下，CustomJS是强制性要求，因此不能使用def：函数。下面的代码返回数据可视化，但它不会刷新，因为我想，JS代码没有正确编写，我没有办法调试它（如果有人知道如何，请它确实是我能得到的最好的答案）。

主要思想是根据“选择”微件上选择的值过滤我的源。

任何想法？？

source = ColumnDataSource(data=dict(

    x=gx,

    y=gy,

    recty=recty,

    colors=colors,

    filter_info= filter_info))

select = Select(title="Option:", value="All", options=["All", "1", "2", "3", "4", "5", "6+"])

renderer_source = source

# Add the slider

code = """

    var value_filter_info = cb_obj.value;

    if value_assignments == 'All' { 

      new_source_data['x'] =  source.data['x'];

      new_source_data['y'] =  source.data['y'];

      new_source_data['recty'] =  source.data['recty'];

      new_source_data['colors'] =  source.data['colors'];

    } else {

      new_source_data['x'] =  source.data['x'][source.data['filter_info']==value_filter_info];

      new_source_data['y'] =  source.data['y'][source.data['filter_info']==value_filter_info];

      new_source_data['recty'] =  source.data['recty'][source.data['filter_info']==value_filter_info];

      new_source_data['colors'] =  source.data['colors'][source.data['filter_info']==value_filter_info];

    }

    renderer_source.data= new_source_data;

    renderer_source.change.emit();

"""

callback = CustomJS(args=dict(source=source, renderer_source=renderer_source), code=code)

select.js_on_change('value', callback)

p = figure(plot_width=1200, plot_height=400, x_range=(0,100), y_range=(0,1000))

p.rect(x='x', y='recty',  width=1, height=1, color='colors', source=renderer_source, line_color=None, fill_alpha=1, width_units="data", height_units="data")

plot_layout = column(select,p)

show(plot_layout)

output_notebook()

Answer 1

因此，我找到了一个解决方案，可以在美学上，程序上和视觉上得到改善，但至少结果已经显示出来。遵循@bigreddot关于索引和覆盖的建议，我设法编写了当前的CustomJS代码：code = """&nbsp; &nbsp; var render=renderer_source.data;&nbsp; &nbsp; var data=source.data;&nbsp; &nbsp; var data_assignment = data['assignments'];&nbsp;&nbsp; &nbsp; var value_assignments = cb_obj.value;&nbsp;&nbsp; &nbsp; var data_x=data['x'];&nbsp; &nbsp; var data_y=data['y'];&nbsp; &nbsp; var data_recty=data['recty'];&nbsp; &nbsp; var data_colors=data['colors'];&nbsp; &nbsp; var render_x=render['x'];&nbsp; &nbsp; var render_y=render['y'];&nbsp; &nbsp; var render_recty=render['recty'];&nbsp; &nbsp; var render_colors=render['colors'];&nbsp; &nbsp; var x = [];&nbsp; &nbsp; var y = [];&nbsp; &nbsp; var recty = [];&nbsp; &nbsp; var colors = [];&nbsp; &nbsp; render_x=[];&nbsp; &nbsp; render_y=[];&nbsp; &nbsp; render_recty=[];&nbsp; &nbsp; render_colors=[];&nbsp; &nbsp; for (var i=0;i<data_assignment.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; if (value_assignments == 'All') {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.push(data_x[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y.push(data_y[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recty.push(data_recty[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colors.push(data_colors[i]);&nbsp; &nbsp; &nbsp; &nbsp; } else if (data_assignment[i]==value_assignments) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.push(data_x[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y.push(data_y[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recty.push(data_recty[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colors.push(data_colors[i]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; renderer_source.data['x']=x;&nbsp; &nbsp; renderer_source.data['y']=y;&nbsp; &nbsp; renderer_source.data['recty']=recty;&nbsp; &nbsp; renderer_source.data['colors']=colors;&nbsp; &nbsp; renderer_source.change.emit();"""