d3.chart.sankey 项目教程

d3.chart.sankey 项目教程

d3.chart.sankey Reusable D3 Sankey diagram using d3.Chart 项目地址: https://gitcode.com/gh_mirrors/d3/d3.chart.sankey

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

d3.chart.sankey/
├── build/
│   └── ...
├── example/
│   └── ...
├── src/
│   └── ...
├── .gitignore
├── .jscsrc
├── .jshintrc
├── CHANGELOG.md
├── Gruntfile.js
├── LICENSE.md
├── README.md
├── bower.json
├── d3.chart.sankey.js
├── d3.chart.sankey.min.js
├── d3.chart.sankey.min.map
└── package.json

目录结构介绍

• build/: 构建生成的文件目录。
• example/: 项目示例代码目录。
• src/: 项目源代码目录。
• .gitignore: Git 忽略文件配置。
• .jscsrc: JavaScript 代码风格配置文件。
• .jshintrc: JavaScript 代码检查配置文件。
• CHANGELOG.md: 项目更新日志。
• Gruntfile.js: Grunt 任务配置文件。
• LICENSE.md: 项目许可证文件。
• README.md: 项目说明文档。
• bower.json: Bower 包管理配置文件。
• d3.chart.sankey.js: 项目主文件，包含 Sankey 图表的实现。
• d3.chart.sankey.min.js: 项目主文件的压缩版本。
• d3.chart.sankey.min.map: 压缩文件的 Source Map。
• package.json: npm 包管理配置文件。

2. 项目的启动文件介绍

项目的启动文件是 d3.chart.sankey.js，该文件包含了 Sankey 图表的核心实现。通过引入该文件，可以在项目中使用 Sankey 图表功能。

使用方法

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/newrelic-forks/d3-plugins-sankey/v1.1.0/sankey.js"></script>
<script src="https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
<script src="d3.chart.sankey.min.js"></script>

<script>
  var chart = d3.select("#chart").append("svg").chart("Sankey");
  chart.draw([
    { nodes: [/* ... */], links: [/* ... */] }
  ]);
</script>

3. 项目的配置文件介绍

Gruntfile.js

Gruntfile.js 是 Grunt 任务配置文件，用于自动化构建和打包项目。通过运行 grunt 命令，可以执行构建任务。

package.json

package.json 是 npm 包管理配置文件，包含了项目的依赖项、脚本命令等信息。

bower.json

bower.json 是 Bower 包管理配置文件，用于管理前端依赖项。

.jscsrc 和 .jshintrc

这两个文件分别用于配置 JavaScript 代码风格检查和代码质量检查。

d3.chart.sankey Reusable D3 Sankey diagram using d3.Chart 项目地址: https://gitcode.com/gh_mirrors/d3/d3.chart.sankey