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

一、引入文件：下载静态js文件引入

1、**以vue项目测试，在index.html文件中引入静态文件（js文件可在官网下载）**
2、**也曾尝试用npm包下载引入的方法，总是会有报错，所以采用静态js文件引入的方式**

---

二、基础Demo效果

vue文件关键代码展示

<template>
	<div ref="graph" id="3d-graph"></div>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				myGraph: null, // 3D-graph对象
				// 3D-graph加载的图数据
				graphData:{
					nodes:[{
							id: 'id1',
							name: '小兰花',
							val: 20,
							colorkey: '#B7D2F0'
						},
						{
							id: 'id2',
							name: '东方青苍',
							val: 20,
							colorkey: '#ECB5C9'
						},
						{
							id: 'id11',
							name: '种花',
							val: 10,
							colorkey: '#D9C8AE'
						},
						{
							id: 'id12',
							name: '修命簿',
							val: 15,
							colorkey: '#D9C8AE'
						},
						{
							id: 'id13',
							name: '司命',
							val: 20,
							colorkey: '#D9C8AE'
						},
						{
							id: 'id21',
							name: '月族首领',
							val: 10,
							group: 1,
							colorkey: '#B7D2F0'
						},
						{
							id: 'id22',
							name: '业火',
							val: 10,
							group: 2,
							colorkey: '#B7D2F0'
						},
						{
							id: 'id23',
							name: '荡平水云天',
							val: 20,
							group: 2,
							colorkey: '#B7D2F0'
						}
					],
					links:[{
							source: 'id1',
							target: 'id2',
							name: '情侣',
							colorkey: '#B7D2F0',
							value: 3
						},
						{
							source: 'id1',
							target: 'id11',
							name: '爱好',
							colorkey: '#D9C8AE',
							value: 1
						},
						{
							source: 'id1',
							target: 'id12',
							name: '职业',
							colorkey: '#D9C8AE',
							value: 1
						},
						{
							source: 'id1',
							target: 'id13',
							name: '师傅',
							colorkey: '#D9C8AE',
							value: 1
						},
						{
							source: 'id21',
							target: 'id2',
							name: '职业',
							colorkey: '#D9C8AE',
							value: 2
						},
						{
							source: 'id2',
							target: 'id22',
							name: '技能',
							colorkey: '#D9C8AE',
							value: 3
						},
						{
							source: 'id2',
							target: 'id23',
							name: '爱好',
							colorkey: '#D9C8AE',
							value: 1
						},
						{
							source: 'id23',
							target: 'id23',
							name: '爱好',
							colorkey: '#D9C8AE',
							value: 1
						}
					]
				}
			}
		},
		mounted() {
			this.initGraph()
		},
		methods: {
			initGraph() {
				let gData = this.graphData;
				const graph = ForceGraph3D()
				  (document.getElementById('3d-graph'))
				  .linkAutoColorBy(d => gData.links.colorkey)
				  .nodeAutoColorBy('colorkey')
				  .linkOpacity(1)
				  .graphData(gData);
			}
		}

	}
</script>

<style scoped lang="scss">
</style>

---

寄语：

新年的意义，正在于提供这样一个契机，让我们拥有全新的开始。趁着时光正好，去尝试，去挑战，去学习，去积累，去塑造一个美好而崭新的自己