python力导向图图_d3 力导向图 force graph

背景：项目 vue.js + d3 v4

力导向图可以直观看出各个元素之间的相互作用力

数据：

{

nodes:[{id:xxx, group: xx},{},...] // nodes 是每个节点 group 是聚类后的分组 为了让每个 circle 显示不同分组的颜色

links:[{target:xxx, source:xxx, value:xx },...] // links 为连线 value 可以代表 line 的 stroke-width

}复制代码

具体的代码就不贴了，官网很多 demo 都可以直接拿来用

效果如下：

在这里介绍几个点..

1.有的时候我们需要让他们之间分隔的间隔大一点，需要修改的地方：

var simulation = d3.forceSimulation()

.force("link", d3.forceLink().id(function(d) {

return d.id;

}))

.force("charge", d3.forceManyBody().strength(-200).distanceMax(100)) // strength 默认 -30

.force("center", d3.forceCenter(width / 2, height / 2));

复制代码

2.当我们鼠标移到某个点的时候，想让与之相连的 circle fill + line stroke 高亮显示：

这里注意一下 鼠标移出的时候 样式恢