D3 笔记十：力导向图

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。

一、力导向图

我们先来了解一下力导向图（Force-Directed Graph）的定义。首先，它是绘图的一种算法。在二维或三维空间里配置节点。节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用。力的大小是根据节点和连线的相对位置计算的。根据力的作用来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。

功能上，力导向图能表示节点之间的多对多的关系。

二、数据与布局

力导向图的原生数据由节点（nodes）和连线（edges）的两个数组组成。nodes 代表节点的一些必要信息，而 edges 则表示的是节点之间的连线与否。请看下列实例数据：

var nodes = [{ name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: "杭州" }];

var edges = [{ source: 0, target: 1 }, { source: 0, target: 2 }, { source: