【D3.js 学习总结】10、D3布局-力学图

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

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

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

【D3.js 学习总结】10、D3布局-力学图

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(); //开始作用

通过转换数据后,数据被转换成如下形式:

【D3.js 学习总结】10、D3布局-力学图

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

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

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

上一篇:【D3.js 学习总结】9、D3布局-饼状图


下一篇:【D3.js 学习总结】11、D3布局-弦图