D3-Force-Directed-Graph 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01110/article/details/142090265

D3-Force-Directed-Graph 项目教程

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

项目介绍

D3-Force-Directed-Graph 是一个基于 D3.js 的开源项目，专门用于创建和可视化力导向图（Force-Directed Graph）。力导向图是一种用于表示节点和边之间关系的图形，通过模拟物理力（如引力和斥力）来布局节点，使得图形更加直观和美观。该项目提供了丰富的 API 和示例，帮助开发者快速上手并定制自己的力导向图。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令克隆项目并安装依赖：

git clone https://github.com/ninjaconcept/d3-force-directed-graph.git
cd d3-force-directed-graph
npm install

运行示例

项目中包含了一些示例代码，可以通过以下命令运行：

npm start

这将启动一个本地服务器，并在浏览器中打开示例页面。你可以通过修改 src/index.js 文件来定制你的力导向图。

基本代码示例

以下是一个简单的力导向图的代码示例：

import * as d3 from 'd3';
import { forceSimulation, forceLink, forceManyBody, forceCenter } from 'd3-force';

// 定义节点和边
const nodes = [
  { id: 'A' },
  { id: 'B' },
  { id: 'C' },
  { id: 'D' }
];

const links = [
  { source: 'A', target: 'B' },
  { source: 'B', target: 'C' },
  { source: 'C', target: 'D' },
  { source: 'D', target: 'A' }
];

// 创建力导向图
const simulation = forceSimulation(nodes)
  .force('link', forceLink(links).id(d => d.id))
  .force('charge', forceManyBody())
  .force('center', forceCenter(window.innerWidth / 2, window.innerHeight / 2));

// 绘制节点和边
const svg = d3.select('body').append('svg')
  .attr('width', window.innerWidth)
  .attr('height', window.innerHeight);

const link = svg.selectAll('.link')
  .data(links)
  .enter().append('line')
  .attr('class', 'link');

const node = svg.selectAll('.node')
  .data(nodes)
  .enter().append('circle')
  .attr('class', 'node')
  .attr('r', 5);

// 更新节点和边的位置
simulation.on('tick', () => {
  link
    .attr('x1', d => d.source.x)
    .attr('y1', d => d.source.y)
    .attr('x2', d => d.target.x)
    .attr('y2', d => d.target.y);

  node
    .attr('cx', d => d.x)
    .attr('cy', d => d.y);
});