D3.js中Force-Directed Graph详解_d3js force-directed graph

作者：weixin_40725706 | 2024-02-23 01:35:02

踩

d3js force-directed graph

Force-Directed Graph

聊一聊力导向图。力导向图在echarts等快捷的可视化工具中都有非常方便的实现方式。来看看d3.js是如何实现的。
先来一张d3.js官网实现的力导向图的照片：

接下来解释一下d3.js中实现此力导向图的过程。

index.html——源码

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// 定义一个svg画布
var svg = d3.select("svg"),
    // 获取svg画布的宽度
    width = +svg.attr("width"),
    // 获取svg画布的高度
    height = +svg.attr("height");

// 定义一个颜色函数
// d3.scaleOrdinal()函数用来定义一个序列，其中的参数d3.schemeCategory20代表序
// 列函数的值域，这里d3.schemeCategory20指的是由RGB十六进制字符串表示的二十种分类
// 颜色的数组。因此，color()函数的值域就是离散的20中颜色值
var color = d3.scaleOrdinal(d3.schemeCategory20);

// 创建一个力学模拟器
// d3.forceSimulation()函数用来创建一个空的模拟器
var simulation = d3.forceSimulation()
    // simulation.force(name,[force])函数的作用是：如果指定了力force，则为指
    // 定的名称name分配力并返回该模拟。 如果未指定力，则返回具有指定名称的力，如果
    // 没这样的力，则返回undefined。 （默认情况下，新的模拟没有力量。）
    // d3.forceLink()函数用来创建一个空的link力数组
    // d3.forceLink().id()用来指定link力数组中每个节点的id的获取方式
    .force("link", d3.forceLink().id(function(d) { return d.id; }))

     // 创建一个charge数组，forceManyBody()返回一个新的多体力数组
    .force("charge", d3.forceManyBody())

     // d3.forceCenter()用指定的x坐标和y坐标创建一个新的居中力。
     // 如果未指定x和y，则默认为⟨0,0⟩。
    .force("center", d3.forceCenter(width / 2, height / 2));

// 读取数据，该例子中的数据是雨果的《悲惨世界》中的人物关系信息。
// 通过力学模拟，人物关系相近的节点会比较接近；反之，节点会比较疏远
d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

  // 定义人物节点之间连线的信息
  var link = svg.append("g")
      .attr("class", "links")

     // 用line元素来绘制 
    .selectAll("line")
     // 绑定json文件中的links数据
    .data(graph.links)
    .enter().append("line")
      // 人物节点之间连接线的粗细通过连接线的value字段来计算，value越大，连接线 
      // 越粗
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  // 定义人物节点信息
  var node = svg.append("g")
      .attr("class", "nodes")
     // 人物节点通过圆来绘制 
    .selectAll("circle")
    // 为人物节点绑定nodes数据
    .data(graph.nodes)
    .enter().append("circle")
      // 设置节点半径
      .attr("r", 5)
      // 设置节点的填充色，通过节点的group属性来计算节点的填充颜色
      .attr("fill", function(d) { return color(d.group); })
      // 以定义的这些人物节点为参数，调用drag()函数
      // 绑定拖拽函数的三个钩子，即拖拽开始、拖拽中、拖拽结束
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  //为人物节点绑定文字
  node.append("title")
      .text(function(d) { return d.id; });

  // 为力模拟器绑定节点数据
  // 会为每个节点自动添加可视化时所需的index,vx,xy,x,y五个字段信息
  // 并且为simulation内部计时器tick监听绑定动作，来绘制图形
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);// 此处在每次tick时绘制力导向图
  // 为力模拟器绑定连接线数据
  // 调用结束后，会为每个连接线添加可视化时所需要的index,vx,vy,x,y五个字段信息
  simulation.force("link")
      .links(graph.links);

  // 定义simulation内部计时器tick每次结束时的动作
  function ticked() {

    // 每次tick计时到时，连接线的响应动作
    // 设置连接线两端的节点的位置
    link
        .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; });

    // 每次tick计时到时，节点的响应动作
    // 设置节点的圆心坐标
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

// 定义开始拖拽节点时的动作
function dragstarted(d) {
  // restart()方法重新启动模拟器的内部计时器并返回模拟器。 
  // 与simulation.alphaTarget或simulation.alpha一起使用时，此方法可用于在交互
  // 过程中进行“重新加热”模拟，例如在拖动节点时，在simulation.stop暂停之后恢复模
  // 拟。
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

// 定义拖拽中的动作
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

// 定义拖拽结束的动作
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

至此，力导向图解析完毕，这篇中有很多关于力学的专业的功能函数，理解起来有点难度。今天周日，起床后第一件事就是把这篇完结了，欧耶~

这篇文章命运破折，周日写的，周一早上丢了，幸好认识csdn一哥们，经指点，最后顺利找回了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/132738