D3-Sankey 开源项目教程

2026-01-18 10:30:28作者：傅爽业Veleda

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

D3-Sankey 项目的目录结构如下：

d3-sankey/
├── README.md
├── package.json
├── src/
│   ├── index.js
│   ├── sankey.js
│   └── ...
├── dist/
│   ├── d3-sankey.js
│   └── d3-sankey.min.js
└── test/
    ├── index.js
    └── ...

目录介绍

README.md: 项目说明文档，包含项目的基本信息和使用指南。
package.json: 项目的配置文件，包含依赖项、脚本等信息。
src/: 源代码目录，包含项目的核心代码。
- index.js: 项目的入口文件。
- sankey.js: Sankey 图的核心实现文件。
dist/: 编译后的文件目录，包含可直接使用的 JavaScript 文件。
- d3-sankey.js: 未压缩的库文件。
- d3-sankey.min.js: 压缩后的库文件。
test/: 测试代码目录，包含项目的测试用例。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，该文件是 D3-Sankey 库的入口点。它导入了 Sankey 图的核心实现并提供了对外的接口。

export { sankey, sankeyCenter, sankeyJustify, sankeyLeft, sankeyRight, sankeyLinkHorizontal } from "./sankey.js";

3. 项目的配置文件介绍

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

{
  "name": "d3-sankey",
  "version": "0.12.3",
  "description": "Visualize flow between nodes in a directed acyclic network.",
  "keywords": [
    "d3",
    "d3-module",
    "sankey"
  ],
  "license": "BSD-3-Clause",
  "main": "dist/d3-sankey.js",
  "unpkg": "dist/d3-sankey.min.js",
  "jsdelivr": "dist/d3-sankey.min.js",
  "module": "src/index.js",
  "homepage": "https://github.com/d3/d3-sankey",
  "repository": {
    "type": "git",
    "url": "https://github.com/d3/d3-sankey.git"
  },
  "scripts": {
    "pretest": "rollup -c",
    "test": "tape 'test/**/*-test.js' && eslint src",
    "prepublishOnly": "rm -rf dist && yarn test",
    "postpublish": "git push && git push --tags && zip -j dist/${npm_package_name}-${npm_package_version}.zip -- LICENSE README.md dist/*.js"
  },
  "dependencies": {
    "d3-array": "^2.0.3",
    "d3-path": "^2.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-terser": "^7.0.2",
    "tape": "^5.0.0"
  },
  "engines": {
    "node": ">= 12"
  }
}