3D力导向树插件-3d-force-graph学习002

一、实现效果：节点+文字同时展示

1. 节点显示不同颜色
2. 节点盒label文字并存
3. 节点上添加点击事件

---

二、利用插件：CSS2DRenderer

提示：以下引入文件均可在安装完3d-force-graph的安装包里找到

---

三、关键代码

提示：模拟数据可按如下格式填充

// gData数据格式如下
let gData = {
	 "nodes": [
	    {"id": "Myriel", "group": 1},
	    {"id": "Napoleon", "group": 1}
	 ],
	 "links": [
	    {"source": "Napoleon", "target": "Myriel", "value": 1},
	    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
	  ]
}
initBlockJson(){
	const Graph = ForceGraph3D()
			(document.getElementById('3d-graph'))
	      .nodeAutoColorBy('user')
	      .nodeLabel(node => `${node.user}: ${node.description}`)
	      .onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'))
		.graphData(gData);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

4、寄语

花未全开月未圆
半山微醉尽余欢
何需多虑盈亏事
终归小满胜万全