数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载本文基于 Vega-Lite 官方教程「Streaming Data」编写讲解如何在 Vega-Lite 可视化中持续追加新数据、按条件剔除旧数据实现类似实时行情、滚动监控图的流式更新效果。你将掌握三个核心能力在 Vega-Lite spec 中声明具名数据源named data、借助 Vega 运行时提供的view.change(...).run()完成数据增删、以及通过autosize/view.resize解决数据更新后图表布局不刷新的问题。全部内容均可对照当前仓库 streaming.md 教程、站点示例代码 与 data 源码 逐行验证。前置准备先理解 Vega-Lite 与 Vega 的运行时关系Vega-Lite 是一种声明式可视化语法它本身只负责把高层 spec 编译成低层 Vega spec。真正执行渲染、管理数据流与交互的是Vega 运行时。因此要在渲染完成后往图表里“塞”数据需要越过 Vega-Lite 层直接调用 Vega 的View API——也就是本教程的主角view.change。如果还不熟悉 Vega-Lite 的基本写法建议先阅读仓库内的入门教程 getting_started.md。在 Vega 中数据既可以由交互interactions驱动更新也可以由我们直接在代码中指定数据变更。无论哪种方式数据都会经过 Vega 运行时统一推送处理以获得经过优化的执行性能。本教程聚焦后一种方式不依赖任何用户交互纯靠外部数据流入驱动图表变化。第一步在 spec 中用name声明具名数据源view.change的第一个参数是数据源的名称这个名称必须在原始 spec 中预先声明。Vega-Lite 的数据定义支持三类来源内联数据values、URL 加载url与具名数据源name参见 site/docs/data.md 中的「Named」小节。其中具名数据源正是为“运行时绑定数据”设计的占位符{ data: { name: myData } }这种写法的类型定义可以在源码中直接找到。在 src/data.ts 中NamedData接口只要求一个name字段export interface NamedData extends DataBase { /** * Provide a placeholder name and bind data at runtime. */ name: string; }同时src/data.ts 中的isNamedData判别函数明确只要数据对象没有url、values也不是生成器generator且带有name属性就属于具名数据源export function isNamedData(data: PartialData | PartialVgData): data is NamedData { return hasProperty(data, name) !isUrlData(data) !isInlineData(data) !isGenerator(data); }具名数据源在编译期会被原样保留而不是像内联数据那样直接烘焙进 spec。在 src/compile/data/assemble.ts 中可以看到注释明确说明对于具名数据源或带values的数据源需要放进独立的数据源否则 Vega 可能会覆盖数据——这正是view.change能按名寻址、安全增删数据的前提。第二步掌握view.change与vega.changesetview.change的完整调用形如view.change(数据源名称, changeset).run();第一个参数spec 中声明的数据源名称如table第二个参数一个changeset变更集描述“要新增什么、要移除什么”.run()真正把变更应用到 view 并触发重绘。changeset 由vega.changeset()构造支持两种数据操作insert新增直接传入与既有数据 schema 一致的数据条目数组。就本教程的示例而言每条数据的结构是{ x: number, y: number, category: number }remove移除两种方式任选其一像 insert 一样直接传入要删除的具体数据点要求你在外部自行保存这些数据传入一个谓词函数predicate按属性过滤掉已渲染的数据。例如function (t) { return t.x minimumX; }含义是“把所有x小于minimumX的数据点移除”。如果你熟悉 D3会发现这个 insert remove 的组合与 D3 经典的 enter / exit 数据绑定模式非常相似旧数据退出、新数据进入两者由运行时在同一个渲染周期内完成协调。把两者拼起来一次完整的流式更新就是var changeSet vega .changeset() .insert(valueGenerator()) .remove(function (t) { return t.x minimumX; }); view.change(table, changeSet).run();view从哪里来vega-embed 的返回值上述view对象来自vega-embed的embed()方法它负责把 Vega / Vega-Lite spec 加载到你的网页上。当embed成功完成后它返回一个 resolvefulfilled的 Promise其结果对象包含view编译后 Vega spec 的视图实例也就是我们能调用view.change的对象spec由原始 Vega-Lite spec 编译得到的 Vega spec。当embed失败时则返回一个 rejectrejected的 Promise携带错误对象。本教程完整代码中正是通过.then(function (res) { res.view.change(...) })拿到 view 的。第三步完整可运行的流式折线图示例下面是在 HTML 页面中可直接运行的完整 JavaScript 代码。请确保页面中存在一个id为chart的 div 容器div idchart/divvar vlSpec { $schema: https://vega.github.io/schema/vega-lite/v6.json, data: {name: table}, width: 400, mark: line, encoding: { x: {field: x, type: quantitative, scale: {zero: false}}, y: {field: y, type: quantitative}, color: {field: category, type: nominal}, }, }; vegaEmbed(#chart, vlSpec).then(function (res) { /** * Generates a new tuple with random walk. */ function newGenerator() { var counter -1; var previousY [5, 5, 5, 5]; return function () { counter; var newVals previousY.map(function (v, c) { return { x: counter, y: v Math.round(Math.random() * 10 - c * 3), category: c, }; }); previousY newVals.map(function (v) { return v.y; }); return newVals; }; } var valueGenerator newGenerator(); var minimumX -100; window.setInterval(function () { minimumX; var changeSet vega .changeset() .insert(valueGenerator()) .remove(function (t) { return t.x minimumX; }); res.view.change(table, changeSet).run(); }, 1000); });代码逐段拆解spec 部分data: {name: table}声明了一个名为table的空数据源之后所有数据都由运行时注入width: 400固定画布宽度mark: line绘制折线编码层把x作为定量横轴scale: {zero: false}避免强制包含零刻度y作为定量纵轴category作为名义颜色通道——于是四条 category 对应四条不同颜色的随机游走曲线。数据生成器newGenerator维护一个计数器counter与上一轮的previousY数组每次调用生成一组新元组x递增y基于上一轮数值加上随机步长每条曲线的漂移系数c * 3各不相同category取 0~3。这模拟了“每隔一秒到达一批实时数据”。定时器驱动window.setInterval(..., 1000)每秒钟执行一次先令minimumX滚动窗口左边界右移再构造 changeset——插入新一批数据、移除所有x minimumX的旧数据最后res.view.change(table, changeSet).run()一次性提交变更。窗口内的数据始终只保留最近约 100 个时间点图表呈现“数据向右滚动、旧数据从左侧退出”的实时效果。数据来源的替换从模拟到真实教程里用window.setInterval 随机数生成器来模拟实时数据纯粹是为了演示的简便。在实际生产场景中你完全可以把valueGenerator()的调用替换为服务器数据请求例如每隔一秒发起一次 HTTP 轮询、或通过 WebSocket / Server-Sent EventsSSE推送最新一批元组再把返回的数组交给.insert(...)谓词删除逻辑保持不变。也就是说本教程展示的是“数据流入—变更集—重绘”这条通用管道与数据到底来自哪一端无关。第四步解决数据更新后布局不刷新的问题autosize这是一个非常容易踩的坑新数据的到来可能改变布局但 Vega 出于性能优化并不会总是自动重算并调整图表尺寸。典型症状是——数据增多后坐标轴被裁剪clipped off标签跑到画布外。原因在 site/docs/view/size.md 中有明确说明默认情况下Vega-Lite 不会在每次 view change 时重新计算布局。方案一在 spec 中配置autosize在 spec 顶层配置autosize让 Vega 在数据变化时自动调整尺寸。Vega-Lite 的autosize支持三种类型详见 site/docs/view/size.md#autosize 的AutoSizeParams表取值行为none不做任何自动缩放总尺寸只由width、height、padding决定越界内容会被裁剪pad自动扩大视图使所有内容可见这是默认设置总尺寸通常会超过设定的宽高fit/fit-x/fit-y调整布局强制适配给定尺寸绘图区可能被压缩以容纳轴、图例与标题除了typeautosize还可以是一个对象例如配置resize: true{ autosize: { type: pad, resize: true } }resize: true表示在数据变更后允许重新计算布局与尺寸。值得注意的限制是fit系列不能与显式指定step的离散比例尺共存——如果离散尺度有显式stepfit对应方向会被降级为pad并输出一条 warning 日志这条逻辑写在编译管线 src/compile/compile.ts 的getTopLevelProperties中。更有说服力的证据是本仓库站点实际运行的流式示例 site/static/streaming.ts正是在 spec 里显式加入了autosize: {resize: true}——这说明官方在真实页面中正是靠它保证数据滚动时图表能正确扩张、轴不被裁切const vlSpec: TopLevelSpec { $schema: https://vega.github.io/schema/vega-lite/v6.json, data: {name: table}, autosize: { resize: true, }, width: 400, mark: line, encoding: { x: {field: x, type: quantitative, scale: {zero: false}}, y: {field: y, type: quantitative}, color: {field: category, type: nominal}, }, };方案二在数据更新后手动调用view.resize()如果你不想改 spec也可以保留默认 autosize在每次view.change(...).run()之后显式调用view.resize().run()强制重算布局。这相当于把“何时重排”的控制权交还给代码。从编译实现角度看autosize之所以默认偏保守是为了性能让 Vega-Lite 在每个 view change 上都重排布局代价高昂。这个权衡同时体现在编译期默认值处理上——src/compile/compile.ts 显示当 spec 未指定autosize时默认取{type: pad}仅当坐标轴方向存在 signal 引用时才会额外带上resize: true。站点实际运行的对照版本仓库站点把教程示例实现为 TypeScript 模块 site/static/streaming.ts并在 site/static/index.ts 中以window[runStreamingExample]注册为全局函数由 streaming.md 页面底部的script标签在window.onload时调用。它的逻辑与教程 JS 版完全一致区别仅在于使用view对象上的changeset()方法view.changeset()与全局vega.changeset()等价、类型标注为 TypeScript、并已内置autosize: {resize: true}。当你需要把示例工程化时可直接以该文件为蓝本let minimumX -100; window.setInterval(() { minimumX; const changeSet view .changeset() .insert(valueGenerator()) .remove((t: {x: number}) t.x minimumX); view.change(table, changeSet).run(); }, 1000);扩展从流式更新到 WebSocket 实时大屏本教程演示的“定时器 随机游走”数据生成本质上与真实实时系统的数据接入点一一对应数据到达WebSocket 消息、SSE 事件或轮询响应中解析出新元组数组变更集构造.insert(newTuples)追加新数据.remove(predicate)按时间窗口 / 过期策略清理旧数据提交重绘view.change(table, changeSet).run()一次性应用必要时配合autosize.resize或view.resize()修复布局。保持数据源名称与 spec 中data.name一致、保证每条元组的字段结构与编码字段匹配即可把任何实时数据流接到 Vega-Lite 图表上。更多可视化效果可浏览仓库 examples/specs 目录下的 819 份示例 spec如需深入定制图表可继续阅读 site/docs 下的完整文档。小结通过本教程你已经走通了一条完整的 Vega-Lite 流式数据链路用data: {name: table}声明具名数据源为运行时数据绑定留好接口对应源码 src/data.ts 的NamedData通过vega.changeset().insert(...).remove(predicate)构造增删变更集通过view.change(table, changeSet).run()提交变更view来自vegaEmbed(#chart, spec)成功后的返回结果用autosize: {resize: true}或view.resize()解决数据增长后图表布局不刷新、坐标轴被裁剪的问题。把随机数生成器换成 WebSocket / 服务器轮询即可将同样的代码迁移到真实实时场景。赞分享数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载相关推荐Magisk 完整上手指南如何快速给 Android 设备获取 Root 权限Magisk 完整上手指南如何快速给 Android 设备获取 Root 权限 Magisk 是一款面向 Android 设备的开源 Root 方案支持 A移动开发系统底层Vega-Lite海洋数据可视化洋流、温度与盐度分析图表Vega Lite海洋数据可视化洋流、温度与盐度分析图表 引言海洋数据可视化的挑战与解决方案 海洋科学家、气候研究者和环境工程师经常需要处理海量多维海洋数据数据可视化Vega View API 完全指南实例化、配置、交互与图像导出的数据流视图组件Vega View API 完全指南实例化、配置、交互与图像导出的数据流视图组件 View 是 Vega 可视化语法体系中负责实例化数据流dataflow数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/12 18:36:24 · 阅读 1.2k Vega-Lite 实时数据流式更新实战：用 Vega View API 的 view.change 向图表推送数据
数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载本文基于 Vega-Lite 官方教程「Streaming Data」编写讲解如何在 Vega-Lite 可视化中持续追加新数据、按条件剔除旧数据实现类似实时行情、滚动监控图的流式更新效果。你将掌握三个核心能力在 Vega-Lite spec 中声明具名数据源named data、借助 Vega 运行时提供的view.change(...).run()完成数据增删、以及通过autosize/view.resize解决数据更新后图表布局不刷新的问题。全部内容均可对照当前仓库 streaming.md 教程、站点示例代码 与 data 源码 逐行验证。前置准备先理解 Vega-Lite 与 Vega 的运行时关系Vega-Lite 是一种声明式可视化语法它本身只负责把高层 spec 编译成低层 Vega spec。真正执行渲染、管理数据流与交互的是Vega 运行时。因此要在渲染完成后往图表里“塞”数据需要越过 Vega-Lite 层直接调用 Vega 的View API——也就是本教程的主角view.change。如果还不熟悉 Vega-Lite 的基本写法建议先阅读仓库内的入门教程 getting_started.md。在 Vega 中数据既可以由交互interactions驱动更新也可以由我们直接在代码中指定数据变更。无论哪种方式数据都会经过 Vega 运行时统一推送处理以获得经过优化的执行性能。本教程聚焦后一种方式不依赖任何用户交互纯靠外部数据流入驱动图表变化。第一步在 spec 中用name声明具名数据源view.change的第一个参数是数据源的名称这个名称必须在原始 spec 中预先声明。Vega-Lite 的数据定义支持三类来源内联数据values、URL 加载url与具名数据源name参见 site/docs/data.md 中的「Named」小节。其中具名数据源正是为“运行时绑定数据”设计的占位符{ data: { name: myData } }这种写法的类型定义可以在源码中直接找到。在 src/data.ts 中NamedData接口只要求一个name字段export interface NamedData extends DataBase { /** * Provide a placeholder name and bind data at runtime. */ name: string; }同时src/data.ts 中的isNamedData判别函数明确只要数据对象没有url、values也不是生成器generator且带有name属性就属于具名数据源export function isNamedData(data: PartialData | PartialVgData): data is NamedData { return hasProperty(data, name) !isUrlData(data) !isInlineData(data) !isGenerator(data); }具名数据源在编译期会被原样保留而不是像内联数据那样直接烘焙进 spec。在 src/compile/data/assemble.ts 中可以看到注释明确说明对于具名数据源或带values的数据源需要放进独立的数据源否则 Vega 可能会覆盖数据——这正是view.change能按名寻址、安全增删数据的前提。第二步掌握view.change与vega.changesetview.change的完整调用形如view.change(数据源名称, changeset).run();第一个参数spec 中声明的数据源名称如table第二个参数一个changeset变更集描述“要新增什么、要移除什么”.run()真正把变更应用到 view 并触发重绘。changeset 由vega.changeset()构造支持两种数据操作insert新增直接传入与既有数据 schema 一致的数据条目数组。就本教程的示例而言每条数据的结构是{ x: number, y: number, category: number }remove移除两种方式任选其一像 insert 一样直接传入要删除的具体数据点要求你在外部自行保存这些数据传入一个谓词函数predicate按属性过滤掉已渲染的数据。例如function (t) { return t.x minimumX; }含义是“把所有x小于minimumX的数据点移除”。如果你熟悉 D3会发现这个 insert remove 的组合与 D3 经典的 enter / exit 数据绑定模式非常相似旧数据退出、新数据进入两者由运行时在同一个渲染周期内完成协调。把两者拼起来一次完整的流式更新就是var changeSet vega .changeset() .insert(valueGenerator()) .remove(function (t) { return t.x minimumX; }); view.change(table, changeSet).run();view从哪里来vega-embed 的返回值上述view对象来自vega-embed的embed()方法它负责把 Vega / Vega-Lite spec 加载到你的网页上。当embed成功完成后它返回一个 resolvefulfilled的 Promise其结果对象包含view编译后 Vega spec 的视图实例也就是我们能调用view.change的对象spec由原始 Vega-Lite spec 编译得到的 Vega spec。当embed失败时则返回一个 rejectrejected的 Promise携带错误对象。本教程完整代码中正是通过.then(function (res) { res.view.change(...) })拿到 view 的。第三步完整可运行的流式折线图示例下面是在 HTML 页面中可直接运行的完整 JavaScript 代码。请确保页面中存在一个id为chart的 div 容器div idchart/divvar vlSpec { $schema: https://vega.github.io/schema/vega-lite/v6.json, data: {name: table}, width: 400, mark: line, encoding: { x: {field: x, type: quantitative, scale: {zero: false}}, y: {field: y, type: quantitative}, color: {field: category, type: nominal}, }, }; vegaEmbed(#chart, vlSpec).then(function (res) { /** * Generates a new tuple with random walk. */ function newGenerator() { var counter -1; var previousY [5, 5, 5, 5]; return function () { counter; var newVals previousY.map(function (v, c) { return { x: counter, y: v Math.round(Math.random() * 10 - c * 3), category: c, }; }); previousY newVals.map(function (v) { return v.y; }); return newVals; }; } var valueGenerator newGenerator(); var minimumX -100; window.setInterval(function () { minimumX; var changeSet vega .changeset() .insert(valueGenerator()) .remove(function (t) { return t.x minimumX; }); res.view.change(table, changeSet).run(); }, 1000); });代码逐段拆解spec 部分data: {name: table}声明了一个名为table的空数据源之后所有数据都由运行时注入width: 400固定画布宽度mark: line绘制折线编码层把x作为定量横轴scale: {zero: false}避免强制包含零刻度y作为定量纵轴category作为名义颜色通道——于是四条 category 对应四条不同颜色的随机游走曲线。数据生成器newGenerator维护一个计数器counter与上一轮的previousY数组每次调用生成一组新元组x递增y基于上一轮数值加上随机步长每条曲线的漂移系数c * 3各不相同category取 0~3。这模拟了“每隔一秒到达一批实时数据”。定时器驱动window.setInterval(..., 1000)每秒钟执行一次先令minimumX滚动窗口左边界右移再构造 changeset——插入新一批数据、移除所有x minimumX的旧数据最后res.view.change(table, changeSet).run()一次性提交变更。窗口内的数据始终只保留最近约 100 个时间点图表呈现“数据向右滚动、旧数据从左侧退出”的实时效果。数据来源的替换从模拟到真实教程里用window.setInterval 随机数生成器来模拟实时数据纯粹是为了演示的简便。在实际生产场景中你完全可以把valueGenerator()的调用替换为服务器数据请求例如每隔一秒发起一次 HTTP 轮询、或通过 WebSocket / Server-Sent EventsSSE推送最新一批元组再把返回的数组交给.insert(...)谓词删除逻辑保持不变。也就是说本教程展示的是“数据流入—变更集—重绘”这条通用管道与数据到底来自哪一端无关。第四步解决数据更新后布局不刷新的问题autosize这是一个非常容易踩的坑新数据的到来可能改变布局但 Vega 出于性能优化并不会总是自动重算并调整图表尺寸。典型症状是——数据增多后坐标轴被裁剪clipped off标签跑到画布外。原因在 site/docs/view/size.md 中有明确说明默认情况下Vega-Lite 不会在每次 view change 时重新计算布局。方案一在 spec 中配置autosize在 spec 顶层配置autosize让 Vega 在数据变化时自动调整尺寸。Vega-Lite 的autosize支持三种类型详见 site/docs/view/size.md#autosize 的AutoSizeParams表取值行为none不做任何自动缩放总尺寸只由width、height、padding决定越界内容会被裁剪pad自动扩大视图使所有内容可见这是默认设置总尺寸通常会超过设定的宽高fit/fit-x/fit-y调整布局强制适配给定尺寸绘图区可能被压缩以容纳轴、图例与标题除了typeautosize还可以是一个对象例如配置resize: true{ autosize: { type: pad, resize: true } }resize: true表示在数据变更后允许重新计算布局与尺寸。值得注意的限制是fit系列不能与显式指定step的离散比例尺共存——如果离散尺度有显式stepfit对应方向会被降级为pad并输出一条 warning 日志这条逻辑写在编译管线 src/compile/compile.ts 的getTopLevelProperties中。更有说服力的证据是本仓库站点实际运行的流式示例 site/static/streaming.ts正是在 spec 里显式加入了autosize: {resize: true}——这说明官方在真实页面中正是靠它保证数据滚动时图表能正确扩张、轴不被裁切const vlSpec: TopLevelSpec { $schema: https://vega.github.io/schema/vega-lite/v6.json, data: {name: table}, autosize: { resize: true, }, width: 400, mark: line, encoding: { x: {field: x, type: quantitative, scale: {zero: false}}, y: {field: y, type: quantitative}, color: {field: category, type: nominal}, }, };方案二在数据更新后手动调用view.resize()如果你不想改 spec也可以保留默认 autosize在每次view.change(...).run()之后显式调用view.resize().run()强制重算布局。这相当于把“何时重排”的控制权交还给代码。从编译实现角度看autosize之所以默认偏保守是为了性能让 Vega-Lite 在每个 view change 上都重排布局代价高昂。这个权衡同时体现在编译期默认值处理上——src/compile/compile.ts 显示当 spec 未指定autosize时默认取{type: pad}仅当坐标轴方向存在 signal 引用时才会额外带上resize: true。站点实际运行的对照版本仓库站点把教程示例实现为 TypeScript 模块 site/static/streaming.ts并在 site/static/index.ts 中以window[runStreamingExample]注册为全局函数由 streaming.md 页面底部的script标签在window.onload时调用。它的逻辑与教程 JS 版完全一致区别仅在于使用view对象上的changeset()方法view.changeset()与全局vega.changeset()等价、类型标注为 TypeScript、并已内置autosize: {resize: true}。当你需要把示例工程化时可直接以该文件为蓝本let minimumX -100; window.setInterval(() { minimumX; const changeSet view .changeset() .insert(valueGenerator()) .remove((t: {x: number}) t.x minimumX); view.change(table, changeSet).run(); }, 1000);扩展从流式更新到 WebSocket 实时大屏本教程演示的“定时器 随机游走”数据生成本质上与真实实时系统的数据接入点一一对应数据到达WebSocket 消息、SSE 事件或轮询响应中解析出新元组数组变更集构造.insert(newTuples)追加新数据.remove(predicate)按时间窗口 / 过期策略清理旧数据提交重绘view.change(table, changeSet).run()一次性应用必要时配合autosize.resize或view.resize()修复布局。保持数据源名称与 spec 中data.name一致、保证每条元组的字段结构与编码字段匹配即可把任何实时数据流接到 Vega-Lite 图表上。更多可视化效果可浏览仓库 examples/specs 目录下的 819 份示例 spec如需深入定制图表可继续阅读 site/docs 下的完整文档。小结通过本教程你已经走通了一条完整的 Vega-Lite 流式数据链路用data: {name: table}声明具名数据源为运行时数据绑定留好接口对应源码 src/data.ts 的NamedData通过vega.changeset().insert(...).remove(predicate)构造增删变更集通过view.change(table, changeSet).run()提交变更view来自vegaEmbed(#chart, spec)成功后的返回结果用autosize: {resize: true}或view.resize()解决数据增长后图表布局不刷新、坐标轴被裁剪的问题。把随机数生成器换成 WebSocket / 服务器轮询即可将同样的代码迁移到真实实时场景。赞分享数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载相关推荐Magisk 完整上手指南如何快速给 Android 设备获取 Root 权限Magisk 完整上手指南如何快速给 Android 设备获取 Root 权限 Magisk 是一款面向 Android 设备的开源 Root 方案支持 A移动开发系统底层Vega-Lite海洋数据可视化洋流、温度与盐度分析图表Vega Lite海洋数据可视化洋流、温度与盐度分析图表 引言海洋数据可视化的挑战与解决方案 海洋科学家、气候研究者和环境工程师经常需要处理海量多维海洋数据数据可视化Vega View API 完全指南实例化、配置、交互与图像导出的数据流视图组件Vega View API 完全指南实例化、配置、交互与图像导出的数据流视图组件 View 是 Vega 可视化语法体系中负责实例化数据流dataflow数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考