在布局中绘制多个图表的散景会引发错误：（BOTH_CHILD_AND_ROOT）

Posted 2023-02-23

【中文标题】在布局中绘制多个图表的散景会引发错误：（BOTH_CHILD_AND_ROOT）

【英文标题】：Bokeh ploting multiples charts in a layout throws ERROR : (BOTH_CHILD_AND_ROOT)

【发布时间】：2016-08-15 21:01:17

【问题描述】：

今天我在创建一个使用 Bokeh 0.11.1 可视化数据的网络应用程序时寻求帮助。

首先，我使用 Python 2.7 和 Django 1.9.5 来运行应用程序。我正在使用 PyCharm 专业版编程，所有这些都在 Windows 7 上运行。

起初，Bokeh 对我来说一切正常，我创建了一些函数来绘制绘图并将它们添加到我的模板中。当我创建了几个不同的绘图函数时，我认为像这样继续下去是个坏主意，意思是逐个绘制每个绘图并将其 javascript 添加到我的模板中。

我想这样做是因为我认为每次您要求 Bokeh 绘制单个图表时，它都会在 javascript 中编写许多冗余函数。毕竟，任何生成的 javascript 都是独立的。我想如果我要求 Bokeh 以相同的布局绘制所有图表，它不会将相同的 javascript 函数写成 X 倍。此外，在我的 python 代码中，发送一个布局比为我的每个图表/绘图发送一个包含 javascript 的字符串更干净。

所以我尝试在同一布局中嵌入多个绘图，正如 Bokeh 0.11.1 文档中的示例所示：

from bokeh.io import output_file, show, vplot
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# create another one
s2 = figure(width=250, height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# create and another
s3 = figure(width=250, height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# put all the plots in a VBox
p = vplot(s1, s2, s3)

# show the results
show(p)

当我用它来创建 Bokeh vform 并用 Django 显示它时，我的页面仍然是空白的。 hplot、vform 和 gridplot 也发生了同样的事情。

然后我尝试在 PyCharm python 控制台中运行我的代码以更好地理解问题所在，并且在运行散景示例中的代码（以及我自己的代码）时，控制台返回：

ERROR:C:\Python27\lib\site-packages\bokeh\core\validation\check.py:W-1004 (BOTH_CHILD_AND_ROOT)：如果模型位于布局框中，则它们不应是文档根：图， ViewModel:Plot, ref _id: 77ff5340-e67d-4802-8997-79e84e19d206

ERROR:C:\Python27\lib\site-packages\bokeh\core\validation\check.py:W-1004 (BOTH_CHILD_AND_ROOT)：如果模型位于布局框中，则它们不应是文档根：图， ViewModel:Plot, ref_id: 77ff5340-e67d-4802-8997-79e84e19d206, Chart, ViewModel:Plot, ref_id: f725c7c5-fade-48f6-a4f8-a159dc32002e, Chart, ViewModel:Plot, ref_id: c96bf6132-53c2-4 -9ae9-b27bab1dcf85, 图表, ViewModel:Plot, ref _id: 320afbf4-03f5-4b78-b299-d1799fb607c8

然后我的默认浏览器打开并显示文件 layout.html，该文件保持空白。

我已经在互联网上搜索了问题应该是什么。正如here 所说，我将每个figure 实例都更改为Figure 实例。然而，它不起作用，而且我的主应用程序使用 Bar 和 Scatter 图表，它们也不起作用。

在this其他话题中，据说问题可能来自PyCharm。但是我不认为这是问题所在，手动打开 layout.html 也会显示一个空白页面，并且当我不尝试将其嵌入单个 vplot 或vform 而是一一显示。

当我尝试使用 piece of code 将一些 Bokeh 小部件添加到我的图表时，我遇到了类似的问题，因为我使用了 vplot 和 hplot 而不是 vform。所以这不是我今天所面临的，我正在正确地使用 bokeh vform 来正确显示我的小部件。

考虑到文档中给出的示例都不起作用，我真的想知道出了什么问题。我究竟做错了什么 ？在使用 vforms/plots 之前我需要做些什么吗？

感谢您的帮助。

26/04/2016 编辑：

有人帮我加入了 Bokeh 的 google 小组。这些是目前对我不起作用的一些解决方案，但可能会对遇到相同错误的人有所帮助：

-使用 vbox 或 vplot 代替 vform（在我的情况下不起作用，因为我正在使用小部件，我需要一个 vform）

-使用 p.add_layout 手动扩展渲染器

【参考方案1】：

Bokeh 在它还是一个年轻的图书馆时经历了相当多的变化和实验，但事情终于安定下来了。自发布此问题以来，vform 和 vplot 等功能已被删除，此处描述的问题已得到解决。在任何最近的版本中，用户都应该使用column 布局函数来获取一列图或小部件，并且它的行为与预期一样。这是更新的示例：

from bokeh.io import output_file, show
from bokeh.layouts import column
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# create another one
s2 = figure(width=250, height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# create and another
s3 = figure(width=250, height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# put all the plots in a VBox
p = column(s1, s2, s3)

# show the results
show(p)