D3.js 力导向图布局（d3-force）使用教程

D3.js 力导向图布局（d3-force）使用教程

项目地址:https://gitcode.com/gh_mirrors/d3/d3-force

1. 项目目录结构及介绍

D3-force 的源码仓库包含了以下几个主要目录和文件：

• src: 存放所有源代码，包括主要的 JavaScript 模块。

  • index.js: 入口文件，导出了库的所有核心功能。

• test: 测试用例目录，用于验证代码的功能正确性。

  • index.html: 测试页面。

• example: 示例代码目录，提供了如何使用 d3-force 的示例。

  • basic.html, simulation.html: 不同类型的力导向图示例。

• package.json: 项目配置文件，包含了依赖和脚本命令。

• LICENSE: 项目的许可协议，这里是 ISC 许可证。

• .gitignore: Git 忽略规则，定义了哪些文件或目录不应该被版本控制。

2. 项目的启动文件介绍

D3-force 是一个 JavaScript 库，没有常规意义上的启动文件。通常情况下，开发者会在自己的应用中引入 d3-force 并初始化力导向图布局。在 example 目录下的 HTML 文件，如 basic.html 或 simulation.html 中可以看到如何加载和使用这个库的一个实例。例如，在这些文件中，会通过 <script> 标签引入 d3.js 和 d3-force.js，然后创建力导向图布局并添加节点和边数据。

<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="./build/d3-force.min.js"></script>

<script>
  // 创建力导向图布局实例
  const simulation = d3.forceSimulation()
    .nodes(nodeData)
    .links(linkData)
    // 添加各种力，比如重力、冲撞力等
    .force("charge", d3.forceManyBody())
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    // 绘制图形...
</script>

3. 项目的配置文件介绍

package.json

这个文件是 Node.js 项目常用的配置文件，它包含了项目元数据、依赖项列表和可执行脚本。在 d3-force 项目中，package.json 主要用于构建和测试过程：

• dependencies: 列出项目开发时依赖的其他包，例如 rollup 用于构建，tape 用于单元测试。

• scripts: 定义了一些可执行的命令，如 npm run build 用来编译源代码，npm test 运行测试用例。

{
  "name": "d3-force",
  "version": "2.0.0-alpha.4",
  "description": "Force-directed graph layout using velocity Verlet integration.",
  "keywords": [
    "d3",
    "graph",
    "layout",
    "physics"
  ],
  "author": {
    "name": "Mike Bostock"
  },
  "license": "ISC",
  "main": "./build/d3-force.js",
  "module": "./build/d3-force.module.js",
  "umd:main": "./build/d3-force.umd.js",
  "directories": {
    "example": "example",
    "test": "test"
  },
  "scripts": {
    "prepublishOnly": "rollup -c && rollup -c --environment NODE_ENV:production",
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "test": "tape 'test/**/*.js' | tap-spec",
    "lint": "eslint src test example/*.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/d3/d3-force.git"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-d3": "^1.4.0",
    "rollup": "^2.58.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.0",
    "tape": "^4.13.0",
    "tap-spec": "^5.0.0"
  }
}

以上就是关于 d3-force 项目的基本目录结构、启动文件和配置文件的介绍。在实际使用中，结合 example 目录中的示例以及 package.json 中的脚本，你可以更好地理解和集成这个库到你的项目中。如果你有更多关于 d3-force 的疑问，欢迎继续提问。

d3-force 项目地址: https://gitcode.com/gh_mirrors/d3/d3-force