【D3.js 学习记录】——Force 力导图数据可视化_综合

Force 力导图

对数据结构要求比较严格
forceSimulation() 与一般的data join不太一样，可以理解为它是d3这么一个大的可视化库中的一个小库

运作机制

输入一批结点List

let nodes = [{
    },{
    },{
    },{
    }]
set simulation = d3.forceSimulation(nodes)

定义simulation后会发生：

补全 nodes 中每个结点的数据结构
index（编号），x，y（相对于画布的坐标），vx，vy（两个方向上的速度）
开始模拟粒子运动
- 粒子质量为1
- 不断通过内部 timer 触发 ‘tick’ 事件
根据一系列的 ‘力’ 来计算每个粒子的加速度，速度，位置

三个属性

d3.forceManyBody

粒子之间两两作用的力，如果为正就互相吸引，为负就互相排斥
strength 为正互相吸引，为负则互相排斥
即规定是万有引力还是万有斥力，数值是力的大小

d3.forceCenter

指向某一个中心的力，会尽可能让粒子向中心靠近或重合（通常定位画布中央）

d3.forceLink

粒子之间两两的作用力
让互相之间有link的节点保持一个特定的距离
在保持一定距离的前提下，没有力
若超出该范围，就会多增加一个力
给图连边用的，最后要设置strength和distance，strength规定了力的大小，distance规定了两两结点连边的距离范围

tick事件

d3.forceSimulation()通过tick事件来更新节点的状态的，状态包括位置，速度，加速度等

更新后的状态仅仅为状态

不会反映到任何图元
仅对数据进行修改

人为设置每次tick要如何更新图元

simulation.on('tick',ticked);

配置simulation

在初始化每个图元后，只要为simulation配置了’tick’的回调，simulation会自动开始模拟。
注意：simulation.stop()会停止timer的tick循环

配置simulation一般用上文介绍的三个属性：

d3.forceLink
d3.forceCenter
d3.forceManyBody

图形数据

外层object

在这里插入图片描述

内层links

在这里插入图片描述

代码实现

实现分为4个步骤

数据预处理

links = data.links //边的集合
//创建一个节点的集合
nodes = [];
for (let i  = 0 ; i < data['#nodes'] ; i++){
    nodes.push({
    'index': i })
}

图元初始化，data join

const render_init = function(){
    lines = svg.selectAll('line').data(links).join('line').attr('stroke', 'black').attr('opacity', 1).attr('stroke-width', 1);circles = svg.selectAll('circle').data(nodes).enter().append('circle').attr('r', 5).attr('fill', 'blue')// .call(drag);
}

力模拟

simulation = d3.forceSimulation(nodes).force('manybody', d3.forceManyBody().strength(-30)).force('center', d3.forceCenter(width/2,height/2)).force('link',d3.forceLink(links).strength(0.1).distance(100))

将模拟的力反应在图元上，用ticked更新图元

let circle,line;
const ticked = function(){
    
lines.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
circles
.attr('cx', d => d.x)
.attr('cy', d => d.y);
};simulation.on('tick',ticked)

所有调用流程如下

d3.json('datapath').then(data => {
    data-preprocessing();//预处理render_init();//图元初始化simulation();//力模拟simulation.on('tick',tick);//tick
})

可视化代码

<!DOCTYPE html>
<html><head><title>Force</title><script src="./js/d3.min.js"></script></head><body><svg width="1800" height="920" id="mainsvg" class="svgs"></svg><script>let svg = d3.select('#mainsvg');var width = svg.attr('width'), height = svg.attr('height');let nodes, links;let circles, lines;let simulation;const render_init = function(){
    lines = svg.selectAll('line').data(links).join('line').attr('stroke', 'black').attr('opacity', 1).attr('stroke-width', 1);circles = svg.selectAll('circle').data(nodes).enter().append('circle').attr('r', 5).attr('fill', 'blue')// .call(drag);}const ticked = function(){
    lines.attr('x1', d => d.source.x).attr('y1', d => d.source.y).attr('x2', d => d.target.x).attr('y2', d => d.target.y);circles.attr('cx', d => d.x).attr('cy', d => d.y);}d3.json('./data/socfb-Caltech36.json').then(data => {
    links = data.links//创建一个节点的集合nodes = [];for (let i  = 0 ; i < data['#nodes'] ; i++){
    nodes.push({
    'index': i })}console.log(nodes);render_init(); //图元初始化，datajoin line 和 circlesimulation = d3.forceSimulation(nodes).force('manybody', d3.forceManyBody().strength(-30)).force('center', d3.forceCenter(width/2,height/2)).force('link',d3.forceLink(links).strength(0.1).distance(100)).on('tick',ticked)})</script></body>
</html>

可视化效果

在这里插入图片描述