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

2015年02月15日 javascript 暂无评论 阅读 6,229 views 次

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

D3.js力学图

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

D3.js力学图示例

2015-02-15_175510

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

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

构图(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阅读这个代码。

示例代码地址:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画一个力学图(Force)</title>
<script type="text/javascript" src="js/d3.js"></script>
</head>
<style type="text/css">
.node {
stroke: #fff;
stroke-width: 1.5px;
cursor:pointer;
}
.nodetext {
fill: #000;
font-size:12px;
cursor:pointer;
pointer-events:none;
}
</style>
<body>
<script type="text/javascript">
var width = 960;
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>
</body>
</html>

 

,打开后右键查看源码。

JSON数据:

{ "nodes":[ {"name":"Myriel","group":1}, {"name":"Napoleon","group":1}, {"name":"Mlle.Baptistine","group":1}, {"name":"Mme.Magloire","group":1}, {"name":"CountessdeLo","group":1}, {"name":"Geborand","group":1}, {"name":"Champtercier","group":1}, {"name":"Cravatte","group":1}, {"name":"Count","group":1}, {"name":"OldMan","group":1}, {"name":"Labarre","group":2}, {"name":"Valjean","group":2}, {"name":"Marguerite","group":3}, {"name":"Mme.deR","group":2}, {"name":"Isabeau","group":2}, {"name":"Gervais","group":2}, {"name":"Tholomyes","group":3}, {"name":"Listolier","group":3}, {"name":"Fameuil","group":3}, {"name":"Blacheville","group":3}, {"name":"Favourite","group":3}, {"name":"Dahlia","group":3}, {"name":"Zephine","group":3}, {"name":"Fantine","group":3}, {"name":"Mme.Thenardier","group":4}, {"name":"Thenardier","group":4}, {"name":"Cosette","group":5}, {"name":"Javert","group":4}, {"name":"Fauchelevent","group":0}, {"name":"Bamatabois","group":2}, {"name":"Perpetue","group":3}, {"name":"Simplice","group":2}, {"name":"Scaufflaire","group":2}, {"name":"Woman1","group":2}, {"name":"Judge","group":2}, {"name":"Champmathieu","group":2}, {"name":"Brevet","group":2}, {"name":"Chenildieu","group":2}, {"name":"Cochepaille","group":2}, {"name":"Pontmercy","group":4}, {"name":"Boulatruelle","group":6}, {"name":"Eponine","group":4}, {"name":"Anzelma","group":4}, {"name":"Woman2","group":5}, {"name":"MotherInnocent","group":0}, {"name":"Gribier","group":0}, {"name":"Jondrette","group":7}, {"name":"Mme.Burgon","group":7}, {"name":"Gavroche","group":8}, {"name":"Gillenormand","group":5}, {"name":"Magnon","group":5}, {"name":"Mlle.Gillenormand","group":5}, {"name":"Mme.Pontmercy","group":5}, {"name":"Mlle.Vaubois","group":5}, {"name":"Lt.Gillenormand","group":5}, {"name":"Marius","group":8}, {"name":"BaronessT","group":5}, {"name":"Mabeuf","group":8}, {"name":"Enjolras","group":8}, {"name":"Combeferre","group":8}, {"name":"Prouvaire","group":8}, {"name":"Feuilly","group":8}, {"name":"Courfeyrac","group":8}, {"name":"Bahorel","group":8}, {"name":"Bossuet","group":8}, {"name":"Joly","group":8}, {"name":"Grantaire","group":8}, {"name":"MotherPlutarch","group":9}, {"name":"Gueulemer","group":4}, {"name":"Babet","group":4}, {"name":"Claquesous","group":4}, {"name":"Montparnasse","group":4}, {"name":"Toussaint","group":5}, {"name":"Child1","group":10}, {"name":"Child2","group":10}, {"name":"Brujon","group":4}, {"name":"Mme.Hucheloup","group":8} ], "links":[ {"source":1,"target":0,"value":1}, {"source":2,"target":0,"value":8}, {"source":3,"target":0,"value":10}, {"source":3,"target":2,"value":6}, {"source":4,"target":0,"value":1}, {"source":5,"target":0,"value":1}, {"source":6,"target":0,"value":1}, {"source":7,"target":0,"value":1}, {"source":8,"target":0,"value":2}, {"source":9,"target":0,"value":1}, {"source":11,"target":10,"value":1}, {"source":11,"target":3,"value":3}, {"source":11,"target":2,"value":3}, {"source":11,"target":0,"value":5}, {"source":12,"target":11,"value":1}, {"source":13,"target":11,"value":1}, {"source":14,"target":11,"value":1}, {"source":15,"target":11,"value":1}, {"source":17,"target":16,"value":4}, {"source":18,"target":16,"value":4}, {"source":18,"target":17,"value":4}, {"source":19,"target":16,"value":4}, {"source":19,"target":17,"value":4}, {"source":19,"target":18,"value":4}, {"source":20,"target":16,"value":3}, {"source":20,"target":17,"value":3}, {"source":20,"target":18,"value":3}, {"source":20,"target":19,"value":4}, {"source":21,"target":16,"value":3}, {"source":21,"target":17,"value":3}, {"source":21,"target":18,"value":3}, {"source":21,"target":19,"value":3}, {"source":21,"target":20,"value":5}, {"source":22,"target":16,"value":3}, {"source":22,"target":17,"value":3}, {"source":22,"target":18,"value":3}, {"source":22,"target":19,"value":3}, {"source":22,"target":20,"value":4}, {"source":22,"target":21,"value":4}, {"source":23,"target":16,"value":3}, {"source":23,"target":17,"value":3}, {"source":23,"target":18,"value":3}, {"source":23,"target":19,"value":3}, {"source":23,"target":20,"value":4}, {"source":23,"target":21,"value":4}, {"source":23,"target":22,"value":4}, {"source":23,"target":12,"value":2}, {"source":23,"target":11,"value":9}, {"source":24,"target":23,"value":2}, {"source":24,"target":11,"value":7}, {"source":25,"target":24,"value":13}, {"source":25,"target":23,"value":1}, {"source":25,"target":11,"value":12}, {"source":26,"target":24,"value":4}, {"source":26,"target":11,"value":31}, {"source":26,"target":16,"value":1}, {"source":26,"target":25,"value":1}, {"source":27,"target":11,"value":17}, {"source":27,"target":23,"value":5}, {"source":27,"target":25,"value":5}, {"source":27,"target":24,"value":1}, {"source":27,"target":26,"value":1}, {"source":28,"target":11,"value":8}, {"source":28,"target":27,"value":1}, {"source":29,"target":23,"value":1}, {"source":29,"target":27,"value":1}, {"source":29,"target":11,"value":2}, {"source":30,"target":23,"value":1}, {"source":31,"target":30,"value":2}, {"source":31,"target":11,"value":3}, {"source":31,"target":23,"value":2}, {"source":31,"target":27,"value":1}, {"source":32,"target":11,"value":1}, {"source":33,"target":11,"value":2}, {"source":33,"target":27,"value":1}, {"source":34,"target":11,"value":3}, {"source":34,"target":29,"value":2}, {"source":35,"target":11,"value":3}, {"source":35,"target":34,"value":3}, {"source":35,"target":29,"value":2}, {"source":36,"target":34,"value":2}, {"source":36,"target":35,"value":2}, {"source":36,"target":11,"value":2}, {"source":36,"target":29,"value":1}, {"source":37,"target":34,"value":2}, {"source":37,"target":35,"value":2}, {"source":37,"target":36,"value":2}, {"source":37,"target":11,"value":2}, {"source":37,"target":29,"value":1}, {"source":38,"target":34,"value":2}, {"source":38,"target":35,"value":2}, {"source":38,"target":36,"value":2}, {"source":38,"target":37,"value":2}, {"source":38,"target":11,"value":2}, {"source":38,"target":29,"value":1}, {"source":39,"target":25,"value":1}, {"source":40,"target":25,"value":1}, {"source":41,"target":24,"value":2}, {"source":41,"target":25,"value":3}, {"source":42,"target":41,"value":2}, {"source":42,"target":25,"value":2}, {"source":42,"target":24,"value":1}, {"source":43,"target":11,"value":3}, {"source":43,"target":26,"value":1}, {"source":43,"target":27,"value":1}, {"source":44,"target":28,"value":3}, {"source":44,"target":11,"value":1}, {"source":45,"target":28,"value":2}, {"source":47,"target":46,"value":1}, {"source":48,"target":47,"value":2}, {"source":48,"target":25,"value":1}, {"source":48,"target":27,"value":1}, {"source":48,"target":11,"value":1}, {"source":49,"target":26,"value":3}, {"source":49,"target":11,"value":2}, {"source":50,"target":49,"value":1}, {"source":50,"target":24,"value":1}, {"source":51,"target":49,"value":9}, {"source":51,"target":26,"value":2}, {"source":51,"target":11,"value":2}, {"source":52,"target":51,"value":1}, {"source":52,"target":39,"value":1}, {"source":53,"target":51,"value":1}, {"source":54,"target":51,"value":2}, {"source":54,"target":49,"value":1}, {"source":54,"target":26,"value":1}, {"source":55,"target":51,"value":6}, {"source":55,"target":49,"value":12}, {"source":55,"target":39,"value":1}, {"source":55,"target":54,"value":1}, {"source":55,"target":26,"value":21}, {"source":55,"target":11,"value":19}, {"source":55,"target":16,"value":1}, {"source":55,"target":25,"value":2}, {"source":55,"target":41,"value":5}, {"source":55,"target":48,"value":4}, {"source":56,"target":49,"value":1}, {"source":56,"target":55,"value":1}, {"source":57,"target":55,"value":1}, {"source":57,"target":41,"value":1}, {"source":57,"target":48,"value":1}, {"source":58,"target":55,"value":7}, {"source":58,"target":48,"value":7}, {"source":58,"target":27,"value":6}, {"source":58,"target":57,"value":1}, {"source":58,"target":11,"value":4}, {"source":59,"target":58,"value":15}, {"source":59,"target":55,"value":5}, {"source":59,"target":48,"value":6}, {"source":59,"target":57,"value":2}, {"source":60,"target":48,"value":1}, {"source":60,"target":58,"value":4}, {"source":60,"target":59,"value":2}, {"source":61,"target":48,"value":2}, {"source":61,"target":58,"value":6}, {"source":61,"target":60,"value":2}, {"source":61,"target":59,"value":5}, {"source":61,"target":57,"value":1}, {"source":61,"target":55,"value":1}, {"source":62,"target":55,"value":9}, {"source":62,"target":58,"value":17}, {"source":62,"target":59,"value":13}, {"source":62,"target":48,"value":7}, {"source":62,"target":57,"value":2}, {"source":62,"target":41,"value":1}, {"source":62,"target":61,"value":6}, {"source":62,"target":60,"value":3}, {"source":63,"target":59,"value":5}, {"source":63,"target":48,"value":5}, {"source":63,"target":62,"value":6}, {"source":63,"target":57,"value":2}, {"source":63,"target":58,"value":4}, {"source":63,"target":61,"value":3}, {"source":63,"target":60,"value":2}, {"source":63,"target":55,"value":1}, {"source":64,"target":55,"value":5}, {"source":64,"target":62,"value":12}, {"source":64,"target":48,"value":5}, {"source":64,"target":63,"value":4}, {"source":64,"target":58,"value":10}, {"source":64,"target":61,"value":6}, {"source":64,"target":60,"value":2}, {"source":64,"target":59,"value":9}, {"source":64,"target":57,"value":1}, {"source":64,"target":11,"value":1}, {"source":65,"target":63,"value":5}, {"source":65,"target":64,"value":7}, {"source":65,"target":48,"value":3}, {"source":65,"target":62,"value":5}, {"source":65,"target":58,"value":5}, {"source":65,"target":61,"value":5}, {"source":65,"target":60,"value":2}, {"source":65,"target":59,"value":5}, {"source":65,"target":57,"value":1}, {"source":65,"target":55,"value":2}, {"source":66,"target":64,"value":3}, {"source":66,"target":58,"value":3}, {"source":66,"target":59,"value":1}, {"source":66,"target":62,"value":2}, {"source":66,"target":65,"value":2}, {"source":66,"target":48,"value":1}, {"source":66,"target":63,"value":1}, {"source":66,"target":61,"value":1}, {"source":66,"target":60,"value":1}, {"source":67,"target":57,"value":3}, {"source":68,"target":25,"value":5}, {"source":68,"target":11,"value":1}, {"source":68,"target":24,"value":1}, {"source":68,"target":27,"value":1}, {"source":68,"target":48,"value":1}, {"source":68,"target":41,"value":1}, {"source":69,"target":25,"value":6}, {"source":69,"target":68,"value":6}, {"source":69,"target":11,"value":1}, {"source":69,"target":24,"value":1}, {"source":69,"target":27,"value":2}, {"source":69,"target":48,"value":1}, {"source":69,"target":41,"value":1}, {"source":70,"target":25,"value":4}, {"source":70,"target":69,"value":4}, {"source":70,"target":68,"value":4}, {"source":70,"target":11,"value":1}, {"source":70,"target":24,"value":1}, {"source":70,"target":27,"value":1}, {"source":70,"target":41,"value":1}, {"source":70,"target":58,"value":1}, {"source":71,"target":27,"value":1}, {"source":71,"target":69,"value":2}, {"source":71,"target":68,"value":2}, {"source":71,"target":70,"value":2}, {"source":71,"target":11,"value":1}, {"source":71,"target":48,"value":1}, {"source":71,"target":41,"value":1}, {"source":71,"target":25,"value":1}, {"source":72,"target":26,"value":2}, {"source":72,"target":27,"value":1}, {"source":72,"target":11,"value":1}, {"source":73,"target":48,"value":2}, {"source":74,"target":48,"value":2}, {"source":74,"target":73,"value":3}, {"source":75,"target":69,"value":3}, {"source":75,"target":68,"value":3}, {"source":75,"target":25,"value":3}, {"source":75,"target":48,"value":1}, {"source":75,"target":41,"value":1}, {"source":75,"target":70,"value":1}, {"source":75,"target":71,"value":1}, {"source":76,"target":64,"value":1}, {"source":76,"target":65,"value":1}, {"source":76,"target":66,"value":1}, {"source":76,"target":63,"value":1}, {"source":76,"target":62,"value":1}, {"source":76,"target":48,"value":1}, {"source":76,"target":58,"value":1} ] }

 

 

 

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: