★ FEATURED ARTICLE 数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载本指南完整讲解如何用 Vega-Lite 制作论文插图并嵌入 LaTeX 文稿先在在线编辑器中加载图表导出无限缩放的 SVG再转为 PDF、裁剪留白最后以 figure 环境插入论文。读完你可以掌握一条从图表规格specification到期刊可投稿图片的完整生产线并了解仓库内置的命令行渲染工具作为自动化替代方案。第一步在 Vega-Lite 中创建图表一切从一份图表规格开始。要导出可供论文使用的图片可以从以下几个途径获取规格使用 Vega-Lite 官网的示例集合挑选与你需求相近的图表直接改造从在线编辑器新建图表或把已有图表复制到编辑器中使用 AltairPython 库生成的 Vega-Lite 规格从 Observable 等平台上的 Vega-Lite 示例中复制规格。无论来源如何最终都要把 Vega-Lite 规格粘贴到在线 Vega-Lite 编辑器中。编辑器的便利之处在于完整的规格会编码保存在 URL 中因此你可以把带参数的链接直接发给协作者对方打开即可看到同一张图并继续修改。本教程以编辑器中的一张示例图表上文图片所示为例图中展示的是 Falcon 数据集在年度时间轴上的数据曲线。教程原文还提供了一个可直接在编辑器中打开的规格链接其中包含了完整的图表定义。需要超出 Vega-Lite 能力的自定义如果论文图表需要在 Vega-Lite 能力之外做精细定制可以先把 Vega-Lite 规格编译为 Vega 规格在编辑器中打开编译结果直接编辑底层 Vega 定义改完后再继续下面的导出步骤。这种编译后编辑的路径适合需要细粒度控制渲染细节的场景。第二步导出为 SVG在编辑器中加载图表后点击Export再选择Open SVG即可导出。之所以选择 SVG 而不是位图是因为 SVG 是矢量图形格式可无限缩放无论浏览器如何放大图片边缘始终清晰锐利不会出现像素化。这对论文中需要放大查看细节的图表尤为重要。仓库本身的示例产物就是很好的佐证examples/compiled/目录下为每个示例同时保存了.svg与.png两套产物例如 airport_connections.svg 与对应的 airport_connections.png以及编译后的 airport_connections.vg.json可直接观察 SVG 与位图的差异。第三步转换为 PDFLaTeX 不能直接导入 SVG所以必须先将其转换为 PDF。转换方式有很多Illustrator、其他图像编辑器、命令行脚本或在浏览器中打印为 PDF。本教程采用最简单的方式——利用浏览器的打印功能在浏览器如 Chrome 或 Firefox中打开上一步导出的 SVG选择File → Print...或按CmdP/CtrlP将目标destination设置为Save as PDF如图所示把生成的 PDF 保存到你的 LaTeX 论文目录中。第四步裁剪 PDF 去除空白你会发现导出的 PDF 四周有大量空白——因为 SVG 被保存为一张独立的打印机页面。如果图表尺寸过大需要先缩放使其在一页内完整放下然后再进行裁剪。裁剪步骤以 macOS 自带预览 Preview 为例用 Preview 打开 PDF选择矩形选择Rectangular Selection工具在图表周围拖出选框反复微调直到选框紧贴图表边缘点击裁剪或按CmdK务必保存修改后的新文件否则后续嵌入仍会带有多余留白。若你更偏好命令行方式也可使用其他 PDF 裁剪工具达到同样效果关键是保证最终 PDF 的页面尺寸与图表内容精确贴合这样在 LaTeX 中排版时边距才是可控的。第五步把图表嵌入 LaTeX 论文最后把裁剪好的 PDF 作为 figure 嵌入论文。假设文件命名为benchmark.pdf可按下述模板调整文件名后使用\begin{figure} \centering \includegraphics[width\columnwidth]{benchmark} \caption{\label{fig:benchmark} A title that describes the figure.} \end{figure}\includegraphics[width\columnwidth]让图表宽度适配当前栏宽\caption与\label用于生成图表标题与交叉引用。至此一条完整的Vega-Lite → SVG → PDF → LaTeX论文配图流水线就打通了。进阶用命令行工具自动化导出仓库内置如果你需要批量产出论文图表或者想把导出流程纳入脚本与 CIVega-Lite 仓库自带了一套命令行渲染工具。查看 package.json 中的bin字段可以看到四个命令命令作用vl2svg把 Vega-Lite 规格渲染为 SVGvl2png把 Vega-Lite 规格渲染为 PNG 位图vl2pdf把 Vega-Lite 规格渲染为 PDFvl2vg把 Vega-Lite 规格编译为 Vega 规格典型用法输入规格可来自文件或 stdin输出可写文件或 stdout# SVG 输出默认不带 XML 声明头-h 可加入 vl2svg chart.vl.json chart.svg # 直接产出 PDF一步到位 vl2pdf chart.vl.json chart.pdf # 高分辨率位图--ppi 控制分辨率 vl2png --ppi 144 chart.vl.json chart.png # 仅编译查看底层 Vega 规格 vl2vg -p chart.vl.json chart.vg.json常用参数详见 bin/args.js参数说明-b, --base数据加载的基础目录默认取输入规格所在目录支持-b data/相对路径或-b http://host/data/-s, --scale输出分辨率缩放因子默认1-h, --header仅 SVG输出时附带 XML 声明与 SVG doctype--ppi仅 PNG输出分辨率默认72-c, --config指定 Vega 配置对象JSON 或导出配置对象的 JS 文件-l, --loglevel日志级别error/warn默认/info/debug--seed随机数种子用于可复现的布局-f, --format、-t, --timeFormat自定义数字/时间格式 locale这套工具的实现很值得参考bin/render.js 展示了完整渲染管线——先调用 Vega-Lite 的compile(vlSpec, {config}).spec把高层规格编译为 Vega 规格再创建无头vega.View最后通过view.toSVG(scale)或view.toCanvas(...)输出。其中vl2pdf渲染时还特别启用了{textDrawingMode: glyph}以保证 PDF 中文字按字形绘制见 bin/vl2pdf。仓库自身的示例构建脚本就大量使用了这类命令行流水线scripts/build-example.sh 先用bin/vl2vg -p编译示例规格再用vg2svg/vg2png渲染出examples/compiled/下的.svg与.png产物。你可以照此思路把论文图表也纳入vl2svg → 转 PDF → 裁剪的自动脚本中让配图随数据更新一键重新生成。结语至此你已掌握从 Vega-Lite 图表规格到 LaTeX 论文图片的完整工作流在线编辑器加载 → 导出 SVG → 浏览器打印为 PDF → 裁剪留白 →\includegraphics嵌入。若追求自动化仓库内置的vl2svg/vl2pdf/vl2png命令提供了等价的命令行路径其编译与渲染原理同样可以从 bin/render.js 与 src/index.ts 中追根溯源。如果你的图表最终需要发布到网页而非论文还可以参考 site/usage/embed.md 中的 Vega-Embed 嵌入方案两条路线互为补充。赞分享数据可视化【免费下载链接】vega-liteA concise grammar of interactive graphics, built on Vega.项目地址https://gitcode.com/gh_mirrors/ve/vega-lite点击查看免费下载相关推荐matplotlib-cpp在学术研究中的应用论文图表制作完整流程matplotlib cpp在学术研究中的应用论文图表制作完整流程 matplotlib cpp是一个强大的C数据可视化库为学术研究提供了专业的图表制作数据可视化Mermaid在线编辑器完整教程5步学会专业图表制作Mermaid在线编辑器完整教程5步学会专业图表制作 Mermaid在线编辑器是一款功能强大的可视化图表制作工具让任何人都能通过简单的Markdown语法创前端开发者工具数据可视化Mermaid在线图表编辑器零代码制作专业图表完整教程Mermaid在线图表编辑器零代码制作专业图表完整教程 还在为制作流程图、序列图而烦恼吗Mermaid在线图表编辑器让图表制作变得前所未有的简单。这个基于文前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
