尧图网页设计 
数据可视化数据分析前端【免费下载链接】SandDanceVisually explore, understand, and present your data.项目地址https://gitcode.com/gh_mirrors/sa/SandDance点击查看免费下载msrvida/vega-deck.gl是 SandDance 项目中负责把 Vega 可视化规格交给 deck.gl 做 WebGL 渲染的核心视图组件。它让你用 Vega 声明式规格的表现力换取 deck.gl 的 GPU 渲染能力从而直接支持 3 维数据可视化。读完本文你将掌握两种安装方式CDN script 标签与 Node.js 打包接入、use()依赖注入的机制、ViewGl的用法以及矩形变立方体的z/depth编码扩展与底层 Presenter 渲染管线。说明本文基于当前仓库packages/vega-deck.gl目录当前版本 3.3.6编写文中所有源码路径均以仓库根目录为起点。组件定位Vega 的表达力 deck.gl 的 WebGL 渲染该项目在 README 中对自己的定位是View component for Vega visualizations, using deck.gl for WebGL rendering。它将两个优秀的可视化库合二为一一方面完整继承 Vega 规格的声明式表达能力数据、缩放、坐标、图元都能用 JSON 规格描述另一方面把最终绘制交给 deck.gl 的 WebGL 管线因此可以把数据可视化到3 个维度。在 SandDance 整体架构中它处于渲染底座的位置。从仓库入口文件 packages/vega-deck.gl/src/index.ts 可以看到该包对外导出以下核心内容base/use依赖注入机制来自 src/base.tsPresenter负责用 deck.gl 呈现一帧舞台Stage数据src/presenter.tsViewGlVega.View 的子类新增.renderer(deck.gl)渲染器src/vega-classes/viewGl.tsconstants、controls、defaults、types、util等工具模块以及 deck.gl 的DeckProps、PickInfo、Position、RGBAColor类型再导出。已知限制并未完整实现 Vega 全部特性README 明确声明本项目没有完整实现 Vega 提供的每一项特性。部分交互特性因为 3D 渲染模型与 2D 渲染平面之间的对应关系被打破而被省略例如某些依赖 2D 平面坐标系的交互另一些特性则尚未开发完成项目方欢迎以 pull request 的形式贡献。这是理解该组件能力边界的关键前提它面向的是3D 化后的 Vega 规格这一主场景而不是一个与 Vega 原生 renderer 完全等价的替代品。特性扩展用z/depth编码把矩形变成 3D 立方体README 中最具实用价值的功能扩展是矩形rect图元可以渲染为 3D 立方体。做法是在通常使用x/width、y/height的地方额外添加z/depth编码。底层实现印证了这一设计。在 packages/vega-deck.gl/src/marks/rect.ts 的 mark stager 中每个 rect 场景项被转换为Cube对象size: [item.width, item.height, depth]——宽、高、深三个维度position: [x (item.x || 0), ty * (y (item.y || 0)) - item.height, z]——其中ty -1用于把 SVG 坐标系的 y 轴方向翻转为 WebGL 坐标系y 向下为正 → y 向上为正关键细节2d视图下z与depth强制取0因为对于正交2d视图必须始终使用 0否则 deck.gl 不会显示它们3d视图下深度至少叠加min3dDepth值为0.05见 src/defaults.ts保证立方体有最小可见厚度颜色取自 Vega 场景项的fill透明度取自opacity未定义时默认不透明。也就是说同一份 Vega 规格只需切换相机视角2d/3d矩形图元就能在平面矩形与立体立方体之间切换这正是 SandDance 数据探索体验的核心机制。安装方式一script 标签最快接入这是最快的接入方式既可以从 CDN 加载也可以把脚本托管到自己的网站。在 HTML 中按顺序添加以下三个标签script srchttps://unpkg.com/vega^5.11/build/vega.js charsetutf-8/script script srchttps://unpkg.com/deck.gl~8.3.7/dist.min.js/script script srchttps://unpkg.com/msrvida/vega-deck.gl^3/dist/umd/vega-deck.gl.js/script加载后全局变量VegaDeckGl即可使用。接下来调用use()函数把依赖库传给VegaDeckGlVegaDeckGl.use(vega, deck, deck, luma);注意第二个和第三个参数都是deck分别为 deck.gl/core 与 deck.gl/layers 的 UMD 全局对象第四个参数luma是 luma.gl。安装方式二Node.js / 打包器适用于使用脚本打包器bundler的场景。在package.json的dependencies中加入deck.gl/core: ^8.3.7, deck.gl/layers: ^8.3.7, luma.gl/core: ^8.3.1, msrvida/vega-deck.gl: ^3, vega: ^5.17.0然后执行npm install。在 JavaScript 中按如下方式导入并调用use()import * as deck from deck.gl/core; import * as layers from deck.gl/layers; import * as luma from luma.gl/core; import * as vega from vega; import * as VegaDeckGl from msrvida/vega-deck.gl; VegaDeckGl.use(vega, deck, layers, luma);当前仓库的 packages/vega-deck.gl/package.json 中本包自身的运行时依赖还包括danmarshall/deckgl-typings、msrvida/chart-types、d3-color、d3-ease、deepmerge、tsx-create-element、vega-typings等构建脚本由build-typescripttscbundlerollup两步完成。use() 做了什么依赖注入源码解析从 src/base.ts 可以看到use()的实现非常直白它把传入的四类库引用写入全局base对象export const base: Base { deck, layers, luma, vega }; export function use(vega, deck, layers, luma) { base.deck deck; base.layers layers; base.luma luma; base.vega vega; }其中vega需要满足VegaBase接口包含parse、View、Renderer、renderModule、sceneVisit、scheme、truncate等成员见 src/base.tsdeck需要包含Deck、Layer、OrbitView、OrbitController、LinearInterpolator、LightingEffect等layers需要包含IconLayer、LineLayer、PathLayer、PolygonLayer、TextLayerluma需要包含CubeGeometry、Model、Texture2D用于立方体着色器。这种把重依赖交给使用方在运行时注入的设计是 UMD 与 ES6 两种消费方式能共用的关键类继承如ViewGl继承vega.View发生在执行阶段而非声明阶段从而兼容两种加载形态。核心用法VegaDeckGl.ViewGlVegaDeckGl.ViewGl使用与 Vega 的 View 相同的 API。唯一新增的能力是除了canvas和svg现在可以传入deck.gl作为渲染器类型var view new VegaDeckGl.ViewGl(vega.parse(spec)) .renderer(deck.gl) .initialize(document.querySelector(#vis)) .run();从源码看这条链路是这样工作的src/vega-classes/viewGl.tsViewGl是_ViewGl(runtime, config)工厂函数返回的Vega.View动态子类可通过new关键字实例化第一次调用.renderer(deck.gl)时会通过base.vega.renderModule(deck.gl, { handler: CanvasHandler, renderer: RendererGl })向 Vega 注册一个名为deck.gl的自定义渲染模块viewGl.ts.initialize(el)会先创建一个Presenter若未通过presenterConfig传入并把 Vega 的初始 DOM 挂到 Presenter 内部的vega controls元素上viewGl.ts渲染时RendererGl._render()把 Vega 场景标记上相机类型view再调用presenter.present(scene3d, height, width, presenterConfig)src/vega-classes/rendererGl.ts。因此你的 Vega 规格、数据变换、信号signal逻辑都原样保留只是最终画到屏幕这一步被替换成了 WebGL。ViewGl 与 Presenter 的扩展配置ViewGl除了继承 Vega 的ViewOptions如background、bind、container、hover、loader、logger、logLevel、renderer、tooltip、locale、expr还额外支持ViewGlConfig字段viewGl.tspresenter自定义 Presenter 实例presenterConfigPresenter 配置见下getView返回当前相机视角类型2d/3d的函数。PresenterConfig定义于 src/interfaces.ts提供了一系列可与 deck.gl 交互和自定义的钩子配置项作用transitionDurations过渡动画时长含color、position、size、view四档默认值分别为 100 / 600 / 600 / 600 毫秒见 src/defaults.tspreStage(stage, deckProps)在提交 deck.gl props 前对 Stage / deckProps 做最后修改preLayer(stage)在生成 layers 之前回调onCubeHover/onCubeClick立方体 hover / 点击事件事件对象 CubeonLayerClick(info, e)透传 deck.gl 的 layer 点击PickInfoonLegendClick图例点击onTextClick/onTextHover文本图元点击 / hoverhover 返回 booleangetTextColor/getTextHighlightColor/getTextHighlightAlphaCutoff自定义文本颜色、高亮色与高亮透明度阈值onSceneRectAssignCubeOrdinal为场景矩形分配立方体序号默认自动递增onTargetViewState(height, width)调整目标相机视角状态返回{ height, width, newViewStateTarget? }shouldViewstateTransition()决定是否触发视角过渡动画preserveDrawingBuffer为 true 时以preserveDrawingBuffer: true创建 WebGL 上下文便于截图zAxisZindexz 轴的层级redraw强制重绘回调构造时被绑定到_redrawrun()onPresent每帧呈现完成后回调PresenterStylesrc/interfaces.ts则用于控制外观包括cssPrefix默认vega-deckgl-、defaultCubeColor默认[128, 128, 128, 255]灰色、highlightColor默认黑色、fontFamily。Presenter从 Vega 场景到 deck.gl 渲染的转换器Presentersrc/presenter.ts是本包渲染管线的核心类职责是用 deck.gl 呈现一帧 Stage 数据。它的工作流程可以概括为场景归一化present(sceneOrStage, height, width, config)判断输入是 Vega 场景有marktype还是直接给定的Stage。若是 Vega 场景则调用sceneToStagesrc/stagers.ts把它转换成统一的Stage结构包含cubeData、pathData、polygonData、axes、textData、legend、facets、gridLines、view等字段见 src/interfaces.ts首次创建 Deck 实例用OrbitView OrbitController作为视图LightingEffect提供光照注册双击重置相机homeCamera根据stage.view计算初始viewState——2d视角为rotationX: 90, rotationOrbit: 0, zoom: -0.23d视角为rotationX: 30, rotationOrbit: 25, zoom: -0.4src/viewState.ts立方体数据补齐当maxOrdinal存在时用patchCubeArray把cubeData补齐到最大序号空位用isEmpty: true、颜色透明的占位 Cube 填充presenter.ts构建 layers 并提交getLayers把 Stage 中的立方体、线条、多边形、文本等分别映射为CubeLayer、LineLayer/PathLayer、PolygonLayer、TextLayer等 deck.gl layer若发生了视角/边界变化则通过LinearInterpolator插值target、rotationOrbit、rotationX、zoom见 src/viewState.ts与 easing 配置过渡动画随后requestAnimationFrame中deckgl.setProps提交渲染附加能力rePresent(partialStage)用于只更新局部 Stage如仅改颜色的轻量重绘canvasToDataURL()可把当前帧导出为 PNG需要preserveDrawingBuffer支持showGuides()显示渲染区域辅助线finalize()释放资源。CubeLayersrc/cube-layer/cube-layer.ts是自定义的 deck.gl Layer它基于 luma.glModel GLSL 着色器cube-layer-fragment.glsl.ts/cube-layer-vertex.glsl.ts绘制立方体属性包括lightingMix光照混合系数默认 0.52d时为 0、3d时为 1、getPosition/getSize/getColor访问器以及material: { ambient: 0.5, diffuse: 1 }材质参数并启用project32、gouraudLighting、picking三个 shader module。版本演进与破坏性变更v3README 记录了该组件的版本节奏3.3.0显示 z 轴刻度Show z-axis scale3.2.0修复动画缓动animation easing文本字符集支持全部 Unicode3.1.0新增 line线与 area区域图元支持。v3 相对早期版本的破坏性变更包括Stage.TickText现在为VegaTextLayerDatum类型该类型定义见 src/interfaces.ts含color、text、position、size、angle、textAnchor、alignmentBaseline、metaDataView类型被删除util.isColor函数被删除。如果你从更早的 2.x 版本迁移需要按上述清单调整代码。在 SandDance 仓库中继续探索如果你想看这个组件被真实消费的样子可以参考以下仓库内的线索打包与部署脚本packages/vega-deck.gl/scripts/deploy.jsUMD 打包配置packages/vega-deck.gl/rollup.config.mjs外部依赖别名deck / luma / react 的外部化packages/vega-deck.gl/alias/deck-external.js 等基于它之上的测试页面如 packages/vega-morphcharts/test/vegaspec/vega-deck.gl.test.html以及 docs/tests/v4/umd/vega-morphcharts.test.html在 SandDance 渲染栈中的下一层vega-morphchartspackages/vega-morphcharts与vega-deck.gl一脉相承后者也在其源码中大量复用本包的 Presenter 与 Stage 数据结构。小结msrvida/vega-deck.gl通过依赖注入 自定义 Vega 渲染模块 Presenter/Stage 管线三个层次把 Vega 的声明式规格无缝衔接到了 deck.gl 的 WebGL 渲染上并额外提供了z/depth编码让矩形直接升维成立方体。无论你是通过 CDN 快速原型还是在 bundler 工程中深度集成只要记住两条主线——先use()注入 vega/deck/layers/luma再用ViewGl以deck.gl渲染器运行规格——就能快速上手。赞分享数据可视化数据分析前端【免费下载链接】SandDanceVisually explore, understand, and present your data.项目地址https://gitcode.com/gh_mirrors/sa/SandDance点击查看免费下载相关推荐RATH可视化渲染技术vega-scenegraph与WebGL渲染器详解RATH可视化渲染技术vega scenegraph与WebGL渲染器详解 RATHReveal the Answer to the Truth是一个开源数据分析数据可视化BI机器学习用 Zola docsascode 主题构建 Docs-as-Code 知识库从内容结构到 Docker 部署全指南用 Zola docsascode 主题构建 Docs as Code 知识库从内容结构到 Docker 部署全指南 本文以 Zola 官方主题库中的 doc数据可视化数据分析前端JupyterLab vega5-extension 完全指南Vega 5 与 Vega-Lite 3 至 5 的可视化渲染JupyterLab vega5 extension 完全指南Vega 5 与 Vega Lite 3 至 5 的可视化渲染 JupyterLab 内置的 v前端后端数据科学开发工具上一篇CodeXGLUE代码搜索系统构建从自然语言查询到精准代码匹配下一篇EloquentFilter入门指南如何在5分钟内简化Laravel模型过滤创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 @msrvida/vega-deck.gl 构建 Vega 3D 可视化：安装、接入与 WebGL 渲染原理
数据可视化数据分析前端【免费下载链接】SandDanceVisually explore, understand, and present your data.项目地址https://gitcode.com/gh_mirrors/sa/SandDance点击查看免费下载msrvida/vega-deck.gl是 SandDance 项目中负责把 Vega 可视化规格交给 deck.gl 做 WebGL 渲染的核心视图组件。它让你用 Vega 声明式规格的表现力换取 deck.gl 的 GPU 渲染能力从而直接支持 3 维数据可视化。读完本文你将掌握两种安装方式CDN script 标签与 Node.js 打包接入、use()依赖注入的机制、ViewGl的用法以及矩形变立方体的z/depth编码扩展与底层 Presenter 渲染管线。说明本文基于当前仓库packages/vega-deck.gl目录当前版本 3.3.6编写文中所有源码路径均以仓库根目录为起点。组件定位Vega 的表达力 deck.gl 的 WebGL 渲染该项目在 README 中对自己的定位是View component for Vega visualizations, using deck.gl for WebGL rendering。它将两个优秀的可视化库合二为一一方面完整继承 Vega 规格的声明式表达能力数据、缩放、坐标、图元都能用 JSON 规格描述另一方面把最终绘制交给 deck.gl 的 WebGL 管线因此可以把数据可视化到3 个维度。在 SandDance 整体架构中它处于渲染底座的位置。从仓库入口文件 packages/vega-deck.gl/src/index.ts 可以看到该包对外导出以下核心内容base/use依赖注入机制来自 src/base.tsPresenter负责用 deck.gl 呈现一帧舞台Stage数据src/presenter.tsViewGlVega.View 的子类新增.renderer(deck.gl)渲染器src/vega-classes/viewGl.tsconstants、controls、defaults、types、util等工具模块以及 deck.gl 的DeckProps、PickInfo、Position、RGBAColor类型再导出。已知限制并未完整实现 Vega 全部特性README 明确声明本项目没有完整实现 Vega 提供的每一项特性。部分交互特性因为 3D 渲染模型与 2D 渲染平面之间的对应关系被打破而被省略例如某些依赖 2D 平面坐标系的交互另一些特性则尚未开发完成项目方欢迎以 pull request 的形式贡献。这是理解该组件能力边界的关键前提它面向的是3D 化后的 Vega 规格这一主场景而不是一个与 Vega 原生 renderer 完全等价的替代品。特性扩展用z/depth编码把矩形变成 3D 立方体README 中最具实用价值的功能扩展是矩形rect图元可以渲染为 3D 立方体。做法是在通常使用x/width、y/height的地方额外添加z/depth编码。底层实现印证了这一设计。在 packages/vega-deck.gl/src/marks/rect.ts 的 mark stager 中每个 rect 场景项被转换为Cube对象size: [item.width, item.height, depth]——宽、高、深三个维度position: [x (item.x || 0), ty * (y (item.y || 0)) - item.height, z]——其中ty -1用于把 SVG 坐标系的 y 轴方向翻转为 WebGL 坐标系y 向下为正 → y 向上为正关键细节2d视图下z与depth强制取0因为对于正交2d视图必须始终使用 0否则 deck.gl 不会显示它们3d视图下深度至少叠加min3dDepth值为0.05见 src/defaults.ts保证立方体有最小可见厚度颜色取自 Vega 场景项的fill透明度取自opacity未定义时默认不透明。也就是说同一份 Vega 规格只需切换相机视角2d/3d矩形图元就能在平面矩形与立体立方体之间切换这正是 SandDance 数据探索体验的核心机制。安装方式一script 标签最快接入这是最快的接入方式既可以从 CDN 加载也可以把脚本托管到自己的网站。在 HTML 中按顺序添加以下三个标签script srchttps://unpkg.com/vega^5.11/build/vega.js charsetutf-8/script script srchttps://unpkg.com/deck.gl~8.3.7/dist.min.js/script script srchttps://unpkg.com/msrvida/vega-deck.gl^3/dist/umd/vega-deck.gl.js/script加载后全局变量VegaDeckGl即可使用。接下来调用use()函数把依赖库传给VegaDeckGlVegaDeckGl.use(vega, deck, deck, luma);注意第二个和第三个参数都是deck分别为 deck.gl/core 与 deck.gl/layers 的 UMD 全局对象第四个参数luma是 luma.gl。安装方式二Node.js / 打包器适用于使用脚本打包器bundler的场景。在package.json的dependencies中加入deck.gl/core: ^8.3.7, deck.gl/layers: ^8.3.7, luma.gl/core: ^8.3.1, msrvida/vega-deck.gl: ^3, vega: ^5.17.0然后执行npm install。在 JavaScript 中按如下方式导入并调用use()import * as deck from deck.gl/core; import * as layers from deck.gl/layers; import * as luma from luma.gl/core; import * as vega from vega; import * as VegaDeckGl from msrvida/vega-deck.gl; VegaDeckGl.use(vega, deck, layers, luma);当前仓库的 packages/vega-deck.gl/package.json 中本包自身的运行时依赖还包括danmarshall/deckgl-typings、msrvida/chart-types、d3-color、d3-ease、deepmerge、tsx-create-element、vega-typings等构建脚本由build-typescripttscbundlerollup两步完成。use() 做了什么依赖注入源码解析从 src/base.ts 可以看到use()的实现非常直白它把传入的四类库引用写入全局base对象export const base: Base { deck, layers, luma, vega }; export function use(vega, deck, layers, luma) { base.deck deck; base.layers layers; base.luma luma; base.vega vega; }其中vega需要满足VegaBase接口包含parse、View、Renderer、renderModule、sceneVisit、scheme、truncate等成员见 src/base.tsdeck需要包含Deck、Layer、OrbitView、OrbitController、LinearInterpolator、LightingEffect等layers需要包含IconLayer、LineLayer、PathLayer、PolygonLayer、TextLayerluma需要包含CubeGeometry、Model、Texture2D用于立方体着色器。这种把重依赖交给使用方在运行时注入的设计是 UMD 与 ES6 两种消费方式能共用的关键类继承如ViewGl继承vega.View发生在执行阶段而非声明阶段从而兼容两种加载形态。核心用法VegaDeckGl.ViewGlVegaDeckGl.ViewGl使用与 Vega 的 View 相同的 API。唯一新增的能力是除了canvas和svg现在可以传入deck.gl作为渲染器类型var view new VegaDeckGl.ViewGl(vega.parse(spec)) .renderer(deck.gl) .initialize(document.querySelector(#vis)) .run();从源码看这条链路是这样工作的src/vega-classes/viewGl.tsViewGl是_ViewGl(runtime, config)工厂函数返回的Vega.View动态子类可通过new关键字实例化第一次调用.renderer(deck.gl)时会通过base.vega.renderModule(deck.gl, { handler: CanvasHandler, renderer: RendererGl })向 Vega 注册一个名为deck.gl的自定义渲染模块viewGl.ts.initialize(el)会先创建一个Presenter若未通过presenterConfig传入并把 Vega 的初始 DOM 挂到 Presenter 内部的vega controls元素上viewGl.ts渲染时RendererGl._render()把 Vega 场景标记上相机类型view再调用presenter.present(scene3d, height, width, presenterConfig)src/vega-classes/rendererGl.ts。因此你的 Vega 规格、数据变换、信号signal逻辑都原样保留只是最终画到屏幕这一步被替换成了 WebGL。ViewGl 与 Presenter 的扩展配置ViewGl除了继承 Vega 的ViewOptions如background、bind、container、hover、loader、logger、logLevel、renderer、tooltip、locale、expr还额外支持ViewGlConfig字段viewGl.tspresenter自定义 Presenter 实例presenterConfigPresenter 配置见下getView返回当前相机视角类型2d/3d的函数。PresenterConfig定义于 src/interfaces.ts提供了一系列可与 deck.gl 交互和自定义的钩子配置项作用transitionDurations过渡动画时长含color、position、size、view四档默认值分别为 100 / 600 / 600 / 600 毫秒见 src/defaults.tspreStage(stage, deckProps)在提交 deck.gl props 前对 Stage / deckProps 做最后修改preLayer(stage)在生成 layers 之前回调onCubeHover/onCubeClick立方体 hover / 点击事件事件对象 CubeonLayerClick(info, e)透传 deck.gl 的 layer 点击PickInfoonLegendClick图例点击onTextClick/onTextHover文本图元点击 / hoverhover 返回 booleangetTextColor/getTextHighlightColor/getTextHighlightAlphaCutoff自定义文本颜色、高亮色与高亮透明度阈值onSceneRectAssignCubeOrdinal为场景矩形分配立方体序号默认自动递增onTargetViewState(height, width)调整目标相机视角状态返回{ height, width, newViewStateTarget? }shouldViewstateTransition()决定是否触发视角过渡动画preserveDrawingBuffer为 true 时以preserveDrawingBuffer: true创建 WebGL 上下文便于截图zAxisZindexz 轴的层级redraw强制重绘回调构造时被绑定到_redrawrun()onPresent每帧呈现完成后回调PresenterStylesrc/interfaces.ts则用于控制外观包括cssPrefix默认vega-deckgl-、defaultCubeColor默认[128, 128, 128, 255]灰色、highlightColor默认黑色、fontFamily。Presenter从 Vega 场景到 deck.gl 渲染的转换器Presentersrc/presenter.ts是本包渲染管线的核心类职责是用 deck.gl 呈现一帧 Stage 数据。它的工作流程可以概括为场景归一化present(sceneOrStage, height, width, config)判断输入是 Vega 场景有marktype还是直接给定的Stage。若是 Vega 场景则调用sceneToStagesrc/stagers.ts把它转换成统一的Stage结构包含cubeData、pathData、polygonData、axes、textData、legend、facets、gridLines、view等字段见 src/interfaces.ts首次创建 Deck 实例用OrbitView OrbitController作为视图LightingEffect提供光照注册双击重置相机homeCamera根据stage.view计算初始viewState——2d视角为rotationX: 90, rotationOrbit: 0, zoom: -0.23d视角为rotationX: 30, rotationOrbit: 25, zoom: -0.4src/viewState.ts立方体数据补齐当maxOrdinal存在时用patchCubeArray把cubeData补齐到最大序号空位用isEmpty: true、颜色透明的占位 Cube 填充presenter.ts构建 layers 并提交getLayers把 Stage 中的立方体、线条、多边形、文本等分别映射为CubeLayer、LineLayer/PathLayer、PolygonLayer、TextLayer等 deck.gl layer若发生了视角/边界变化则通过LinearInterpolator插值target、rotationOrbit、rotationX、zoom见 src/viewState.ts与 easing 配置过渡动画随后requestAnimationFrame中deckgl.setProps提交渲染附加能力rePresent(partialStage)用于只更新局部 Stage如仅改颜色的轻量重绘canvasToDataURL()可把当前帧导出为 PNG需要preserveDrawingBuffer支持showGuides()显示渲染区域辅助线finalize()释放资源。CubeLayersrc/cube-layer/cube-layer.ts是自定义的 deck.gl Layer它基于 luma.glModel GLSL 着色器cube-layer-fragment.glsl.ts/cube-layer-vertex.glsl.ts绘制立方体属性包括lightingMix光照混合系数默认 0.52d时为 0、3d时为 1、getPosition/getSize/getColor访问器以及material: { ambient: 0.5, diffuse: 1 }材质参数并启用project32、gouraudLighting、picking三个 shader module。版本演进与破坏性变更v3README 记录了该组件的版本节奏3.3.0显示 z 轴刻度Show z-axis scale3.2.0修复动画缓动animation easing文本字符集支持全部 Unicode3.1.0新增 line线与 area区域图元支持。v3 相对早期版本的破坏性变更包括Stage.TickText现在为VegaTextLayerDatum类型该类型定义见 src/interfaces.ts含color、text、position、size、angle、textAnchor、alignmentBaseline、metaDataView类型被删除util.isColor函数被删除。如果你从更早的 2.x 版本迁移需要按上述清单调整代码。在 SandDance 仓库中继续探索如果你想看这个组件被真实消费的样子可以参考以下仓库内的线索打包与部署脚本packages/vega-deck.gl/scripts/deploy.jsUMD 打包配置packages/vega-deck.gl/rollup.config.mjs外部依赖别名deck / luma / react 的外部化packages/vega-deck.gl/alias/deck-external.js 等基于它之上的测试页面如 packages/vega-morphcharts/test/vegaspec/vega-deck.gl.test.html以及 docs/tests/v4/umd/vega-morphcharts.test.html在 SandDance 渲染栈中的下一层vega-morphchartspackages/vega-morphcharts与vega-deck.gl一脉相承后者也在其源码中大量复用本包的 Presenter 与 Stage 数据结构。小结msrvida/vega-deck.gl通过依赖注入 自定义 Vega 渲染模块 Presenter/Stage 管线三个层次把 Vega 的声明式规格无缝衔接到了 deck.gl 的 WebGL 渲染上并额外提供了z/depth编码让矩形直接升维成立方体。无论你是通过 CDN 快速原型还是在 bundler 工程中深度集成只要记住两条主线——先use()注入 vega/deck/layers/luma再用ViewGl以deck.gl渲染器运行规格——就能快速上手。赞分享数据可视化数据分析前端【免费下载链接】SandDanceVisually explore, understand, and present your data.项目地址https://gitcode.com/gh_mirrors/sa/SandDance点击查看免费下载相关推荐RATH可视化渲染技术vega-scenegraph与WebGL渲染器详解RATH可视化渲染技术vega scenegraph与WebGL渲染器详解 RATHReveal the Answer to the Truth是一个开源数据分析数据可视化BI机器学习用 Zola docsascode 主题构建 Docs-as-Code 知识库从内容结构到 Docker 部署全指南用 Zola docsascode 主题构建 Docs as Code 知识库从内容结构到 Docker 部署全指南 本文以 Zola 官方主题库中的 doc数据可视化数据分析前端JupyterLab vega5-extension 完全指南Vega 5 与 Vega-Lite 3 至 5 的可视化渲染JupyterLab vega5 extension 完全指南Vega 5 与 Vega Lite 3 至 5 的可视化渲染 JupyterLab 内置的 v前端后端数据科学开发工具上一篇CodeXGLUE代码搜索系统构建从自然语言查询到精准代码匹配下一篇EloquentFilter入门指南如何在5分钟内简化Laravel模型过滤创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考