在vue中使用3d-force-graph_vue 3d 节点

 一 下载

import ForceGraph3D from '3d-force-graph';

二、引入初始化

github地址：https://github.com/vasturiano/3d-force-graph 

1. 引入：

import ForceGraph3D from '3d-force-graph'

2.html元素：

<div ref="graph" id="3d-graph"></div>

3.初始化JSON数据格式

 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
          },
          {
            id: 'id22',
            name: '业火',
            val: 10,
            group: 2
          },
          {
            id: 'id23',
            name: '荡平水云天',
            val: 20,
            group: 2
          }
        ],
        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
          }
        ]
      },
    }
}

initGraph () {
    this.myGraph = ForceGraph3D()
    this.myGraph(document.getElementById('3d-graph')).graphData(this.graphData)
​​​​​​​}

三、使用

     1. 基本渲染图谱

  this.myGraph = ForceGraph3D()
  this.myGraph(document.getElementById('3d-graph')).graphData(this.graphData)

2.画布容器样式修改(Container layout)

 this.myGraph(document.getElementById('3d-graph')).graphData(this.graphData)
        .backgroundColor('#ffffff')  //画布的背景颜色
        .height(this.graphHeight)  //画布的背高度
        .width(this.graphWidth)  //画布的背宽度

3. 节点样式（Node styling）

 this.myGraph = ForceGraph3D()
 this.myGraph(document.getElementById('3d-graph'))
        .graphData(this.graphData)
        // .jsonUrl('./datasets/miserables.json') //找不到文件 目前无法使用，未解决此问题
        // .nodeLabel('name') // 鼠标悬浮至mesh上显示标签，标签内容为id
        .nodeLabel(node => {
          return `<p style="color: #000000">${node.name}<p>` // `${node.id}: ${node.name}`
        })
        .nodeColor('colorkey') // 数据中对应节点颜色的key,不使用nodeColor默认会自己提取color的颜色,若没有color则会给默认颜色
        .nodeAutoColorBy('group') // //按照group进行分类，仅影响没有颜色值的数据
        .nodeResolution(12) // 数值越大 节点圆越圆滑
        // 在此函数自定义节点显示状态，可使用3d也可使用2d，可以显示html、图片、以及使用three.js绘制的几何体等
        .nodeThreeObject(node => {
          const sprite = new SpriteText(node.name)  //需要下载import SpriteText from 'three-spritetext'
          // sprite.material.depthWrite = false; // make sprite background transparent
          sprite.color = '#000000' // node.group
          sprite.textHeight = 6
          return sprite
        })
        .nodeThreeObjectExtend(true) // 节点对象访问器函数、属性或布尔值，用于确定在使用自定义nodeThreeObject（false）时是替换默认节点还是扩展它（true）

更多配置项见下方Node styling配置 

4.节点材质变化

// 文本作为节点
nodeThreeObject(node => {
     const sprite = new SpriteText(node.id);
     // sprite.material.depthWrite = false; // make sprite background transparent
     sprite.color = node.color;
     sprite.textHeight = 8;
     return sprite;
 });
 
