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>