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

2021-11-12 15:59:58

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

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

码农公寓