<template>
<div id="graph" ref="d3Graph"></div>
</template>
<script setup lang="ts">
import ForceGraph3D from '3d-force-graph';
import { ref, onMounted } from 'vue'
import emitter from '@/util/bus.js'
import { getLeafMap, getMapPointByIndustry } from '../api/api'
let graphData
const d3Graph = ref()
const renderGraph = () => {
const Graph = ForceGraph3D()(d3Graph.value).
nodeAutoColorBy('lv').
nodeOpacity(1).
nodeVal(node => node.symbolSize).
nodeLabel(node => node.name+' :'+JSON.stringify(node.value)).
onNodeClick(async node => {
const distance = 150;
const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
Graph.cameraPosition(
{x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio},
node,
1500)
const res = await getMapPointByIndustry({ lv: node.lv, industry: node.code})
emitter.emit('point', res)}).
width(d3Graph.value.offsetWidth).
height(d3Graph.value.offsetHeight).
graphData(graphData)
}
const init = async() => {
const res = await getLeafMap({ county: '' })
res.nodes.forEach((item: { lv: number, itemStyle?: {}, symbolSize?: number, value: number}, index: number )=> {
item.id = index
});
graphData = res
renderGraph()
}
onMounted(() => {
init()
})
</script>
<style scoped lang="less">
#graph{
height: 100%;
width: 100%;
}
</style>
3d graph (3d关系图)的使用
最新推荐文章于 2024-04-01 17:47:51 发布