d3.js力导向图使用详解_d3力导向图随机点击两个节点

创建一个力导向图需要三个东西：

• 仿真模拟系统
• 节点
• 力

当然，一般我们也会创建links(边)来连接两个节点，例如上图

仿真模拟系统中存在多个节点和多种类型的力，通过力控制节点的运动，每个节点都在多个力的作用下不断发生移动，直到系统趋于平衡。中间会发生多次tick事件，每次tick，仿真系统都会更新节点的位置，且系统的能量(alpha)也会逐渐降低，直到达到某个数值(alphaMin)，整个图表就停止运动了。

节点

节点是一个对象数组，对象的属性没有限制，你可以添加多种信息来控制图表的渲染(例如颜色大小等)，每次tick都会更新节点的位置(x,y)和速度velocity(vx,vy)。

力

力驱动着整个系统运动，你可以给系统添加力，控制节点的运动。

常见的几种力：

• d3.forceCenter([x, y])：中心力，将所有的节点都推向图表的中心（给定的一个点），默认坐标是[0,0]，施加力时，所有节点的相对位置保持不变
• d3.forceCollide([radius])：collision，碰撞力，使两个节点接触时像弹簧球一样弹开
• d3.forceLink([links])： 连接力，拉动节点相互连接，好像节点之间有一个弹簧
• d3.forceManyBody()：排斥力，类似带电电子的排斥方式，推动所有节点彼此远离
• d3.forceX,d3.forceY：定位力，将节点推向期望的点（x,y）,不同于forceCenter，它们会改变节点的相对位置

同时可以访问这个demo，测试下不同力的作用。

links

定义了节点之间的关系，通过节点间的连线定义。同时links也是创建连接力(forceLink)必不可少的东西。

example:

var nodes = [
    {"id": "Alice"},
  	{"id": "Bob"},
  	{"id": "Carol"}
];

var links = [
  	{"source": 0, "target": 1}, // Alice → Bob
  	{"source": 1, "target": 2} // Bob → Carol
];
1
2
3
4
5
6
7
8
9
10

每个对象必须包含source target属性，表示边的起点和终点，属性的值是节点的id，默认是节点在数组中的索引，同时也可以自定义id getter：

d3.forceLink().id(d => d.id)
1

创建一个力导向图

通过渲染一个树结构的数据来展示力导向图的使用

数据：json

1、根据这份数据分析出我们需要的所有节点和边：

const root = d3.hierarchy(data) 
const nodes = root.descendants()
const links = root.links()
1
2
3

2、创建svg容器

const svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'chart')
1
2
3
4
5

3、创建仿真系统

const simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody())
    .force('link', d3.forceLink(links))
    .force('x', d3.forceX(width / 2))
    .force('y', d3.forceY(height / 2))
1
2
3
4
5

4、设置排斥力和连接力的部分属性

simulation.alphaDecay(0.05) // 衰减系数，值越大，图表稳定越快
simulation.force('charge')
    .strength(-50) // 排斥力强度，正值相互吸引，负值相互排斥
simulation.force('link')
    .id(d => d.id) // set id getter
    .distance(0) // 连接距离
    .strength(1) // 连接力强度 0 ~ 1
    .iterations(1) // 迭代次数
1
2
3
4
5
6
7
8

5、绘制边

边的绘制需要先进行，因为svg中没有类似z-index这样的属性来设置层级，后绘制的会覆盖先绘制的

const simulationLinks = svg.append('g')
    .selectAll('line')
    .data(links)
    .enter()
    .append('line')
    .attr('stroke', d => '#c2c2c2')
1
2
3
4
5
6

6、绘制节点并设置拖动事件

每次拖动开始，设置alphaTarget并重启仿真系统，alpha的值会从alphaTarget递减到alphaMin，所以如果你将alphaTarget的值设置的比alphaMin小，就会卡住，不会继续更新。

 const simulationNodes = svg.append('g')
    .attr('fill', '#fff')
    .attr('stroke', '#000')
    .attr('stroke-width', 1.5)
    .selectAll('circle')
    .data(nodes)
    .enter()
    .append('circle')
    .attr('r', 3.5)
    .attr('fill', d => d.children ? null : '#000') // 叶子节点黑底白边，父节点白底黑边
    .attr('stroke', d => d.children ? null : '#fff')
    .call(d3.drag()
        .on('start', started)
        .on('drag', dragged)
        .on('end', ended)
    )

function started(d) {
    if (!d3.event.active) {
        simulation.alphaTarget(.2).restart()
    }
    d.fx = d.x 
    // fx fy 表示下次节点被固定的位置
    // 每次tick结束node.x都会被设置为node.fx，node.vx设置为0
    d.fy = d.y
}

function dragged(d) {
    d.fx = d3.event.x
    d.fy = d3.event.y
}

function ended(d) {
    if (!d3.event.active) {
        // 设置为0直接停止，如果大于alphaMin则会逐渐停止
        simulation.alphaTarget(0)
    }
    d.fx = null
    d.fy = null
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

7、最后设置tick事件

虽然仿真系统会更新节点的位置(只是设置了nodes对象的x y属性)，但是它不会转为svg内部元素的坐标表示，这需要我们自己来操作

simulation.on('tick', ticked) 
function ticked() {
    simulationLinks.attr('x1', d => d.source.x )
        .attr('y1', d => d.source.y )
        .attr('x2', d => d.target.x )
        .attr('y2', d => d.target.y )

    simulationNodes.attr('cx', d => d.x )
        .attr('cy', d => d.y )
}
1
2
3
4
5
6
7
8
9
10

最后，这里有完整的代码，和在线demo

参考文章

• d3中文文档
• Force Directed Graphs with d3 version 4
• D3力导向图
• Force-Directed Tree