如何根据下拉菜单更新数据源?

Question

我从附加到选择小部件js_on_change函数的回调中获得所需的 p1 图输出。它在 javascript 控制台上显示正确的数据，但不在 p1 图上更新。我有一个类似的问题，之前已经解决了，但无论出于何种原因，它都不适用于这种情况。可能与 select.js_on_change 有关，但我不确定。

source = ColumnDataSource(data={
'CAUSE' : df.cause_of_death,
'AGE_GROUP' : df.AGE_GROUP,
'YEAR' : df.YEAR, 
'DEATHS' : df.deaths, 
'RATE' : df.rate, 
})
rangeMax = 1800
#converting matplotlib colour map to fkin bokeh ones >:(
colormap =cm.get_cmap("gist_heat_r") #choose any matplotlib colormap here
bokehpalette = [plt.colors.rgb2hex(m) for m in colormap(np.arange(colormap.N))]
mapper = LinearColorMapper(palette = bokehpalette, low=min(df.deaths), high=rangeMax)
age_group = list(df.AGE_GROUP)
p1 = figure(title="Deaths caused by lung cancer in Australia from ({0} - {1})".format(yearMin, yearMax),
x_range=[yearMin, yearMax], 
y_range=[age_group[0], age_group[1], age_group[2], age_group[3], age_group[4], age_group[5], age_group[6], age_group[7], age_group[8], 
age_group[9], age_group[10], age_group[11], age_group[12], age_group[13], age_group[14], age_group[15]], 
plot_width = 800, 
plot_height = 350, 
tools = TOOLS, toolbar_location=None)
p1.grid.grid_line_color = None
p1.axis.axis_line_color = None
p1.axis.major_tick_line_color = None
p1.xaxis.axis_label = 'Year'
p1.yaxis.axis_label = 'Age Group'
p1.axis.major_label_text_font_size = "8pt"
p1.axis.major_label_standoff = 0
p1.xaxis.major_label_orientation = pi / 3
rc = p1.rect(x="YEAR", y="AGE_GROUP", width=1, height=1,
source=source, 
fill_color={'field': 'DEATHS', 'transform': mapper},
line_color='white')

callback = CustomJS(args = {'rect': rc.data_source.data, 'source': source}, 
code = """
var x = source.data
var select = cb_obj.value

var data = {"AGE_GROUP": [],  "CAUSE": [], "DEATHS": [], "RATE": [], "YEAR": []}
var indices = x.CAUSE.map((e,i) => e === select ? i : '').filter(x => x)

for (var i = 0; i < indices.length; i++){     
data.AGE_GROUP.push(x.AGE_GROUP[indices[i]])
}
for (var i = 0; i < indices.length; i++){     
data.CAUSE.push(x.CAUSE[indices[i]])
}
for (var i = 0; i < indices.length; i++){     
data.DEATHS.push(x.DEATHS[indices[i]])
}
for (var i = 0; i < indices.length; i++){     
data.RATE.push(x.RATE[indices[i]])
}
for (var i = 0; i < indices.length; i++){     
data.YEAR.push(x.YEAR[indices[i]])
}
console.log(x)
rect = {"AGE_GROUP": data.AGE_GROUP, "CAUSE": data.CAUSE, "DEATHS": data.DEATHS, "RATE": data.RATE, "YEAR": data.YEAR, }
console.log(rect)
"""
)
menu = ["Lung cancer (ICD-10 C33, C34)", "Prostate cancer (ICD-10 C61)", "Colorectal cancer (ICD-10 C18–C20, C26.0)", "Breast cancer (ICD-10 C50)"]
select = Select(title="Option:", value=menu[0], options=menu)
select.js_on_change('value', callback)

理想的解决方案是，当有人单击下拉菜单上的选项时，它会根据该值填充矩形图，即肺癌将显示肺癌的数据。 如果有人需要更深入的了解，请附上代码和数据。 https://drive.google.com/drive/folders/11jfrpQnDOsECyjB96CXxgUK4cDhJIbcK?usp=sharing

Answer 1

您正在创建一个新的局部变量data然后不对其进行任何操作。当回调代码结束时，它将被丢弃，不起作用。散景在设置其对象属性时会通过分配给对象的属性来响应，而您没有这样做。如果source是驱动要更新的任何字形的数据源，则需要执行以下操作：

source.data = data

rect也是如此。您正在创建新的局部变量。它们存在于回调函数代码的范围内，然后消失。散景无法看到或对这些做任何事情。