时间戳

首页 > 解决方案 > 带有 JS 回调的散景滑块映射到相同的值

javascript - 带有 JS 回调的散景滑块映射到相同的值

问题描述

我按照此处发布的指南使用我自己的数据集创建了一个类似于 Gapminder（动画气泡图）的可视化工具。

一切正常（尽管我必须在我自己的代码中更改指南中的滑块 JavaScript 回调代码的几行代码）。

但是，我注意到当滑块位于位置 0 或 1 时，两个值都将映射到回调引用的源对象中的相同日期。

以供参考：

这是滑块的代码：

''' ############ ADD SLIDER ############ '''
code = """
    var day = slider.value,
        sources = %s,
        new_source_data = sources[day].data;

    console.log(day);
    console.log(sources[day].data['days'][0]);

    text = new_source_data['days'][0];
    renderer_source.data = new_source_data;
    text_source.data = {'days':[text]};
""" % js_source_array_engagement

callback = CustomJS(args=engagement_sources, code=code)
slider = Slider(start=days_indices[0], end=days_indices[-1], value=0, step=1, title="Day", callback=callback)

callback.args["renderer_source"] = renderer_source
callback.args["slider"] = slider
callback.args["text_source"] = text_source

layout_one = layout([[plot], [slider]])

print(engagement_sources['_0'].data['days'][0]) #prints (08/28/2019)
print(engagement_sources['_1'].data['days'][0]) #prints (08/29/2019)

plots = row(layout_one, plot_two)

当我将滑块移动到 0 或 1 时，控制台分别打印 0 和 1。

但是，它们都映射到日期 08/29/2019。我通过打印来检查值是否正确，两个打印语句分别显示 (08/28/2019) 和 (08/29/2019)。

结果，我认为回调的代码可能有问题，特别是代码如何引用源对象，但我无法弄清楚它是什么，特别是因为它正确引用了所有其他值，除非滑块是在 0。

标签： javascriptpython-3.xbokehbokehjs

解决方案

如果您遵循该示例，则使用showthen 您正在生成独立输出。这是 Bokeh 创建一堆静态 HTML 和 JS 代码并将其发送到浏览器以显示绘图的模式。但这是重要的部分：与任何 Python 进程都没有任何联系。用这种用法更新滑块只会影响 JavaScript 状态，它对任何 Python 变量或状态都没有影响。如果您想在 Python 和显示的内容（存在于“JavaScript 端”）之间实现完全的双向同步，那么这就是 Bokeh 服务器的用途（这正是它的目的）。

您可以在此处查看如何在笔记本中嵌入 Bokeh 服务器应用程序的示例：

https://github.com/bokeh/bokeh/blob/master/examples/howto/server_embed/notebook_embed.ipynb

此外，您链接的教程相当陈旧，并且采用了一种非常古老的文本替换技术，这在 Bokeh 服务器上下文中根本不需要。您可以在此处查看该 Gapminder 示例的现代（并且非常简单）Bokeh 服务器版本：

https://github.com/bokeh/bokeh/tree/master/examples/app/gapminder

您可以在此处看到该 Gapminder 示例的实时托管演示：

https://demo.bokeh.org/gapminder

推荐阅读