?背景：項目 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 高亮顯示：

這里注意一下 鼠標移出的時候 樣式恢復到之前的樣式

ps：我們的link數據有一些重復的，所以要考慮到 target 和 source 相反的情況

.on("mouseover", function(d, i, o) {let currentd = d.idvar connectedNodeIds = graph.links.filter(x => x.source.id == d.id || x.target.id == d.id).map(x => x.source.id == d.id ? x.target.id : x.source.id)d3.select(".nodes").selectAll("circle").attr("fill", function(c) {if (connectedNodeIds.indexOf(c.id) > -1 || c.id == d.id) return "red";else return '#e49433'})d3.select(".links").selectAll("line").style("stroke", function(d,c) {if ((d.target.id === currentd && connectedNodeIds.indexOf(d.source.id) > -1) || (d.source.id === currentd && connectedNodeIds.indexOf(d.target.id) > -1)) {return 'red'} else {return '#999'}})}).on("mouseout", function(d) {d3.select(".nodes").selectAll("circle").attr("fill", "#e49433");d3.select(".links").selectAll("line").style("stroke", '#999')}) 復制代碼

參考鏈接

參考鏈接2

mouseover參考鏈接

總結

以上是生活随笔為你收集整理的d3 力导向图 force graph的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。