Python 用于改变Bokeh图像打印中使用的切片的交互式滑块

我对使用Bokeh将图像放入IPython笔记本电脑很感兴趣。特别是，我经常与之交互的数据类型是具有3维或更多维的多维NumPy数组。以三维数组为例。经常遇到的一个例子是RGB图像。这三个维度是

x

、

y

和

color

我对使用Bokeh在IPython笔记本中绘制单个图像通道感兴趣。我想提供一个交互式滑块，允许IPython笔记本的用户点击第三维的每个索引，在本例中是颜色

下面的代码（在IPython笔记本中运行时）成功显示了第一个颜色通道的绘图。但我无法找出调用

interact

时出错的原因。我的

ColumnDataSource

是否在Bokeh绘图构造中正确定义和引用

# imports
import numpy as np
from scipy.misc import imread

from bokeh.plotting import figure, show
from bokeh.io import output_notebook
from bokeh.models import ColumnDataSource
from bokeh.palettes import Greys9

from IPython.html.widgets import interact

---

---

Javascript错误是：

Javascript error adding output!
TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided float value is non-finite.
See your browser Javascript console for more details.

---

我不知道怎么会这样。我试图通过定义后立即执行

RGB_Image=RGB_Image.astype（float）

将

RGB_Image

强制为浮点，但我得到了相同的错误。

本质上，预定义的图像和尝试更新的图像之间的数据格式不一致

一种可行的解决方案：

def update(idx=0):
    global RGB_image
    source.data['image'] = RGB_image[:, :, idx]
    p.image([source.data['image'][::-1, :]-1],
        x=0, 
        y=0, 
        dh=[ny], 
        dw=[nx], 
        palette=Greys9,
        source=source,
        )
    show(p)

interact(update, idx=(0, 2))

---

我承认，反复定义图像并不是最好的方法，但它至少可以让您知道应该在哪里查看。

尽管我无法准确再现您的问题，因为我无法让IPython控制台像您的IPython笔记本一样工作，我确实发现你的代码有潜在问题。您是否检查了更新函数是否将idx用作单个数字？数组RGB_image[：，：，idx]的列表将完全接受idx为元组，这将导致source.data['image']和源的其余部分之间的数据格式不匹配。

Javascript error adding output!
TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided float value is non-finite.
See your browser Javascript console for more details.

def update(idx=0):
    global RGB_image
    source.data['image'] = RGB_image[:, :, idx]
    p.image([source.data['image'][::-1, :]-1],
        x=0, 
        y=0, 
        dh=[ny], 
        dw=[nx], 
        palette=Greys9,
        source=source,
        )
    show(p)

interact(update, idx=(0, 2))