CustomJs回调不更新p的数据源

Question

我正试图根据plot 1的悬停值更新plot 2的数据源，以便根据plot 1的数据在plot 2中创建一个相应的viz。你知道吗

问题是，我可以从回调中的rect中获取数据，并将其格式化为线形图的x和y，但它不会更新绘图，只会从中删除占位符值。 数据对象包含需要在p2（折线图）中显示的x和y值，它们的长度和格式相同，但不确定为什么不更改sourceLine ColumnDataSource

#hover tool for additional plots
p2 = figure(plot_width = 900, plot_height = 350)

#initial data source
sourceLine = ColumnDataSource(data = {'x': [2, 3, 5, 6, 8, 7], 'y': [6, 4, 3, 8, 7, 5]})

#line to be updated
ln = p2.line(x = 'x', y = 'y', line_width = 2, source = sourceLine.data)

#callback
callback = CustomJS(args={'rect': rc.data_source.data, 'line': ln.data_source}, code="""

var rdataYear = rect.YEAR;
var rdataAgeGroup = rect.AGE_GROUP;
var rdataDeaths = rect.DEATHS;

var data = {'x': [], 'y': []};
var deaths = [];
var years = [1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017
]

var indices = cb_data.index['1d'].indices;


var newarr = rect.AGE_GROUP.map((e,i) => e === rdataAgeGroup[indices] ? i : undefined).filter(x => x);

for (var i = 0; i < newarr.length; i++){
        var index = newarr[i];
        deaths.push(rdataDeaths[index])
}

//data that needs to be inside p2 line
data['x'].push(years)
data['y'].push(deaths)

line.data = data;
line.change.emit();
""")

#hover tool with the callback 
p1.add_tools(HoverTool(tooltips=[('Year', '@YEAR'), ('Age Group', '@AGE_GROUP'),('Deaths', '@DEATHS'),('Rate', '@RATE')], callback=callback))

我想从p2.line的回调（数据）更新x和y的输出，我对python有点陌生，bokeh有点古怪，所以我真的很感激一些帮助：）

Answer 1

此行不正确：

ln = p2.line(x = 'x', y = 'y', line_width = 2, source = sourceLine.data)

source的值应该是ColumnDataSource本身：

ln = p2.line(x = 'x', y = 'y', line_width = 2, source = sourceLine)

当您传递.data这样的dict时，为了方便起见，Bokeh会自动为您创建一个内部cd，但是glyph使用的这个新cd与您在回调中更新的cd没有任何关系。你知道吗

另外，不要对选择索引使用['1d']语法。它已经被弃用了很长一段时间，并将保证在今年年底前被彻底拆除。取而代之的是：

var indices = cb_data.index.indices

此外，JS实际上没有正确更新数据源。在data['y'].push(deaths)结尾的操作实际上使死亡列表成为现有空列表的子列表，这不是正确的格式。以下是JS代码的更新版本：

const rdataYear = rect.YEAR
const rdataAgeGroup = rect.AGE_GROUP
const rdataDeaths = rect.DEATHS
const years = [1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017]

const indices = cb_data.index.indices;
const newarr = rect.AGE_GROUP.map((e,i) => e === rdataAgeGroup[indices] ? i : undefined).filter(x => x);

const deaths = []
for (var i = 0; i < newarr.length; i++){
    deaths.push(rdataDeaths[newarr[i]])
}

line.data = {x: years, y: deaths}

注意，如果您实际分配给.data，那么Bokeh可以自动检测到，不需要显式信号。你知道吗