1.首先创建vue3的项目
2.创建好后通过开发工具打开项目并打开命令行，输入指令 npm install 3d-force-graph 安装即可
3.在使用的页面中引入 3d-force-graph
<!--官网的 basic案例--> <template> <!-- ref 用于在组件中引用当前的 DOM 元素。--> <div ref="container"></div></template>
<script setup>
import {onMounted, ref} from "vue"; // 引入3d-force-graph import ForceGraph3D from "3d-force-graph";
const container = ref(null) // 作用是创建一个响应式的引用对象，并将其初始值设置为 null。
const N = ref(300)
const gData = ref({
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
})
onMounted(()=> {
loadGrapg()
})
// 渲染页面 const loadGrapg =() => {
ForceGraph3D()(container.value) // 在给定的容器中创建一个 3D 力导向图
.graphData(gData.value); // 将数据 gData 设置为力导向图的图数据
}
</script>
<style scoped>
</style>
4. 调用接口的时候，后端返回数据只需要nodes[{id:0},{id:1}], links: [{source:{}, target:{}]---source:原物体，target:目标物体
补充：
ForceGraph3D()等方法及用法如下：
// 在节点处显示文本，只需填写 nodes数组中对象的某个想要显示文本的属性名即可
.nodeLabel('id')
// 通过groudId来分组不同的颜色.nodeAutoColorBy('group')
// 设置线条的箭头长度
.linkDirectionalArrowLength(3.5)
// 用于设置线条箭头的相对位置
.linkDirectionalArrowRelPos(1)
// 用于设置线条的曲率
.linkCurvature(0.25)
// 启用或禁用线条箭头的粒子效果
.linkDirectionalParticles(true)
// 设置箭头粒子的速度为
.linkDirectionalParticleSpeed(0.005)
// 设置线条透明度
.linkOpacity(0.5)
// 根据连接属性自动为连接线条着色，（这里官方文档写的是d => gData.nodes[d.source].group ，需要自己根据数据微调）
.linkAutoColorBy( d=> gData.value.nodes[d.value].group ) 标签：gData,force,graph,nodes,id,3d From： https://www.cnblogs.com/xytx906/p/17529573.html