Vega-Embed 使用教程

Vega-Embed 使用教程

vega-embedPublish Vega visualizations as embedded web components with interactive parameters.项目地址:https://gitcode.com/gh_mirrors/ve/vega-embed

1. 项目的目录结构及介绍

Vega-Embed 是一个用于在网页中嵌入 Vega 和 Vega-Lite 可视化的库。以下是 Vega-Embed 项目的基本目录结构：

vega-embed/
├── docs/
├── examples/
├── src/
├── test/
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── package.json
├── rollup.config.js
├── tsconfig.json
└── yarn.lock

• docs/: 包含项目的文档文件。
• examples/: 包含示例代码，展示如何使用 Vega-Embed。
• src/: 包含源代码文件。
• test/: 包含测试文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: NPM 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• .travis.yml: Travis CI 配置文件。
• CODE_OF_CONDUCT.md: 行为准则。
• LICENSE: 许可证文件。
• README.md: 项目说明文件。
• package.json: 项目依赖和脚本配置。
• rollup.config.js: Rollup 打包配置文件。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

Vega-Embed 的启动文件主要是 src/index.ts，这是项目的入口文件。它导出了主要的嵌入函数 vegaEmbed，用于在网页中嵌入 Vega 和 Vega-Lite 可视化。

// src/index.ts
import embed, { vega, vegaLite, Result } from './embed';

export {
  embed,
  vega,
  vegaLite,
  Result
};

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "vega-embed",
  "version": "6.18.2",
  "description": "Publish Vega visualizations as embedded web components.",
  "main": "build/vega-embed.js",
  "module": "build/vega-embed.module.js",
  "unpkg": "build/vega-embed.min.js",
  "jsdelivr": "build/vega-embed.min.js",
  "types": "build/vega-embed.d.ts",
  "scripts": {
    "build": "rollup -c",
    "pretest": "yarn run build",
    "test": "yarn run test:unit && yarn run test:typescript",
    "test:unit": "cross-env NODE_ENV=test karma start --single-run",
    "test:typescript": "tsc --noEmit"
  },
  "dependencies": {
    "vega": "^5.20.2",
    "vega-lite": "^5.1.0",
    "vega-tooltip": "^0.26.0"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.0",
    "cross-env": "^7.0.3",
    "karma": "^6.3.4",
    "rollup": "^2.52.2",
    "typescript": "^4.3.5"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和文件包含规则。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["dom", "es2015"],
    "declaration": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
   

vega-embedPublish Vega visualizations as embedded web components with interactive parameters.项目地址:https://gitcode.com/gh_mirrors/ve/vega-embed