D3.js + Three.js 实现网络关系图

效果 Vue

import ForceGraph3D from '3d-force-graph';
import * as THREE from 'three'
import SpriteText from 'three-spritetext'
import { CSS2DRenderer, CSS2DObject } from 'three-css2drender'

initGraph(){
    const elem = document.getElementById('3d-graph');
    let WIDTH = elem.clientWidth;
    let HEIGHT = elem.clientHeight;
    const graphdata = new makedata().makefakedata()
    this.Graph = ForceGraph3D()(elem)
        .graphData(graphdata)
        .backgroundColor('rgba(0,0,0,0)')
        // .nodeThreeObjectExtend(true)
        .nodeThreeObject((node) => {
            const imgTexture = new THREE.TextureLoader().load(require(`./img/${node.img}`));
            const material = new THREE.SpriteMaterial({ map: imgTexture });
            const sprite = new THREE.Sprite(material);
            if (node.img === 'center.png') {
              sprite.scale.set(50, 50, 1);
            } else {
              sprite.scale.set(40, 40, 1);
            }
            let spriteText = new SpriteText(node.id);
            spriteText.color = node.color;
            spriteText.textHeight = 8;
            spriteText.position.x = -2;
            spriteText.position.y = 30;
            spriteText.position.z = 10;
            const group = new THREE.Group();
            group.add(sprite);
            group.add(spriteText);
            return group;
        })
        .nodeLabel((node)=>{	//鼠标移上节点展示数据
            this.visible = true;
            return `<div class="attack-info">
                <div class="shine_red">IP:<span>${node.id}</span></div>
                <div>MAC:<span>FA163EBA4D4D2D</span></div>
                <div>姓名:<span>1PWSDWEB02</span></div>
                <div>状态:<span>在线</span></div>
                <div>网龄:<span>2.0.240</span></div>
                <div>被警告次数:<span>11次</span></div>
            </div>  `
        })
        .nodeRelSize(19) 	//可用于更新数据和修改节点大小，只能存数字，需要用方法可以使用nodeVal()
        .nodeColor((node)=>{	
            if(node.id === "0") return '#gradientRing'    
        })
        .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
        .linkColor(()=>{ 
            return '#bf2e2e'           
        })
        .width(WIDTH)
        .height(HEIGHT)
        .onLinkHover(link => elem.style.cursor = link ? 'pointer' : null)
        this.Graph.d3Force('link').distance(100); 
}

参考资料
感谢：blog.csdn.net/qq_41488724…