javascript - Bokeh Callback 是否更新了列表而不是 ColumnDataSource？

Question

我的问题与修改 this 有关来自 Bokeh Gallery 的示例。

我有一个矩阵 m 或原始数据，其中每一行对应于转换空间中的一对 x、y 坐标(请参阅代码的#MockData 部分)。

x,y 坐标绘制在左图上。我正在尝试更改示例，以便当我在左图中选择一些点时，右图将显示相应行的线图。

我已将问题缩小到正确的数字将显示“索引”列表指定的所需数据的程度。但是，我无法弄清楚如何将回调函数链接到索引列表。 (目前，回调无​​用地使用索引更新源 s2。)

代码在复制时应该可以工作:

from bokeh.plotting import figure, output_file, show, ColumnDataSource, hplot
from bokeh.models import HoverTool, Callback, ColumnDataSource
import pandas as pd
output_file("Map.html")

# Mock data
m = np.zeros((6,11))
for i in range(6):
    for j in range(11):
        m[i,j] = i+j
x = [0,1,2,3,4,5]; y = [0,2,4,6,8,10]
m0 = m.transpose()
m1 = pd.DataFrame(m0, index=['0','1','2','3','4','5','6','7','8','9','10'], columns=[np.arange(0,len(m),1).astype(str)])

#First plot
s1 = ColumnDataSource(data=dict(x=x,y=y))
p1 = figure(tools=["lasso_select"], plot_width=600, plot_height=400)
p1.scatter('x', 'y', fill_color='black', line_color=None, size=10, source=s1)

#Second plot
s2 = ColumnDataSource(data=dict(z=[]))
p2 = figure(plot_width=400, plot_height=400)    
m1 = ColumnDataSource(m1)
indices = [1,3,4]
for i in indices:
    p2.line(np.arange(0,11,1), '%s'%i ,  source=m1)

s1.callback = Callback(args=dict(s2=s2), code="""
  var inds = cb_obj.get('selected')['1d'].indices;
  var d2 = s2.get('data');
  d2['z'] = []
  for (i = 0; i < inds.length; i++) {
      d2['z'].push(inds[i])}
  s2.trigger('change'); 
""")

layout = hplot(p1, p2)
show(layout)

原始问题:

使用 Bokeh 文档中的示例。我正在尝试从左侧窗口中的选择中获取索引，并使用它们从具有原始数据的矩阵中获取适当的行并绘制该行。详细说明:

我从一个值矩阵开始，其中每一列是一年，每一行是一个位置。我在矩阵上运行 sklearn Spectral Embedding 来表征数据并得到一个矩阵，其中每一列以某种方式描述数据。我将前 3 列绘制为 x、y 坐标和一种颜色。接下来，我尝试修改示例，以便在我选择一些点时，第二个图表将它们的原始数据(行)显示为单独的线。主要取自示例的相关代码如下。

Answer 1

如果我误解了你的问题，请告诉我，但听起来你有一个矩阵(我们称之为 m1)，你正在运行一个转换并在 s1 中生成数据并在 p1 中绘图。您希望能够选择 p1 中的一些数据，并将 m1 中的相应数据绘制到 p2 中。

如果是这样，您将需要三个 ColumnDataSource 对象。您将必须为 m1 创建一个 ColumnDataSource 并使用您已有的 s1 和 s2。回调需要类似于:

s1.callback = Callback(args=dict(m1=m1, s2=s2), code="""
  var inds = cb_obj.get('selected')['1d'].indices;
  var d1 = m1.get('data');
  var d2 = s2.get('data');
  d2['x'] = []
  d2['y'] = []
  for (i = 0; i < inds.length; i++) {
    d2['x'].push(d1['x'][inds[i]])
    d2['y'].push([inds[i]])
  }
  s2.trigger('change'); 
""")

这将采用所选数据的索引并找到具有相同索引 m1(原始数据)的 x 和 y，并将其添加到 s2。然后 s2.trigger('change') 调用将更新 p2 中的数据点。

如果我误解了您的问题，请告诉我。