在独立的散景图中通过回调JS更改ColorMapper

Question

我想创建一个独立的文档，类似于服务器应用程序示例'Crossfilter'：选择不同的列来着色圆圈并更新颜色条。

我用下面的代码定义了一个CustomJS，在那里我用计算的低值和高值创建一个新的LinearColorMapper。 （出于调试目的，我故意添加不同于通过Python代码设置的调色板）。

var low = Math.min.apply(Math,source.data[cb_obj.value]);
var high = Math.max.apply(Math,source.data[cb_obj.value]);
var color_mapper = new Bokeh.LinearColorMapper({palette:'Viridis5', low:low, high:high});
cir.glyph.fill_color = {field: cb_obj.value, transform: color_mapper};
cir.glyph.line_color = {field: cb_obj.value, transform: color_mapper};
color_bar.color_mapper = color_mapper;
source.change.emit();

因此，在选择列时，圆圈变为白色，线条变黑，颜色条的刻度线正确变化，但调色板不会更改。

你能帮我在回调中设置正确的属性吗？先感谢您。

从Python代码设置的原始状态，颜色映射器

选择列'd'后

我创建了一个“最小的工作示例”，以显示我有多远。有模板的完整项目可以在这里找到：https://github.com/pintergreg/bokehjscolormapperexample

Answer 1

看起来你不能在BokehJS中引用这样的颜色托盘。只需将Viridis5变量传递给JS回调即可运行（在Bokeh v1.0.4上测试）：

import pandas as pd
from bokeh.models import ColumnDataSource, ColorBar, Select, CustomJS
from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.palettes import Spectral5, Viridis5
from bokeh.transform import linear_cmap
from bokeh.embed import components
from jinja2 import Environment, FileSystemLoader

df = pd.DataFrame({"a": [2, 6, 5, 3, 7, 8, 1, 9, 2, 4],
                   "b": [3, 5, 7, 1, 0, 6, 5, 4, 2, 9],
                   "c": [11, 12, 13, 14, 11, 13, 15, 14, 15, 12],
                   "d": [21, 23, 24, 25, 21, 22, 23, 24, 25, 22]})
source = ColumnDataSource(df)

mapper = linear_cmap(field_name = "c", palette = Spectral5,
                     low = min(df["c"]), high = max(df["c"]))

fig = figure(plot_width = 400, plot_height = 400)

cir = fig.circle(x = "a", y = "b", size = 12,
                 source = source, line_color = mapper, color = mapper)
color_bar = ColorBar(color_mapper = mapper["transform"], width = 8,
                     location = (0, 0))
fig.add_layout(color_bar, "right")

codec = """
            var low = Math.min.apply(Math,source.data[cb_obj.value]);
            var high = Math.max.apply(Math,source.data[cb_obj.value]);
            var color_mapper = new Bokeh.LinearColorMapper({palette:viridis5, low:low, high:high});
            cir.glyph.fill_color = {field: cb_obj.value, transform: color_mapper};
            cir.glyph.line_color = {field: cb_obj.value, transform: color_mapper};
            color_bar.color_mapper.low = low;
            color_bar.color_mapper.high = high;
            color_bar.color_mapper.palette = viridis5;
            source.change.emit();
        """
cb_cselect_c = CustomJS(args = dict(cir = cir, source = source, color_bar = color_bar, viridis5 = Viridis5),
                        code = codec)

c_select = Select(title = "Select variable for color: ", value = "None",
                  options = ["c", "d"], callback = cb_cselect_c)

layout = gridplot([[fig], [c_select]])
show(layout)

# env = Environment(loader=FileSystemLoader("."))
# template = env.get_template("template.html")
#
# script, div = components(layout)
#
# with open("output.html", "w") as f:
#     print(template.render(script=script, div=div), file=f)

您还需要手动将此行添加到生成的HTML文件的标题部分：

<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-api-1.0.4.min.js"></script>