在vue使用3d-force-graph

 一 下载

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数据格式

1.  
   data () {
2.  
   return {
3.  
   myGraph: null, // 3D-graph对象
4.  
   // 3D-graph加载的图数据
5.  
   graphData: {
6.  
   nodes: [
7.  
   {
8.  
   id: 'id1',
9.  
   name: '小兰花',
10.  
    val: 20,
11.  
    colorkey: '#B7D2F0'
12.  
    },
13.  
    {
14.  
    id: 'id2',
15.  
    name: '东方青苍',
16.  
    val: 20,
17.  
    colorkey: '#ECB5C9'
18.  
    },
19.  
    {
20.  
    id: 'id11',
21.  
    name: '种花',
22.  
    val: 10,
23.  
    colorkey: '#D9C8AE'
24.  
    },
25.  
    {
26.  
    id: 'id12',
27.  
    name: '修命簿',
28.  
    val: 15,
29.  
    colorkey: '#D9C8AE'
30.  
    },
31.  
    {
32.  
    id: 'id13',
33.  
    name: '司命',
34.  
    val: 20,
35.  
    colorkey: '#D9C8AE'
36.  
    },
37.  
    {
38.  
    id: 'id21',
39.  
    name: '月族首领',
40.  
    val: 10,
41.  
    group: 1
42.  
    },
43.  
    {
44.  
    id: 'id22',
45.  
    name: '业火',
46.  
    val: 10,
47.  
    group: 2
48.  
    },
49.  
    {
50.  
    id: 'id23',
51.  
    name: '荡平水云天',
52.  
    val: 20,
53.  
    group: 2
54.  
    }
55.  
    ],
56.  
    links: [
57.  
    {
58.  
    source: 'id1',
59.  
    target: 'id2',
60.  
    name: '情侣',
61.  
    colorkey: '#B7D2F0',
62.  
    value: 3
63.  
    },
64.  
    {
65.  
    source: 'id1',
66.  
    target: 'id11',
67.  
    name: '爱好',
68.  
    colorkey: '#D9C8AE',
69.  
    value: 1
70.  
    },
71.  
    {
72.  
    source: 'id1',
73.  
    target: 'id12',
74.  
    name: '职业',
75.  
    colorkey: '#D9C8AE',
76.  
    value: 1
77.  
    },
78.  
    {
79.  
    source: 'id1',
80.  
    target: 'id13',
81.  
    name: '师傅',
82.  
    colorkey: '#D9C8AE',
83.  
    value: 1
84.  
    },
85.  
    {
86.  
    source: 'id21',
87.  
    target: 'id2',
88.  
    name: '职业',
89.  
    colorkey: '#D9C8AE',
90.  
    value: 2
91.  
    },
92.  
    {
93.  
    source: 'id2',
94.  
    target: 'id22',
95.  
    name: '技能',
96.  
    colorkey: '#D9C8AE',
97.  
    value: 3
98.  
    },
99.  
    {
100.  
     source: 'id2',
101.  
     target: 'id23',
102.  
     name: '爱好',
103.  
     colorkey: '#D9C8AE',
104.  
     value: 1
105.  
     },
106.  
     {
107.  
     source: 'id23',
108.  
     target: 'id23',
109.  
     name: '爱好',
110.  
     colorkey: '#D9C8AE',
111.  
     value: 1
112.  
     }
113.  
     ]
114.  
     },
115.  
     }
116.  
     }

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

三、使用

     1. 基本渲染图谱

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

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

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

3. 节点样式（Node styling）

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

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

4.节点材质变化

1.  
   // 文本作为节点
2.  
   nodeThreeObject(node => {
3.  
   const sprite = new SpriteText(node.id);
4.  
   // sprite.material.depthWrite = false; // make sprite background transparent
5.  
   sprite.color = node.color;
6.  
   sprite.textHeight = 8;
7.  
   return sprite;
8.  
   });
9.  
    
10.  
    // 图片作为节点 img为node数据里面图片名 需要使用three.js
