可视化工具D3.js教程 入门 （第十二章）—— 力导向图

力导向图的概念这里就不细说了，力导向图适合绘制关系型的信息；

下面先来说几个关于力导向图的知识点：

1、d3.forceSimulation([nodes])

　　创建一个新的力导向图；

2、simulation.force(name[, force])

　　如果指定了 force 则表示添加指定 name 的 force（力学模型）并返回仿真，如下：

　　var simulation = d3.forceSimulation(nodes).force("charge", d3.forceManyBody())；

　　如果要移除对应的 name 的仿真，可以为其指定 null，如下:

　　simulation.force("charge", null);

 3、simulation.nodes([nodes])

　　如果指定了 nodes 则将仿真的节点设置为指定的对象数组，并根据需要创建它们的位置和速度，然后 重新初始化并且绑定 force 返回当前仿真。如果没有指定 nodes 则返回当前仿真的节点数组。

4、d3.forceLink([links]) 

　　根据指定的 links 以及默认参数创建一个弹簧力模型。如果没有指定 links 则默认为空数组。

5、link.links([links])

　　如果指定了 links 则将其设置为该弹簧力模型的关联边数组，并重新计算每个边的 distance 和 strength 参数，返回当前力模型。如果没有指定 links 则返回当前力模型的边数组，默认为空。

6、simulation.tick()

　　简单来讲就是让力导向图随时更新并且动起来的。

7、d3.drag() 

　　创建一个新的拖拽行为并返回自身。drag 既是一个对象，也是一个函数，通常通过 selection.call 被应用在选中的元素上。

　　d3.selectAll(".node").call(d3.drag().on("start", started));

 

 

有了这些新知识 我么开始绘图

代码：

 

 

效果：