D3.js学习笔记十二:D3.js构图(d3.layout)——力学(Force)图

了解了D3.js的基本开发和组件以后，我们开始应用它激动人心之处：绚丽的预定义图形，应用D3.js，我们在它的示例文件的基础上稍加变动即可应用于我们的数据可视化工作中，D3.js将后台的运算已经预定义好，我们只需少量代码和规范的数据，就能做出很花哨的效果。

D3.js力学图

力学图（也称为导向图，也有叫网络拓补图的，反正就是通过排斥得到关系远近的结构）在社交网络研究、信息传播途径等群体关系研究中应用非常广泛，它可以直观地反映群体与群体之间联系的渠道、交集多少，群体内部成员的联系强度等。

D3.js力学图示例

力学参数：width:800 height:600 charge:-150 linkDistance:100

交互性：鼠标悬停在节点上显示姓名，节点可拖拽。

MyrielNapoleonMlle.BaptistineMme.MagloireCountessdeLoGeborandChamptercierCravatteCountOldManLabarreValjeanMargueriteMme.deRIsabeauGervaisTholomyesListolierFameuilBlachevilleFavouriteDahliaZephineFantineMme.ThenardierThenardierCosetteJavertFaucheleventBamataboisPerpetueSimpliceScaufflaireWoman1JudgeChampmathieuBrevetChenildieuCochepaillePontmercyBoulatruelleEponineAnzelmaWoman2MotherInnocentGribierJondretteMme.BurgonGavrocheGillenormandMagnonMlle.GillenormandMme.PontmercyMlle.VauboisLt.GillenormandMariusBaronessTMabeufEnjolrasCombeferreProuvaireFeuillyCourfeyracBahorelBossuetJolyGrantaireMotherPlutarchGueulemerBabetClaquesousMontparnasseToussaintChild1Child2BrujonMme.Hucheloup

构图(d3.layout)——力学(Force)的API说明

• d3.layout.force -节点（node）基于物理模拟的位置连接。
• force.on - 监听布局位置的变化。(仅支持"start","step","end"三种事件)
• force.nodes - 获得或设置布局中的节点（node）阵列组。
• force.links - 获得或设置布局中节点间的连接（Link）阵列组。.
• force.size - 获取或设置布局的 宽 和 高 的大小.
• force.linkDistance - 获取或设置节点间的连接线距离.
• force.linkStrength - 获取或设置节点间的连接强度.
• force.friction - 获取或设置摩擦系数.
• force.charge - 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引)
• force.gravity - 获取或设置节点的引力强度.
• force.theta - 获取或设置电荷间互相作用的强度.
• force.start - 开启或恢复结点间的位置影响.
• force.resume - 设置冷却系数为0.1,并重新调用start()函数.
• force.stop - 立刻终止结点间的位置影响.(等同于将冷却系数设置为0)
• force.alpha - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)
• force.tick - 让布局运行到下一步.
• force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

一个基本的力学图有三个要素：力学结构,节点标记和节点连线。力学结构规范节点的行为，连线和节点显示节点信息和关系。下面是实现上图的js源码，可以看到，实现上面的效果，实际编写的代码很少，我为每一个设定步骤都写了注释，可以参考API阅读这个代码。

<script type="text/javascript">var width = 800;var height = 600;//取得20个颜色的序列var color = d3.scale.category20();//定义画布var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);//定义力学结构var force = d3.layout.force().charge(-150).linkDistance(100).size([width, height]);//读取数据d3.json("force.php", function(error, graph) {  force  .nodes(graph.nodes)  .links(graph.links)  .start();  //定义连线var link = svg.selectAll(".link")  .data(graph.links)  .enter()  .append("line")  .attr("class", "link")  .attr("stroke","#09F")  .attr("stroke-opacity","0.4")  .style("stroke-width",1);  //定义节点标记var node = svg.selectAll(".node")  .data(graph.nodes)  .enter()  .append("g")  .call(force.drag);//节点圆形标记node.append("circle")  .attr("class", "node")  .attr("r",function(d){return 10+d.group;})  .style("fill", function(d) { return color(d.group); });//标记鼠标悬停的标签node.append("title")  .text(function(d) { return d.name; });//节点上显示的姓名node.append("text")  .attr("dy", ".3em")  .attr("class","nodetext")  .style("text-anchor", "middle")  .text(function(d) { return d.name; });//开始力学动作force.on("tick", function() {link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });node.attr("transform", function(d){ return "translate("+d.x+"," + d.y + ")";});});});</script>

示例代码地址：demo12_1.html，打开后右键查看源码。

JSON数据：force.php，打开后右键查看源码，直接保存为force.php即可。