本文目前来说,是学完极客学院的《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: