D3.js 开源项目教程

D3.js 开源项目教程

d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址:https://gitcode.com/gh_mirrors/d3/d3

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

D3.js 是一个用于数据可视化的 JavaScript 库。其 GitHub 仓库的目录结构如下：

d3/
├── docs/
├── img/
├── src/
├── test/
├── .eslintrc.json
├── .gitignore
├── API.md
├── CHANGES.md
├── LICENSE
├── README.md
├── bundle.js
├── package.json
├── prebuild.sh
├── rollup.config.js
└── yarn.lock

• docs/: 包含项目的文档文件。
• img/: 包含项目使用的图像文件。
• src/: 包含项目的源代码文件。
• test/: 包含项目的测试文件。
• .eslintrc.json: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件列表。
• API.md: API 文档。
• CHANGES.md: 项目变更记录。
• LICENSE: 项目许可证。
• README.md: 项目介绍和使用说明。
• bundle.js: 打包后的 JavaScript 文件。
• package.json: 项目的依赖和脚本配置。
• prebuild.sh: 预构建脚本。
• rollup.config.js: Rollup 打包配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

D3.js 项目的启动文件主要是 package.json 中的脚本配置。以下是一些常用的脚本命令：

{
  "scripts": {
    "build": "rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepublishOnly": "yarn run build"
  }
}

• build: 使用 Rollup 进行打包。
• test: 运行测试脚本（当前配置为默认）。
• prepublishOnly: 在发布前进行构建。

3. 项目的配置文件介绍

D3.js 项目的主要配置文件包括：

• .eslintrc.json: 代码风格检查配置。
• rollup.config.js: 打包配置。
• package.json: 项目依赖和脚本配置。

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    // 自定义规则
  }
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'umd',
    name: 'd3'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

package.json

{
  "name": "d3",
  "version": "7.9.0",
  "description": "A JavaScript library for visualizing data using web standards.",
  "main": "build/d3.js",
  "module": "index",
  "unpkg": "build/d3.min.js",
  "jsdelivr": "build/d3.min.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/d3/d3.git"
  },
  "keywords": [
    "d3",
    "visualization",
    "svg",
    "charts",
    "data-visualization"
  ],
  "author": "Mike Bostock",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/d3/d3/issues"
  },
  "homepage": "https://d3js.org",

d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址:https://gitcode.com/gh_mirrors/d3/d3