d3力导向图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>force</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

<svg height="600" width="1200"></svg>

</body>

<script>

    //数据
    var nodes = [//节点集
        { name: "湖南邵阳" },
        { name: "山东莱州" },
        { name: "广东阳江" },
        { name: "山东枣庄" },
        { name: "赵匡胤" },
        { name: "刘邦" },
        { name: "李世民" },
        { name: "朱元璋" },
        { name: "班长" }
    ];
    var edges = [//边集
        { source: 0, target: 4, relation: "籍贯", value: 1.3 },
        { source: 4, target: 5, relation: "舍友", value: 1 },
        { source: 4, target: 6, relation: "舍友", value: 1 },
        { source: 4, target: 7, relation: "舍友", value: 1 },
        { source: 1, target: 6, relation: "籍贯", value: 2 },
        { source: 2, target: 5, relation: "籍贯", value: 0.9 },
        { source: 3, target: 7, relation: "籍贯", value: 1 },
        { source: 5, target: 6, relation: "同学", value: 1.6 },
        { source: 6, target: 7, relation: "朋友", value: 0.7 },
        { source: 6, target: 8, relation: "职责", value: 2 }
    ];

    var margin = 30;//边距
    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');

    //创建一个分组 并设置偏移
    var g = svg.append('g').attr('transform', 'translate(' + margin + ',' + margin + ')');


    //新建一个颜色比例尺
    /*var scaleColor = d3.scaleOrdinal()
        .domain(d3.range(nodes.length))
        .range(d3.schemeCategory10);*/
    var scaleColor = d3.scaleOrdinal(d3.schemeSet3)
    //新建一个力导向图
    var forceSimulation = d3.forceSimulation()
        .force("link", d3.forceLink())
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter());


    //生成节点数据
    forceSimulation.nodes(nodes)
        .on('tick', linksTick);//这个函数下面会讲解


    //生成边数据
    forceSimulation.force('link')
        .links(edges)
        .distance(function (d, i) {
            return d.value * 100;//设置边长
        });

    //设置图形 中心点
    forceSimulation.force('center')
        .x(width / 2)//设置x坐标
        .y(height / 2)//设置y坐标

    //再来看下顶点数据 和 边数据
    console.log(nodes);
    console.log(edges);


    //绘制边  这里注意一下绘制顺序  在d3中  各元素是有层级关系的，先绘制的在下面
    var links = g.append('g')
        .selectAll('line')
        .data(edges)
        .enter()
        .append('line')
        .attr('stroke', function (d, i) {
            return scaleColor(i);//设置边线颜色
        })
        .attr('storke-width', '1');//设置边线宽度


    //绘制边上的文字
    var linksText = g.append('g')
        .selectAll('text')
        .data(edges)
        .enter()
        .append('text')
        .text(function (d, i) {
            return d.relation;
        });


    //创建节点分组
    var gs = g.selectAll('.circle')
        .data(nodes)
        .enter()
        .append('g')
        .attr('transform', function (d, i) {
            return 'translate(' + d.x + ',' + d.y + ')'
        })
        .call(
            d3.drag()//相当于移动端的拖拽手势  分以下三个阶段
                .on('start', start)
                .on('drag', drag)
                .on('end', end)
        );

    //绘制节点
    gs.append('circle')
        .attr('r', 10)
        .attr('fill', function (d, i) {
            return scaleColor(i);
        });

    //绘制文字
    gs.append('text')
        .text(function (d, i) {
            return d.name;
        });





    function linksTick() {
        links
            .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; });

        linksText
            .attr("x", function (d) {
                return (d.source.x + d.target.x) / 2;
            })
            .attr("y", function (d) {
                return (d.source.y + d.target.y) / 2;
            });

        gs && gs.attr('transform', function (d, i) {
            return 'translate(' + d.x + ',' + d.y + ')';
        })

    }


    function start(d) {
        if (!d3.event.active) {//event.active 属性对判断并发的拖拽手势序列中的 start 事件和 end 事件: 在拖拽手势开始时为0，在拖拽结束最后一个手势事件时为0
            //这里就是drag的过程中
            forceSimulation.alphaTarget(0.8).restart();//设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0，1]
        }
        d.fx = d.x;
        d.fy = d.y;
    }

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

    function end(d) {
        if (!d3.event.active) {
            forceSimulation.alphaTarget(0);
        }
        d.fx = null;
        d.fy = null;
    }


</script>

</html>

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
相关阅读:
0动态规划+二分查找中等 LeetCode2008. 出租车的最大盈利
 数据结构-静态链表创建
 【Docker】Docker里面安装win系统
 Java使用IText根据pdf模板创建pdf文件
 编译器的差别gcc和VS
文章聚合怎么进行文章伪原创
 移动边缘计算终端如何赋能高校学习空间智慧管理
 python教程：selenium WebDriver 中的几种等待
 boost之日期时间(date_time)
Linux C 应用编程学习笔记——（3）深入探究文件 I/O
原文地址：https://blog.csdn.net/GoSaint/article/details/125551645