D3.js的v5版本入门教程（第十四章）—— 力导向图

D3.js的v5版本入门教程（第十四章）

    

    这一章我们来绘制一个力导向图，什么叫力导向图，通俗一点将就是有节点和线组成，当鼠标拖拽一个节点时，其他节点都会受到影响（力导向图有多种类型，本章绘制的效果就是这样，其他类型的读者可以自己去试试），还是给读者提个醒，这一章又会有很多新的知识点，请拿出的学习新东西的本领来

    为了绘制一个力导向图，我们还是需要以下新的知识点

• d3.forceSimulation() ，新建一个力导向图，
• d3.forceSimulation().force(),添加或者移除一个力，这里给出官方示例： 

    

    这里说明一下对于d3.forceSimulation().force(name)，也就是当force中只有一个参数，这个参数是某个力的名称，那么这段代码返回的是某个具体的力，（根据上面图片官方对force的说明也可以知道），例如d3.forceSimulation().force(“link”)，则返回的是d3.forceLink()这个力，注意对照上面的图片，这个用法在下面会经常被用到

 

• d3.forceSimulation().nodes()，输入是一个数组，然后将这个输入的数组进行一定的数据转换，例如添加坐标什么的！这里给出官方API的解释

    从这里可以看出，差不多就是上面作者讲的那个意思

 

• d3.forceLink.links()，这里输入的也是一个数组（边集），然后对输入的边集进行转换，等一下我们会看到，它到底被转换成什么样子的
• tick函数，这个函数对于力导向图来说非常重要，因为力导向图是不断运动的，每一时刻都在发生更新，所以需要不断更新节点和连线的位置
• d3.drag(),是力导向图可以被拖动

    好了，有了这些基础知识后，我们开始绘制一个力导向图

    1、数据准备

var marge = {top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg")
    	var width = svg.attr("width")
    	var height = svg.attr("height")
    	var g = svg.a