11.  
    .nodeThreeObject(({ img }) => {
12.  
    const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`); //创建纹理贴图
13.  
    const material = new THREE.SpriteMaterial({ map: imgTexture });
14.  
    const sprite = new THREE.Sprite(material);
15.  
    sprite.scale.set(12, 12)
16.  
    return sprite;
17.  
    })
18.  
    // html作为节点
19.  
    .nodeThreeObject(node => {
20.  
    const nodeEle = document.createElement('div');
21.  
    nodeEle.textContent = node.name;
22.  
    nodeEle.style.color = node.colorkey;
23.  
    nodeEle.className = 'nodeLabel';
24.  
    return new THREE.CSS2DObject(nodeEle);
25.  
    })
26.  
    // 几何体作为节点
27.  
    .nodeThreeObject(({ id }) => {
28.  
    const ids = id.slice(2)
29.  
    const Mesh = new THREE.Mesh(
30.  
    [
31.  
    // 方块
32.  
    new THREE.BoxGeometry(
33.  
    Math.random() * 20,
34.  
    Math.random() * 20,
35.  
    Math.random() * 20
36.  
    ),
37.  
    // 锥体
38.  
    new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
39.  
    // 圆柱
40.  
    new THREE.CylinderGeometry(
41.  
    Math.random() * 10,
42.  
    Math.random() * 10,
43.  
    Math.random() * 20
44.  
    ),
45.  
    // 十二面体
46.  
    new THREE.DodecahedronGeometry(Math.random() * 10),
47.  
    // 球体
48.  
    new THREE.SphereGeometry(Math.random() * 10),
49.  
    // 圆环
50.  
    new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
51.  
    // 环面扭结
52.  
    new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
53.  
    ][ids % 7],
54.  
    new THREE.MeshLambertMaterial({
55.  
    color: Math.round(Math.random() * Math.pow(2, 24)),
56.  
    transparent: true,
57.  
    opacity: 0.75
58.  
    })
59.  
    )
60.  
    return Mesh
61.  
    })

5.连接线配置(Link styling)

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

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

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

7.自连接

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

8.定向移动例子

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

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

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

常见使用效果 ：

1.拉近相机距离

1.  
   /**
2.  
   * 拉近相机距离
3.  
   * node 选中的节点
4.  
   * 修改distance大小即修改相机拉近距离
5.  
   * */
6.  
   handleCamera (node) {
7.  
   const distance = 600
8.  
   const distRatio = 1 distance / Math.hypot(node.x, node.y, node.z)
9.  
   this.myGraph.cameraPosition(
10.  
    { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
11.  
    node, // lookAt ({ x, y, z })
12.  
    3000 // ms transition duration
13.  
    )
14.  
    }

2.播放/暂停组件周期 

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

3.文字显示

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

 4.增加、删除数据

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

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

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

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

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

1.  
   initGraph(){
2.  
   this.myGraph = ForceGraph3D()
3.  
   this.myGraph(document.getElementById('3d-graph'))
4.  
   .nodeColor(node => this.highlightNodes.has(node) ? node === this.hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : node.colorkey)
5.  
    
6.  
   .nodeAutoColorBy('group') // 按照group进行分类,仅影响没有颜色值的数据
7.  
   .linkThreeObjectExtend(true) //不替换原来的样式只扩展 true
8.  
   .linkWidth(link => this.highlightLinks.has(link) ? 4 : 1)
9.  
   .linkDirectionalParticles('value') // 粒子个数
10.  
    .linkDirectionalParticleSpeed(d => d.value * 0.001) // 粒子运动速度
11.  
    .linkDirectionalParticleWidth(link => this.highlightLinks.has(link) ? 4 : 1)
12.  
    .onNodeHover((node, prevNode) => {
13.  
    console.log('悬停事件')
14.  
    this.highLightNode(node)
15.  
    })
16.  
    .onLinkHover((link, event) => {
17.  
    console.log('连接线移入')
18.  
    this.highLightLink(link)
19.  
    })
20.  
    },
21.  
    /**
22.  
    * 高亮显示节点
23.  
    * */
24.  
    // 处理数据,在初始化之前执行
25.  
    highLightProcessData () {
26.  
    this.graphData.links.forEach(link => {
27.  
    const a = this.graphData.nodes.find(object => object.id === link.source)
28.  
    // const a = this.graphData.nodes[link.source]
29.  
    const b = this.graphData.nodes.find(object => object.id === link.target)
30.  
    // const b = this.graphData.nodes[link.target]
31.  
    !a.neighbors && (a.neighbors = [])
32.  
    !b.neighbors && (b.neighbors = [])
33.  
    a.neighbors.push(b)
34.  
    b.neighbors.push(a)
35.  
     
36.  
    !a.links && (a.links = [])
37.  
    !b.links && (b.links = [])
38.  
    a.links.push(link)
39.  
    b.links.push(link)
40.  
    })
41.  
    },
42.  
    // 鼠标移入节点，突出显示节点/链接（源）
43.  
    highLightNode (node) {
44.  
    // no state change
45.  
    if ((!node && !this.highlightNodes.size) || (node && this.hoverNode === node)) return
46.  
     
47.  
    this.highlightNodes.clear()
48.  
    this.highlightLinks.clear()
49.  
    if (node) {
50.  
    this.highlightNodes.add(node)
51.  
    node.neighbors.forEach(neighbor => this.highlightNodes.add(neighbor))
52.  
    node.links.forEach(link => this.highlightLinks.add(link))
53.  
    }
54.  
     
55.  
    this.hoverNode = node || null
56.  
    this.updateHighlight()
57.  
    },
58.  
    // 鼠标移入连接线，突出显示节点/链接（源）
59.  
    highLightLink (link) {
60.  
    this.highlightNodes.clear()
61.  
    this.highlightLinks.clear()
62.  
     
63.  
    if (link) {
64.  
    this.highlightLinks.add(link)
65.  
    this.highlightNodes.add(link.source)
66.  
    this.highlightNodes.add(link.target)
67.  
    }
68.  
     
69.  
    this.updateHighlight()
70.  
    },
71.  
    // 更新效果
72.  
    updateHighlight () {
73.  
    // trigger update of highlighted objects in scene
74.  
    this.myGraph
75.  
    .nodeColor(this.myGraph.nodeColor())
76.  
    .linkWidth(this.myGraph.linkWidth())
77.  
    .linkDirectionalParticles(this.myGraph.linkDirectionalParticles())
78.  
    },

四、API

Initialisation

ForceGraph3d({ configOptions })(<domElement>)

Data input

Container layout

Node styling

Link styling

Interaction

Render control

这篇好文章是转载于：学新通技术网