d3-graphviz 项目教程

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

d3-graphviz/
├── build/
│   └── d3-graphviz.js
├── src/
│   ├── index.js
│   └── ...
├── package.json
├── README.md
└── ...

• build/: 包含构建后的库文件 d3-graphviz.js。
• src/: 包含项目的源代码文件，其中 index.js 是入口文件。
• package.json: 项目的配置文件，包含依赖、脚本等信息。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js。这个文件是整个库的入口点，负责初始化和导出库的主要功能。

// src/index.js
import { graphviz } from "./graphviz";

export default graphviz;

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的基本信息、依赖、脚本等。

{
  "name": "d3-graphviz",
  "version": "3.1.0",
  "description": "Graphviz DOT rendering and animated transitions using D3",
  "main": "build/d3-graphviz.js",
  "module": "src/index.js",
  "scripts": {
    "build": "rollup -c",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "@hpcc-js/wasm": "^1.4.0",
    "d3": "^5.16.0"
  },
  "devDependencies": {
    "rollup": "^1.32.1",
    "rollup-plugin-terser": "^5.3.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/magjac/d3-graphviz.git"
  },
  "keywords": [
    "graphviz",
    "d3",
    "dot",
    "svg",
    "animation"
  ],
  "author": "Magnus Jacobsson",
  "license": "BSD-3-Clause",
  "bugs": {
    "url": "https://github.com/magjac/d3-graphviz/issues"
  },
  "homepage": "https://github.com/magjac/d3-graphviz#readme"
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 构建后的入口文件。
• module: 源代码的入口文件。
• scripts: 包含构建和发布脚本。
• dependencies: 项目依赖的其他库。
• devDependencies: 开发环境依赖的其他库。
• repository: 项目的 Git 仓库地址。
• keywords: 项目的关键词。
• author: 项目作者。
• license: 项目许可证。
• bugs: 项目问题追踪地址。
• homepage: 项目主页。