Question

我有三个基于相同数据集的图。如何链接所有三个图，以便当我在vbar图中选择某个物种时，两个散点图也会改变为仅在该物种中绘制点。

任何帮助表示赞赏〜

from bokeh.sampledata.iris import flowers
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, CategoricalColorMapper
from bokeh.layouts import column, row

#color mapper to color data by species
mapper = CategoricalColorMapper(factors = ['setosa','versicolor', 'virginica'],\
                                 palette = ['green', 'blue', 'red'])


output_file("plots.html")

#group by species and plot barplot for count
species = flowers.groupby('species')

source = ColumnDataSource(species)

p = figure(plot_width = 800, plot_height = 400, title = 'Count by Species', \
           x_range = source.data['species'], y_range = (0,60),tools = 'box_select')

p.vbar(x = 'species', top = 'petal_length_count', width = 0.8, source = source,\
       nonselection_fill_color = 'gray', nonselection_fill_alpha = 0.2,\
       color = {'field': 'species', 'transform': mapper})

labels = LabelSet(x='species', y='petal_length_count', text='petal_length_count', 
              x_offset=5, y_offset=5, source=source)

p.add_layout(labels)



#scatter plot for sepal length and width
source1 = ColumnDataSource(flowers)
p1 = figure(plot_width = 800, plot_height = 400, tools = 'box_select', title = 'scatter plot for sepal')

p1.circle(x = 'sepal_length', y ='sepal_width', source = source1, \
          nonselection_fill_color = 'gray', nonselection_fill_alpha = 0.2, \
          color = {'field': 'species', 'transform': mapper})


#scatter plot for petal length and width
p2 = figure(plot_width = 800, plot_height = 400, tools = 'box_select', title = 'scatter plot for petal')

p2.circle(x = 'petal_length', y ='petal_width', source = source1, \
          nonselection_fill_color = 'gray', nonselection_fill_alpha = 0.2, \
          color = {'field': 'species', 'transform': mapper})


#show all three plots
show(column(p, row(p1, p2)))

Answer 1

我认为目前还没有一些功能存在。但是，您可以使用ColumnDataSource回调明确链接两个CustomJS：

from bokeh.models import CusomJS

source = ColumnDataSource(species)
source1 = ColumnDataSource(flowers)
source.js_on_change('selected', CustomJS(args=dict(s1=source1), code="""
    const indices = cb_obj.selected['1d'].indices;
    const species = new Set(indices.map(i => cb_obj.data.species[i]));
    s1.selected['1d'].indices = s1.data.species.reduce((acc, s, i) => {if (species.has(s)) acc.push(i); return acc}, []);
    s1.select.emit();
"""))

请注意，此回调仅将条形图中的选择与散点图同步。要在散点图上进行选择会影响条形图，您必须编写一些额外的代码。

如何使用散景将vbar与圆形图链接？

1 个答案: