求助：使用CustomJS为Bokeh Select组件编写数据过滤回调函数

我来帮你搞定这段CustomJS代码，先梳理下你原来代码里的几个关键问题，再给出修正后的版本：

原代码的问题点 #

• 循环判断逻辑错误：你写的if(section==f)是拿整个数组和选中值比较，应该判断当前循环的单个元素section[i]是否匹配选中值f
• 数组元素添加方式错误：x[j].push(a[i])的写法不对，直接用x.push(a[i])就能往数组末尾追加元素，完全不需要维护j这个多余变量
• 遗漏了字段同步：你的Python代码里处理了qty和value字段，但JS代码里没同步更新这些内容

修正后的CustomJS代码 #

callback = CustomJS(args=dict(source=source, ts=true_source), code="""
    // 获取原始数据源的所有字段
    const rawData = ts.data;
    const sections = rawData['section'];
    const months = rawData['a'];
    const counts = rawData['b'];
    const qtys = rawData['qty'];
    const values = rawData['value'];
    
    // 获取当前Select组件选中的选项值
    const selected = cb_obj.value;
    
    // 初始化存储过滤后数据的数组
    const filteredX = [];
    const filteredY = [];
    const filteredQty = [];
    const filteredValue = [];
    
    // 遍历原始数据，筛选符合条件的项
    for (let i = 0; i < sections.length; i++) {
        if (sections[i] === selected) {
            filteredX.push(months[i]);
            filteredY.push(counts[i]);
            filteredQty.push(qtys[i]);
            filteredValue.push(values[i]);
        }
    }
    
    // 一次性更新目标数据源的所有字段
    source.data = {
        x: filteredX,
        y: filteredY,
        qty: filteredQty,
        value: filteredValue
    };
    
    // 通知Bokeh触发图表更新
    source.change.emit();
""")

代码说明 #

1. 变量命名更直观：把a、b这类模糊命名改成months、counts，方便后续维护
2. 修正核心过滤逻辑：用sections[i] === selected匹配单个元素和选中值，确保过滤逻辑正确
3. 同步所有需要的字段：和你Python代码的逻辑对齐，把qty和value也纳入过滤更新范围
4. 简化数据源更新：直接替换source.data对象，比逐个修改数组更简洁不易出错
5. 用现代JS语法：用let替代var，避免变量提升带来的潜在问题

这样修改后，你的Select组件选择不同选项时，就能正确过滤原始数据并同步更新图表了。

内容的提问来源于stack exchange，提问作者Aseer Ahmad Ansari