本文主要是介绍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>
寄语:
新年的意义,正在于提供这样一个契机,让我们拥有全新的开始。趁着时光正好,去尝试,去挑战,去学习,去积累,去塑造一个美好而崭新的自己
这篇关于3D力导向树插件-3d-force-graph学习001的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!