// 图片作为节点 img为node数据里面图片名  需要使用three.js
.nodeThreeObject(({ img }) => {
     const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`); //创建纹理贴图
     const material = new THREE.SpriteMaterial({ map: imgTexture });
     const sprite = new THREE.Sprite(material);
     sprite.scale.set(12, 12)
     return sprite;
 })
 // html作为节点
 .nodeThreeObject(node => {
     const nodeEle = document.createElement('div');
     nodeEle.textContent = node.name;
     nodeEle.style.color = node.colorkey;
     nodeEle.className = 'nodeLabel';
     return new THREE.CSS2DObject(nodeEle);
  })
// 几何体作为节点
.nodeThreeObject(({ id }) => {
     const ids = id.slice(2)
     const Mesh = new THREE.Mesh(
              [
                // 方块
                new THREE.BoxGeometry(
                  Math.random() * 20,
                  Math.random() * 20,
                  Math.random() * 20
                ),
                // 锥体
                new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
                // 圆柱
                new THREE.CylinderGeometry(
                  Math.random() * 10,
                  Math.random() * 10,
                  Math.random() * 20
                ),
                // 十二面体
                new THREE.DodecahedronGeometry(Math.random() * 10),
                // 球体
                new THREE.SphereGeometry(Math.random() * 10),
                // 圆环
                new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
                // 环面扭结
                new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
              ][ids % 7],
              new THREE.MeshLambertMaterial({
                color: Math.round(Math.random() * Math.pow(2, 24)),
                transparent: true,
                opacity: 0.75
              })
            )
     return Mesh
})

5.连接线配置(Link styling)

this.myGraph = ForceGraph3D()
this.myGraph(document.getElementById('3d-graph'))
        .linkColor('colorkey') // 可以选择根据colorkey值显示颜色，如果不设置默认显示color字段
        .linkOpacity(0.7) // 链接透明度
        .linkWidth(1)
        .linkDirectionalArrowLength(3.5) // 箭头长度
        .linkDirectionalArrowRelPos(1) // 箭头位置偏移 source指向target
        .linkCurvature(0.25) // 曲度     

6.连接线上显示文字(text in links)

 this.myGraph = ForceGraph3D()
 this.myGraph(document.getElementById('3d-graph'))
        // 显示的文字
        .linkThreeObject(link => {
          // extend link with text sprite
          const sprite = new SpriteText(`${link.name}`)
          sprite.color = '#000'
          sprite.textHeight = 6
          return sprite
        })
        .linkThreeObjectExtend(true)  //不替换原来的样式只扩展 true
           //连接的位置更新
        .linkPositionUpdate((sprite, { start, end }) => {
          const middlePos = Object.assign(
            ...['x', 'y', 'z'].map(c => ({
              [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
            }))
          )
          console.log(middlePos)
          // Position sprite
          Object.assign(sprite.position, middlePos)
        })

7.自连接

  this.myGraph = ForceGraph3D()
  this.myGraph(document.getElementById('3d-graph'))
        .linkCurvature('curvature') // 曲率
        .linkCurveRotation(180) // 连接线旋转方向

8.定向移动例子

this.myGraph = ForceGraph3D()
this.myGraph(document.getElementById('3d-graph'))
           // 定向移动例子
        .linkDirectionalParticles('value') // 粒子个数
        .linkDirectionalParticleSpeed(d => d.value * 0.001) // 粒子运动速度     

9.节点和连接线监听事件（Interaction）

this.myGraph = ForceGraph3D()
this.myGraph(document.getElementById('3d-graph'))
          // 点击事件 放大当前选中节点
        .onNodeClick((node, event) => {
          console.log('点击事件')
          const distance = 40
          const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z)
          _this.myGraph.cameraPosition(
            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
            node, // lookAt ({ x, y, z })
            3000 // ms transition duration
          )
        }) 
// 右击事件，拖拽事件、拖拽完成， 鼠标悬停事件等使用方式相同 ，详细API见下文Interaction 

常见使用效果 ：

1.拉近相机距离

/**
 * 拉近相机距离
 * node 选中的节点
 * 修改distance大小即修改相机拉近距离
* */
handleCamera (node) {
  const distance = 600
  const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z)
  this.myGraph.cameraPosition(
     { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
     node, // lookAt ({ x, y, z })
     3000 // ms transition duration
   )
 }

2.播放/暂停组件周期 

/**
 *  播放/暂停
 *  根据run 判断当前出发的是播放 还是暂停 暂停 会禁止图上的所有方法
* **/
runCanvas () {
  this.run = !this.run
  !this.run ? this.myGraph.pauseAnimation() : this.myGraph.resumeAnimation()
}

3.文字显示

/**
     * 添加文字,用three-spritetext(精灵字体)会更好，也更简单，有近大远小的空间感
     * CSS2DObject 2D字体没有空间感 但是性能好
     * 精灵字体会比2d字体性能更差，可酌情选择（3d字体需要下载字体文件，占用空间和加载性能最好不要用）
     * */
    // 精灵字体 需要添加
    // import SpriteText from 'three-spritetext'
    addSpriteText (node) {
      const sprite = new SpriteText(node.name)
      // sprite.material.depthWrite = false // make sprite background transparent
      sprite.color = '#000000' // node.group
      sprite.textHeight = 6
      // sprite.position.set(0, 12, 0) // 改变文字再节点的位置
      return sprite
    },
    // 2D字体 需要添加
    //import {CSS2DRenderer,CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
    // this.myGraph = ForceGraph3D({ extraRenderers: [new CSS2DRenderer()] })
    createAttackLabel (node) {
      // 成功后需要在对应的位置下面去找创建的2drender的dom下面就看到了。由于可能出现被canvas覆盖的情况，
      // 所以有些时候会以为自己没有添加成功，需要通过z-index设置让文字显现出来且不影响图谱交互
      const labelDiv = document.createElement('div')
      labelDiv.className = 'attackLabel'
      labelDiv.id = node.id
      labelDiv.textContent = node.name
      labelDiv.style.color = '#000000'
      const label = new CSS2DObject(labelDiv)
      label.position.set(0, 0, 0)
      return label
    }

 4.增加、删除数据

//更新数据然后执行以下方法
 this.myGraph.graphData(jsondata)

// 删除
    removeNode (node) {
      let { nodes, links } = this.myGraph.graphData()
      links = links.filter(l => l.source !== node && l.target !== node) // Remove links attached to node
      nodes.splice(node.index, 1) // 删除 node
      // nodes.forEach((n, idx) => { n.index = idx }) // 重置 node ids to array index  index自动排序
      this.myGraph.graphData({ nodes, links })
    }

5. 外部对象添加进场景中 

//将外部对象添加到3d-force-graph的场景中
addScene () {
      const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1)
      const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000, side: THREE.DoubleSide })
      const mesh = new THREE.Mesh(planeGeometry, planeMaterial)
      mesh.position.set(-100, -200, -100)
      mesh.rotation.set(0.5 * Math.PI, 0, 0)
 
      this.myGraph.scene().add(mesh)
    },

6.节点、连接线高亮显示

initGraph(){
    this.myGraph = ForceGraph3D()
    this.myGraph(document.getElementById('3d-graph'))
         .nodeColor(node => this.highlightNodes.has(node) ? node === this.hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : node.colorkey)
      
        .nodeAutoColorBy('group') // 按照group进行分类,仅影响没有颜色值的数据
        .linkThreeObjectExtend(true)  //不替换原来的样式只扩展 true
        .linkWidth(link => this.highlightLinks.has(link) ? 4 : 1)
        .linkDirectionalParticles('value') // 粒子个数
        .linkDirectionalParticleSpeed(d => d.value * 0.001) // 粒子运动速度
        .linkDirectionalParticleWidth(link => this.highlightLinks.has(link) ? 4 : 1)
         .onNodeHover((node, prevNode) => {
          console.log('悬停事件')
          this.highLightNode(node)
        })
         .onLinkHover((link, event) => {
          console.log('连接线移入')
          this.highLightLink(link)
        })
},
 /**
     * 高亮显示节点
     * */
    // 处理数据,在初始化之前执行
    highLightProcessData () {
      this.graphData.links.forEach(link => {
        const a = this.graphData.nodes.find(object => object.id === link.source)
        // const a = this.graphData.nodes[link.source]
        const b = this.graphData.nodes.find(object => object.id === link.target)
        // const b = this.graphData.nodes[link.target]
        !a.neighbors && (a.neighbors = [])
        !b.neighbors && (b.neighbors = [])
        a.neighbors.push(b)
        b.neighbors.push(a)
 
        !a.links && (a.links = [])
        !b.links && (b.links = [])
        a.links.push(link)
        b.links.push(link)
      })
    },
    // 鼠标移入节点，突出显示节点/链接（源）
    highLightNode (node) {
      // no state change
      if ((!node && !this.highlightNodes.size) || (node && this.hoverNode === node)) return
 
      this.highlightNodes.clear()
      this.highlightLinks.clear()
      if (node) {
        this.highlightNodes.add(node)
        node.neighbors.forEach(neighbor => this.highlightNodes.add(neighbor))
        node.links.forEach(link => this.highlightLinks.add(link))
      }
 
      this.hoverNode = node || null
      this.updateHighlight()
    },
    // 鼠标移入连接线，突出显示节点/链接（源）
    highLightLink (link) {
      this.highlightNodes.clear()
      this.highlightLinks.clear()
 
      if (link) {
        this.highlightLinks.add(link)
        this.highlightNodes.add(link.source)
        this.highlightNodes.add(link.target)
      }
 
      this.updateHighlight()
    },
    // 更新效果
    updateHighlight () {
      // trigger update of highlighted objects in scene
      this.myGraph
        .nodeColor(this.myGraph.nodeColor())
        .linkWidth(this.myGraph.linkWidth())
        .linkDirectionalParticles(this.myGraph.linkDirectionalParticles())
    },

四、API

Initialisation

ForceGraph3d({ configOptions })(<domElement>)

Data input

Container layout

Node styling

Link styling

Interaction

Render control