尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Bokeh 3.6.0 版本详解:N-gon 字形、轴点击事件与新工具能力

Bokeh 3.6.0 版本详解:N-gon 字形、轴点击事件与新工具能力 Bokeh 3.6.0 版本详解N-gon 字形、轴点击事件与新工具能力【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh导读本文基于 Bokeh 项目 3.6.0 版本的官方发布说明docs/bokeh/source/docs/releases/3.6.0.rst系统梳理该次要里程碑版本带来的新特性、改进与 bug 修复并结合仓库源码逐项印证实现细节。读完本文你将全面掌握 Bokeh 3.6.0 中 N-gon 多边形容器字形、轴点击事件、SaveTool 新标签页模式、点击式平移工具、ScaleBar 数据空间定位、CustomJSTicker 回调、DataTable 自定义比较器等核心能力的用法与底层原理可用于快速评估升级收益并落地到实际可视化项目中。Bokeh 3.6.02024 年 9 月发布是 Bokeh 项目的次要里程碑版本涵盖了新字形、新事件、工具增强、注解增强、组件级改进、构建系统与文档优化以及多项关键 bug 修复是 3.x 系列中功能密度较高的一次更新。新特性N-gon 字形含 WebGL 渲染3.6.0 最突出的新特性是引入了N-gon 字形regular n-sided polygon正 n 边形可在一个字形中渲染任意边数的正多边形并原生支持 WebGL 加速渲染对应 PR :bokeh-pull:14027、:bokeh-pull:14044。数据模型与属性定义在 Python 侧字形类定义于 src/bokeh/models/glyphs.py其文档字符串明确描述为 “Render regular n-sided polygons”渲染正 n 边形。类定义如下class Ngon(RadialGlyph): Render regular n-sided polygons. _args (x, y, radius) x NumberSpec(defaultfield(x), help The x-coordinates of the center of the n-gons. ) y NumberSpec(defaultfield(y), help The y-coordinates of the center of the n-gons. ) radius DistanceSpec(help The radius values for n-gons (in |data units|, by default). The radius is measured from the center to the vertices of the n-gons. )可以确认的关键信息位置参数Ngon的位置参数为(x, y, radius)即创建时可传Ngon(x..., y..., radius...)x / yNumberSpec类型默认取数据列x/y表示多边形中心的横纵坐标radiusDistanceSpec类型默认使用数据单位data units表示从中心到顶点的半径。在 bokehjs 侧实现位于 bokehjs/src/lib/models/glyphs/ngon.ts。该类继承自RadialGlyph并在属性定义中补充了两个关键属性static { this.prototype.default_view NgonView this.defineNgon.Props(() ({ angle: [ p.AngleSpec, 0 ], n: [ p.NumberSpec, {field: n} ], })) }angleAngleSpec类型默认值为0控制整个多边形绕中心的旋转角nNumberSpec类型默认取数据列n即每个多边形的边数。顶点计算与绘制逻辑在 bokehjs/src/lib/models/glyphs/ngon.ts 中顶点坐标通过如下算法生成function ngon(x: number, y: number, r: number, n: number, angle: number): [Arrayablenumber, Arrayablenumber] { const xs new Float32Array(n) const ys new Float32Array(n) const alpha_i 2*Math.PI / n for (let i 0; i n; i) { const alpha i * alpha_i angle xs[i] x r * Math.sin(alpha) ys[i] y r * -Math.cos(alpha) } return [xs, ys] }即以圆心(x, y)、半径r、角度步长2π/n均匀生成n个顶点。绘制时_paint会跳过n 3或坐标非有限的点保证只有合法多边形被渲染渲染按beginPath → moveTo → lineTo → closePath构造闭合路径并依次应用填充fill、填充纹理hatch与描边line视觉样式。从源码实现可推断n最小有效值为 3三角形小于 3 的边数会被直接跳过。命中测试与选择NgonView完整实现了四种命中测试见 ngon.ts_hit_point将鼠标坐标反变换回数据坐标通过空间索引缩小候选集再用point_in_poly做点-多边形包含判定_hit_span针对横/竖 span 选择检测多边形各边是否与垂直线/水平线相交_hit_poly先用vertex_overlap检测顶点是否落入选择多边形再用edge_intersection检测边是否相交_hit_rect把矩形选择区转换为四边形复用_hit_poly逻辑。这意味着 Ngon 字形开箱即用地支持悬停HoverTool、点选、框选、套索等选择交互。WebGL 渲染支持WebGL 侧实现位于 bokehjs/src/lib/models/glyphs/webgl/ngon.tsNgonGL继承自RadialGLmarker_type返回ngon并在_set_data中同步angle与n两个属性到 GPU 辅助缓冲。同时NgonView通过load_glglyph()动态按需加载 WebGL 实现浏览器不支持 WebGL 时自动回退到 Canvas 2D 渲染。该字形类型也已注册到 WebGL 标记类型表中见 bokehjs/src/lib/models/glyphs/webgl/types.ts 与 bokehjs/src/lib/models/glyphs/webgl/index.ts适合需要绘制大量多边形的场景。新特性轴点击事件AxisClick3.6.0 为坐标轴引入了点击事件支持PR :bokeh-pull:14050、:bokeh-pull:14037允许用户点击轴本身时触发 JavaScript 回调或自定义逻辑。事件定义事件类定义于 bokehjs/src/lib/core/bokeh_events.tsevent(axis_click) export class AxisClick extends ModelEvent { constructor(readonly model: Axis, readonly value: number | Factor) { super() } protected override get event_values(): Attrs { const {value} this return {...super.event_values, value} } }事件名event_name为axis_click事件负载携带两个关键字段触发事件的Axis模型对象以及点击位置对应的轴数值数值轴为number分类轴为Factor。触发机制触发逻辑位于 bokehjs/src/lib/models/axes/axis.tsoverride on_hit(sx: number, sy: number): boolean { const value this._hit_value(sx, sy) if (value ! null) { this.model.trigger_event(new AxisClick(this.model, value)) return true } return false }当轴命中interactive_hit判定点击落在轴包围盒内时调用_hit_value将屏幕坐标反算为轴上的数值/因子值随后trigger_event抛出AxisClick。从源码结构看该事件可结合js_on_event(axis_click, ...)使用例如点击数值轴后读取event.value获取点击位置对应的数值并执行自定义 JS 逻辑。新特性SaveTool 的“在新标签页打开”模式SaveTool 新增了在新标签页中打开open in a new tab模式PR :bokeh-pull:14031。在 bokehjs/src/lib/models/tools/actions/save_tool.ts 中可以看到其动作类型扩展为三种doit(action: save | copy | open save): void {其中save默认行为将当前绘图保存为 PNG 下载copy复制到剪贴板open通过open(url)在新标签页中打开当前绘图的图片对应async open(): Promisevoid与工具图标tool_icon_open。这为需要在浏览器中直接查看高清导出图的场景提供了便捷入口无需先下载再打开。新特性点击式平移工具click-style pan toolsPR :bokeh-pull:14033为 PanTool 增加了点击式平移click-style pan支持。传统平移是按住鼠标拖拽而点击式平移允许用户通过点击目标位置让绘图区域“跳转”/平滑移动到该位置。从工具体系推断该能力扩展了 bokehjs/src/lib/models/tools/gestures/pan_tool.ts 所在的手势工具目录下的平移工具行为具体可通过 PanTool 的相关属性如mode切换拖拽式与点击式交互适用于大范围地图或长时间序列数据的快速定位。新特性ScaleBar 注解的数据空间定位与缩放ScaleBar比例尺注解新增了数据空间定位与尺寸设置支持PR :bokeh-pull:14005。此前 ScaleBar 的位置与长度通常以屏幕像素/百分比表达3.6.0 允许直接在数据坐标系中指定数据空间定位将比例尺放置在指定的数据坐标位置随数据范围缩放而联动数据空间尺寸以数据单位直接指定比例尺代表的实际长度自动换算为屏幕像素长度。该能力对 GIS 类图表、科学绘图如 examples/basic/annotations/scale_bar_custom_units.py、examples/basic/annotations/scale_bar_positioning.py 中的使用场景尤为重要可让比例尺在缩放平移后始终保持对真实物理长度的准确表达。新特性CustomJSTicker 回调PR :bokeh-pull:13988为刻度生成器引入了CustomJSTicker允许用户通过 JavaScript 回调完全自定义坐标轴的刻度计算逻辑。相对于 Bokeh 内置的BasicTicker、LogTicker等固定算法CustomJSTicker通过args传入外部数据、code传入自定义 JS 函数实现对刻度位置、数量、密度策略的完全控制适合特殊刻度分布如非线性、不规则间隔的专业场景。新特性DataTable 的按列自定义比较器DataTable 组件新增了按列自定义比较器支持PR :bokeh-pull:13973。此前的列排序只能依赖默认的数据类型比较规则3.6.0 允许为每一列指定独立的比较函数自定义 comparator从而支持混合类型列的自定义排序规则按业务语义排序如优先级、状态机顺序、自然语言排序数值列的格式化字符串排序等高级场景。结合 DataTable 已有的sortable列属性与排序功能可参考 examples/interaction/widgets/data_table_column_sort.py自定义比较器显著增强了表格交互的数据处理灵活性。组件与行为改进GroupFilter 支持任意类型值与增强的相等性判断PR :bokeh-pull:14034使GroupFilter.group允许任意类型的值并改进了相等性判断逻辑。此前 group 值主要面向字符串等简单类型现在可匹配数值、布尔等更多数据类型配合ColumnDataSource分组过滤见 examples/basic/data/filter_group.py过滤逻辑更加通用可靠。缩放时更好地遵循 maintain_focusPR :bokeh-pull:14000改进了maintain_focus True时的缩放行为。该属性保证缩放时保持鼠标指针所在位置对应的数据点不漂移3.6.0 修复了此前在某些缩放交互尤其是多点触控/滚轮缩放下焦点保持不准确的问题提升了交互一致性与可预期性。PaletteSelect 的样式表管理PR :bokeh-pull:14052改进了PaletteSelect小部件的样式表stylesheet管理使调色板选择器的外观定制更加稳定、与主题系统更好地协同。会话过期错误提示优化PR :bokeh-pull:13991改进了会话过期session expiry时的错误信息为 Bokeh Server 长连接场景下的诊断提供了更清晰的提示文本帮助用户快速识别断连原因。工程与文档改进bokehjs 构建系统优化PR :bokeh-pull:14067、:bokeh-pull:14065、:bokeh-pull:14064、:bokeh-pull:14056、:bokeh-pull:13946对 bokehjs 的构建系统进行了多项改进。bokehjs 的构建任务集中在 bokehjs/make/tasks如compiler.ts、esm.ts、pack.ts、watch.ts这些改进涉及编译、打包、watch 等链路提升了开发与发布流程的效率与稳定性。bokehjs 代码库优化PR :bokeh-pull:14051、:bokeh-pull:14048、:bokeh-pull:13997对 bokehjs 代码库进行了各种重构与清理涵盖 bokehjs/src/lib 下核心模块的类型、结构与实现细节为后续迭代奠定更干净的基座。文档改进PR :bokeh-pull:14023、:bokeh-pull:14024、:bokeh-pull:14055、:bokeh-pull:14071、:bokeh-pull:13968、:bokeh-pull:13962、:bokeh-pull:14019对 Bokeh 文档进行了多处改进涉及 docs/bokeh/source/docs 下的用户指南与 API 参考等页面提升了示例正确性与描述准确性。Bug 修复3.6.0 修复了以下关键问题Spinner 鼠标滚轮事件处理:bokeh-pull:14073修复了Spinner小部件在接收鼠标滚轮事件时的处理缺陷滚轮调节数值的行为现在更加符合预期GridPlot 子图更新:bokeh-pull:14070修复了更新GridPlot子项children时的 bug动态增删子图不再产生异常UI 事件分发逻辑错误:bokeh-pull:14059修复了 UI 事件分发代码中的逻辑错误确保事件被正确路由到目标对象Scatter 字形 size 属性回归:bokeh-pull:13958修复了Scatter字形中size属性处理的一个回归问题恢复了一致的大小渲染行为。发布与升级指引发布渠道3.6.0 起新增了rcconda 渠道PR :bokeh-pull:14060用于发布 Bokeh 的 release candidate候选发布版包。需要尝鲜 RC 版本的用户可通过conda install -c bokeh/label/rc bokeh安装前提是已配置 conda 环境而稳定版本仍通过主渠道安装。升级建议N-gon 字形、轴点击事件、ScaleBar 数据空间定位等均为纯增量能力对现有代码无破坏性涉及的行为修复尤其是 Scattersize回归建议有相关用法的项目尽快升级验证。升级后建议针对使用Scatter、GridPlot、Spinner的现有图表运行一遍回归测试。小结Bokeh 3.6.0 是一次兼具新能力与稳定性的次要里程碑从 N-gon 字形含 WebGL 渲染到轴点击事件、SaveTool 新标签页模式、点击式平移、ScaleBar 数据空间定位、CustomJSTicker、DataTable 自定义比较器再到构建系统与文档的全面打磨以及四项关键 bug 修复。本文涉及的源码证据均可在仓库中复核bokehjs/src/lib/models/glyphs/ngon.ts、bokehjs/src/lib/core/bokeh_events.ts、bokehjs/src/lib/models/axes/axis.ts、src/bokeh/models/glyphs.py 等开发者可据此评估升级收益并将新特性落地到实际可视化项目中。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表