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; });
});
