D3-Force-Directed-Graph 项目教程

D3-Force-Directed-Graph 项目教程

d3-force-directed-graph Contains all examples of our "Interactive & Dynamic Force-Directed Graphs with D3" blog post 项目地址: https://gitcode.com/gh_mirrors/d3/d3-force-directed-graph

1. 项目目录结构及介绍

d3-force-directed-graph/
├── src/
│   ├── index.js
│   ├── config.js
│   ├── data/
│   │   └── sample-data.json
│   ├── styles/
│   │   └── main.css
│   └── utils/
│       └── helpers.js
├── public/
│   ├── index.html
│   └── assets/
│       └── logo.png
├── package.json
├── README.md
└── .gitignore

目录结构说明

• src/: 项目的主要源代码目录。

  • index.js: 项目的入口文件，负责初始化和启动应用。
  • config.js: 项目的配置文件，包含各种配置选项。
  • data/: 存放示例数据文件，如 sample-data.json。
  • styles/: 存放样式文件，如 main.css。
  • utils/: 存放工具函数文件，如 helpers.js。

• public/: 存放静态资源文件。

  • index.html: 项目的HTML入口文件。
  • assets/: 存放图片等静态资源，如 logo.png。

• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。

• README.md: 项目的说明文档。

• .gitignore: Git忽略文件，指定哪些文件或目录不需要被Git管理。

2. 项目的启动文件介绍

src/index.js

index.js 是项目的入口文件，负责初始化和启动应用。以下是该文件的主要功能：

import * as d3 from 'd3';
import { createGraph } from './utils/helpers';
import config from './config';

// 初始化配置
const { width, height, nodeRadius } = config;

// 创建SVG容器
const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

// 加载数据并创建力导向图
d3.json('data/sample-data.json').then(data => {
  createGraph(svg, data, width, height, nodeRadius);
});

功能说明

• 导入依赖: 导入了 d3 库和自定义的 helpers 工具函数。
• 初始化配置: 从 config.js 中获取配置参数。
• 创建SVG容器: 使用 d3 创建一个SVG容器，并设置其宽度和高度。
• 加载数据并创建图表: 使用 d3.json 加载示例数据，并调用 createGraph 函数创建力导向图。

3. 项目的配置文件介绍

src/config.js

config.js 是项目的配置文件，包含各种配置选项。以下是该文件的内容：

export default {
  width: 800,
  height: 600,
  nodeRadius: 5,
  linkDistance: 50,
  chargeStrength: -100,
  friction: 0.9,
  gravity: 0.1,
};

配置项说明

• width: 图表的宽度，单位为像素。
• height: 图表的高度，单位为像素。
• nodeRadius: 节点的半径，单位为像素。
• linkDistance: 节点之间的连接距离，单位为像素。
• chargeStrength: 节点之间的电荷强度，影响节点之间的排斥力。
• friction: 摩擦系数，影响节点运动的阻尼效果。
• gravity: 重力系数，影响节点向中心聚集的效果。

这些配置项可以根据实际需求进行调整，以达到最佳的图表展示效果。

d3-force-directed-graph Contains all examples of our "Interactive & Dynamic Force-Directed Graphs with D3" blog post 项目地址: https://gitcode.com/gh_mirrors/d3/d3-force-directed-graph