CustomJs回调不更新绘图的数据源

Question

我正在尝试根据悬停的图1的过高值更新图2的数据源，以便根据图1的数据在图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之类的命令时，为了方便起见，Bokeh会自动为您创建一个内部CDS，但是现在，该字形使用的新CDS与您在回调中更新的CDS无关。

此外，请勿将['1d']语法用于选择索引。现在已经不推荐使用它很长时间了，并且可以保证在今年年底之前将其完全删除。相反：

var indices = cb_data.index.indices

此外，您的JS实际上没有正确更新数据源。 data['y'].push(deaths)结尾的操作实际上使死亡列表成为现有空列表的 sublist ，这不是正确的格式。这是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可以自动检测到该信号，而无需显式信号。