如何为Bokeh控件或布局设置id属性

答案是可以实现，根据你使用的Bokeh版本，可选择对应方案：

方案1：Bokeh 3.0及以上版本（最简便） #

3.0及以上版本的所有可渲染为DOM的Bokeh组件，都支持html_attrs参数，可直接传入任意HTML原生属性，包括id：

from bokeh.layouts import column
from bokeh.models import Div

# 给column布局设置id
my_col = column(
    Div(text="内部内容示例"),
    html_attrs={"id": "myid"}
)

渲染后生成的DOM结构完全符合你的需求：

<div id="myid">...</div>

方案2：Bokeh 2.x及更低版本 #

低版本没有内置的HTML属性配置参数，可使用两种替代方案：

替代方案2.1 用data-bokeh-name属性替代id #

实例化column/row时传入name参数，渲染后的DOM会自动携带data-bokeh-name属性，可直接用来做CSS/JS选择，功能和原生id完全一致：

my_col = column(
    Div(text="内部内容示例"),
    name="myid"
)

对应的选择器写法为：

• CSS：div[data-bokeh-name="myid"] { /* 样式规则 */ }
• JS：const targetDom = document.querySelector('div[data-bokeh-name="myid"]')

替代方案2.2 手动注入JS添加原生id #

如果你必须使用原生id属性，可以在页面中加入一段简单JS完成属性赋值：

// 匹配对应Bokeh组件的DOM，添加原生id
document.querySelector('div[data-bokeh-name="myid"]').id = "myid";

补充说明 #

你此前测试name属性不生效，是因为你将name参数配置在了内部的Div组件上，该属性只会作用于Div对应的子DOM元素。如果要给外层的column/row布局对应的div设置属性，需要将参数配置在column/row的实例化参数中。

内容的提问来源于stack exchange，提问作者Mahsa