javascript - 散景图上的可点击点

我正在使用一个仪表板，在该仪表板上，用户单击常规散点图上的多个点之一以获取有关该点的更多信息。每个点代表一组数据，并且在单击时，用户应该能够看到一个表，其中列出了相关的数据组。

该表将列在该图的旁边，并且每当选择一个新的点（或多个点）时，行就会更改。

然后，我需要向该表添加过滤器，因此它也需要是交互式的。该图在过滤期间不会更改，仅表中的相关数据会更改。

我看过以下示例，它实现了与我想要实现的完全相反的示例：

from bokeh.plotting import Figure, output_file, show
from bokeh.models import CustomJS
from bokeh.models.sources import ColumnDataSource
from bokeh.layouts import column, row
from bokeh.models.widgets import DataTable, TableColumn, Toggle

from random import randint
import pandas as pd

output_file("data_table_subset_example.html")

data = dict(
        x=[randint(0, 100) for i in range(10)],
        y=[randint(0, 100) for i in range(10)],
        z=['some other data'] * 10
    )
df = pd.DataFrame(data)
#filtering dataframes with pandas keeps the index numbers consistent
filtered_df = df[df.x < 80]

#Creating CDSs from these dataframes gives you a column with indexes
source1 = ColumnDataSource(df) # FIGURE
source2 = ColumnDataSource(filtered_df) # TABLE - FILTERED

fig1 = Figure(plot_width=200, plot_height=200)
fig1.circle(x='x', y='y', source=source1)

columns = [
        TableColumn(field="x", title="X"),
        TableColumn(field="z", title="Text"),
    ]
data_table = DataTable(source=source2, columns=columns, width=400, height=280)

button = Toggle(label="Select")
button.callback = CustomJS(args=dict(source1=source1, source2=source2), code="""
        var inds_in_source2 = source2.get('selected')['1d'].indices;
        var d = source2.get('data');
        var inds = []

        if (inds_in_source2.length == 0) { return; }

        for (i = 0; i < inds_in_source2.length; i++) {
            inds.push(d['index'][i])
        }

        source1.get('selected')['1d'].indices = inds
        source1.trigger('change');
    """)

show(column(fig1, data_table, button))

我尝试将按钮回调中的source1和source2替换为尝试反向过滤（即在图形上选择一个点并过滤数据表）。但是数据表根本没有过滤，而是只选择了与数据点相对应的行。知道如何过滤出图中未选择的其余行吗？

最佳答案

我在另一个问题中找到了答案：Bokeh DataTable won't update after trigger('change') without clicking on header

显然，数据表更改也需要触发。