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