d3.layout.force()

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

力学(Force)的API说明

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 - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

一个基本的力学图有三个要素：力学结构,节点标记和节点连线。力学结构规范节点的行为，连线和节点显示节点信息和关系。

我们通过一个制作一个力学图来讲解力学布局。

1. 数据

var dataset = [ {name: "桂林", source: 0, target: 1}, {name: "广州", source: 1, target: 2}, {name: "厦门", source: 2, target: 3}, {name: "杭州", source: 3, target: 4}, {name: "上海", source: 4, target: 5}, {name: "青岛", source: 5, target: 6}, {name: "天津", source: 6, target: 0} ];

2. 数据转换

var width = 400; var height = 400; var force = d3.layout.force() .nodes(dataset) //指定节点数组 .links(dataset) //指定连线数组 .size([width, height]) //指定范围 .linkDistance(80) //指定连线长度 .charge([-400]); //相互之间的作用力 force.start(); //开始作用

通过转换数据后，数据被转换成如下形式：

转换后，数据对象里多了一些变量。其意义如下：

index：节点的索引号 px, py：节点上一个时刻的坐标 x, y：节点的当前坐标 weight：节点的权重

3. 绘制图形

有了转换后的数据，就可以作图了。分别绘制三种图形元素：

line，线段，表示连线。 circle，圆，表示节点。 text，文字，描述节点。

生成svg容器

var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height);

生成连线

var svg_edges = svg.selectAll("line") .data(dataset) .enter() .append("line") .style("stroke", "#ccc") .style("stroke-width", 1);

定义颜色比例尺

var color = d3.scale.category20();

生成圆形节点

var svg_nodes = svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", 20) .style("fill", function(d, i) { return color(i); }) .call(force.drag); //使得节点能够拖动

生成节点文字

var svg_texts = svg.selectAll("text") .data(dataset) .enter() .append("text") .style("fill", "black") .attr("dx", 20) .attr("dy", 8) .text(function(d) { return d.name; });

4、事件触发

由于力导向图是不断运动的，每一时刻都在发生更新，因此，必须不断更新节点和连线的位置。

力导向图布局 force 有一个事件 tick，每进行到一个时刻，都要调用它，更新的内容就写在它的监听器里就好。

force.on("tick", function(){ //对于每一个时间间隔 //更新连线坐标 svg_edges.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; }); //更新节点坐标 svg_nodes.attr("cx",function(d){ return d.x; }) .attr("cy",function(d){ return d.y; }); //更新文字坐标 svg_texts.attr("x", function(d){ return d.x; }) .attr("y", function(d){ return d.y; }); });

查看在线演示，用鼠标拖拽看看

相关资源：python入门教程(PDF版)