Bokeh 3.0.0 版本里程碑全解析架构重构、Web 组件化与图交互新能力【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh本文以 Bokeh 官方 3.0.0 发布说明docs/bokeh/source/docs/releases/3.0.0.rst为骨架结合当前仓库的 Python 端与 bokehjs 前端源码深入讲解 3.0.0 这一重大里程碑版本的变更内容浏览器与 Python 版本支持策略调整、布局与 CSS 互操作重设计、序列化协议重构、UI 组件 Web 组件化以及NodesAndAdjacentNodes图选择策略与Plot.remove_tools()等新 API 的实际用法。读完本文你将能理解 3.0.0 架构层面的关键决策并掌握新增图交互策略与工具管理 API 的落地写法。Bokeh3.0.02022 年 10 月发布是 Bokeh 项目的一个重大里程碑版本。与 2.x 时代的增量更新不同3.0.0 在兼容性策略、前端运行时、序列化协议与 UI 架构等多个层面进行了系统性重构同时带来了一批面向开发者的新 API。以下按重大变更与次要变更两条主线展开。一、重大变更兼容性边界与运行时重构1.1 移除对旧版 Web 浏览器的支持3.0.0 明确移除了对旧版 Web 浏览器如 IE、不支持 ES6 的浏览器的支持。这一决策直接决定了 bokehjs 前端代码的基线源码不再为旧引擎保留降级路径可以放心使用现代 JavaScript/TypeScript 语法与 Web 标准能力。从 bokehjs/src/lib 的源码结构可以看到所有核心逻辑如core/、models/、embed/均以 TypeScript 编写并由编译器任务统一产出参见 bokehjs/make/tasks/compiler.ts这要求运行环境具备完整的 ES6 能力。对使用者而言这意味着服务器端渲染与 notebook 集成依然正常工作但浏览器端必须为现代浏览器文档、工具提示、WebGL 渲染等能力不再兼容 IE 时代的多边形填充polyfill负担整体包体与初始化逻辑得以简化。1.2 Python 版本支持移除 3.7新增 3.103.0.0 移除了对 Python 3.7 的官方支持并新增 Python 3.10 支持。这一调整与上游 Python 生态的维护周期一致使 Bokeh 可以放心使用更新的语法与标准库特性。当前仓库的打包与 CI 配置如 pixi.toml、pyproject.toml也延续了这一版本基线策略。对于升级用户建议在部署前确认目标解释器版本满足要求。1.3 布局与 CSS 互操作性的重设计3.0.0 重新设计了布局系统与 CSS 的互操作方式。旧版布局依赖内部计算出的像素尺寸难以与页面其他 CSS 规则协作新版则大幅改善了与外部 CSS 的协同能力。从 bokehjs 的样式体系可以印证这一变化样式文件被细分为 bokehjs/src/less 下的多个独立主题模块如ui.less、panels.less、toolbar.less、menus.less、tabs.less、dialog.less、notifications.less等并为 UI 组件提供对应的 widget 样式bokehjs/src/less/widgets。这种按组件切分样式的结构正是为了配合 Web 组件化改造——每个组件可以独立加载、覆盖自己的样式从而让开发者更容易用自定义 CSS 调整 Bokeh 界面外观。1.4 序列化协议重设计与性能提升3.0.0 对 Python 与 JavaScript 之间的序列化协议进行了重新设计。新协议对文档对象的表示、引用传递与事件分发做了大幅优化直接带来两个可感知的收益更小的网络传输体积与更快的初始化速度详见下文初始导入时间减少。从 bokehjs 源码可以定位到协议落地的关键模块bokehjs/src/lib/core/serialization含serializer与deserializer实现负责 JavaScript 侧的编解码bokehjs/src/lib/protocol 定义消息层面的协议结构Python 侧对应实现位于 src/bokeh/protocol包含消息打包与解包逻辑。事件系统同样依赖这一序列化基础例如 bokehjs/src/lib/core/bokeh_events.ts 通过Serializable/Serializer将事件序列化后经 WebSocket 传递并在对端通过Deserializer还原。新协议是 3.x 时代文档同步与服务器推送高效工作的底层保障。1.5 CSS 模块化与 UI 组件 Web 组件化这是 3.0.0 最具架构宣言意义的一项变更CSS 被全面模块化所有 UI 组件按钮、菜单、对话框、通知、标签页、抽屉等都重构为 Web 组件。CSS 模块化见 bokehjs/src/less 下的组件级样式文件如 buttons.less、dropdown.less、tabs.less、notifications.less 等每个文件对应一类 UI 组件的样式职责Web 组件化bokehjs 的 UI 组件通过 bokehjs/src/lib/models/ui 下的模型实现样式由 styles.ts 等编译管线注入形成模型—视图—样式三位一体的组件封装。Web 组件化带来的直接好处是组件可以在 Bokeh 文档之外被复用、样式可以被 Shadow DOM 隔离或按需覆盖也使得 Bokeh 与前端生态如 React/Vue 应用内嵌的集成更加自然。1.6 Django 集成迁移至独立仓库3.0.0 将 Django 集成从主仓库移出独立维护于bokeh/bokeh-django仓库。这意味着主仓库不再包含 Django 相关适配代码当前 src/bokeh 中已无bokeh_django模块需要 Django 集成的用户应单独安装bokeh-django包其与 3.0.0 的版本对应关系以该独立仓库的发布说明为准。这一拆分让主仓库聚焦于核心绘图能力同时让 Django 集成可以独立演进、独立发布。二、次要变更与新 API 实战2.1 支持 favicon.ico 文件3.0.0 起Bokeh 输出文档可以携带并正确加载favicon.ico避免浏览器标签页显示默认空白图标。这属于文档头信息能力的小幅增强在使用file_html、components等输出接口时可通过资源/模板机制注入站点图标。2.2 初始导入时间减少借助序列化协议重设计与代码结构优化3.0.0 显著缩短了import bokeh的启动时间。这来自多个层面的合力减少了模块初始化阶段的重复工作前端运行时更精简浏览器端首次加载/解析脚本的开销下降现代浏览器基线见 1.1允许去掉大量兼容性代码。对于 notebook 与服务器应用场景更快的导入意味着更短的冷启动延迟属于直接可感知的体验提升。2.3 新选择策略NodesAndAdjacentNodes3.0.0 为图Graph交互新增了NodesAndAdjacentNodes选择/检查策略。它作用于GraphRenderer的selection_policy与inspection_policy属性当用户选中或悬停一个节点时与该节点通过单条边直接相连的所有邻居节点也会一并被选中/高亮该策略不涉及边本身的选择或检查也不会区分哪个是被工具直接命中的节点。Python 端定义位于 src/bokeh/models/graphs.py继承自GraphHitTestPolicy抽象基类同文件中还定义了既有策略EdgesOnly、NodesOnly、NodesAndLinkedEdges、EdgesAndLinkedNodes便于横向对比。前端实现位于 bokehjs/src/lib/models/graphs/graph_hit_test_policy.ts。核心逻辑在get_adjacent_nodes()方法中从节点数据源读取index列得到被选中/检查节点的索引遍历边数据源的start与end列凡边的一端命中被选节点则把另一端加入相邻节点集合同时保留被选节点自身经uniq去重后转换为新的Selection再合并进节点选择/检查集合。选择与检查两条路径分别由do_selection()与do_inspection()实现二者共用上述邻接计算逻辑分别作用于node_renderer.data_source.selected与inspected。完整可运行示例见 examples/topics/graph/interaction_nodesadjacentnodes.py。该示例使用 NetworkX 的 karate club 图关键配置如下import networkx as nx from bokeh.models import (BoxSelectTool, HoverTool, MultiLine, NodesAndAdjacentNodes, Plot, Range1d, Scatter, TapTool) from bokeh.palettes import Spectral4 from bokeh.plotting import from_networkx, show G nx.karate_club_graph() plot Plot(width400, height400, x_rangeRange1d(-1.1, 1.1), y_rangeRange1d(-1.1, 1.1)) plot.title.text Graph Interaction Demonstration plot.add_tools(HoverTool(tooltipsNone), TapTool(), BoxSelectTool()) graph_renderer from_networkx(G, nx.circular_layout, scale1, center(0, 0)) scatter_glyph Scatter(size15, fill_colorSpectral4[0]) graph_renderer.node_renderer.glyph scatter_glyph graph_renderer.node_renderer.selection_glyph scatter_glyph.clone(fill_colorSpectral4[2]) graph_renderer.node_renderer.hover_glyph scatter_glyph.clone(fill_colorSpectral4[1]) ml_glyph MultiLine(line_color#CCCCCC, line_alpha0.8, line_width5) graph_renderer.edge_renderer.glyph ml_glyph graph_renderer.edge_renderer.selection_glyph ml_glyph.clone(line_colorSpectral4[2], line_alpha1) graph_renderer.edge_renderer.hover_glyph ml_glyph.clone(line_colorSpectral4[1], line_width1) graph_renderer.selection_policy NodesAndAdjacentNodes() graph_renderer.inspection_policy NodesAndAdjacentNodes() plot.renderers.append(graph_renderer) show(plot)要点说明selection_policy与inspection_policy同时设置为NodesAndAdjacentNodes()实现点击选中节点及其一跳邻居与Hover 高亮节点及其一跳邻居通过selection_glyph/hover_glyph为节点与边配置不同的颜色可以直观区分被命中的节点/邻居与普通节点该示例在官方图交互章节也有对应展示参见 docs/bokeh/source/docs/user_guide/topics/graph.rst其中还并列了NodesAndLinkedEdges、EdgesAndLinkedNodes等策略的对比示例。2.4 新增 Plot.remove_tools() 方法3.0.0 为Plot新增了remove_tools()方法用于从图中移除一个或多个工具与既有的add_tools()形成对称的工具管理 API。实现位置src/bokeh/models/plots.py。其行为要点接收可变数量的Tool实例参数*tools若传入非Tool子类对象抛出ValueError提示All arguments to remove_tool must be Tool subclasses.若传入的工具不在plot.toolbar.tools中抛出ValueError并列出当前可用工具借助nice_join格式化校验通过后从toolbar.tools列表中移除对应工具。类型签名同步定义在 src/bokeh/models/plots.pyidef remove_tools(self, *tools: Tool) - None。典型用法from bokeh.models import BoxZoomTool, PanTool from bokeh.plotting import figure p figure() p.add_tools(PanTool(), BoxZoomTool()) # 3.0 之前即存在添加工具 # 移除指定工具 p.remove_tools(PanTool()) # 也可以一次性移除多个 # p.remove_tools(PanTool(), BoxZoomTool())与add_tools()的对比方法参数类型说明add_tools(*tools)Tool \| str支持工具实例或工具名字符串内部经Tool.from_string转换见 plots.pyremove_tools(*tools)Tool仅接受工具实例必须已在toolbar.tools中需要特别注意的是remove_tools()只能移除传入的实例移除后需自行show或刷新文档才能看到界面变化如果工具不在当前图表中方法会直接抛错因此动态移除前建议先判断工具是否存在于plot.toolbar.tools。三、升级到 3.0.0 的注意清单综合上述变更从 2.x 升级到 3.0.0 时建议重点检查浏览器环境确认最终用户使用支持 ES6 的现代浏览器Chrome、Firefox、Safari、Edge 新版本无法再支持 IEPython 版本运行环境需为 Python 3.8 及以上官方支持新增 3.10Python 3.7 不再受支持Django 集成如有 Django 项目需改用独立的bokeh-django包序列化协议前后端版本需严格对齐——3.0.0 的重设计意味着服务端与浏览器端必须使用同一 3.x 版本避免协议不匹配导致的消息解析失败样式与 UI由于 CSS 模块化与 Web 组件化任何依赖旧版 DOM/类名结构的自定义样式或前端扩展可能需要改写新 API 利用图交互可尝试NodesAndAdjacentNodes增强邻居节点联动工具条管理可借助Plot.remove_tools()实现更精细的按需配置。以上每一条都能在当前仓库中找到对应实现证据版本声明见 docs/bokeh/source/docs/releases/3.0.0.rst图策略实现见 bokehjs/src/lib/models/graphs/graph_hit_test_policy.ts工具管理见 src/bokeh/models/plots.py序列化与事件基础见 bokehjs/src/lib/core/serialization 与 src/bokeh/protocol。3.0.0 的这些架构决策为后续 3.x 系列的性能与组件化能力奠定了基石理解本次里程碑的取舍有助于在升级与二次开发时做出正确的技术判断。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
