3d-force-graph力導向樹（DAG模式）的使用

2021-6-7    前端達人

首先3d-force-graph在碼云或者github直接搜索，它的文檔確實有點少。這個插件用了3次，每一次都有不同的痛苦，也有粗心大意所導致的。

好的，我們現(xiàn)在講解一下這個插件中的導向樹DAG模式

我的案例都會基于Vue開發(fā)，創(chuàng)建項目等等我們進不說了，進入正題。

步驟：1.安裝：npm i 3d-force-graph （我安裝的是"3d-force-graph": “^1.67.5”,）
2.導入 import ForceGraph from ‘3d-force-graph’;

首先注意點：
1.不要全部cv我的代碼，或者光放文檔中的代碼，我們要依據(jù)后臺數(shù)據(jù)實際看問題，但是基本的代碼步驟是差不多的，但是也不要全CV，不然你的瀏覽器會報錯，而且你以為錯誤是你的邏輯問題，實際上是cv多了的問題（這一點使我耽誤了半天的時間）
2. 數(shù)據(jù)處理設(shè)計到了遞歸等，數(shù)據(jù)接口我就不寫了

在模板中定義： 

<template>
  <div class="wrap"></div>
</template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 




import ForceGraph from '3d-force-graph'; // 導入 import { subjectList } from '../src/request/api'; // 掉數(shù)據(jù)的接口 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 




 data() { return { // 源數(shù)據(jù) sourceData: null, // 力導向圖數(shù)據(jù) nodes: [], links: [], ForceGraphData: {} }; }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

初始話完成 

 async created() { // 獲取數(shù)據(jù)接口 try { const { data: res } = await subjectList(); this.sourceData = res.data; console.log(this.sourceData); } catch (err) { console.log(err); } this.digui(this.sourceData); // 遞歸處理數(shù)據(jù) this.SetForce(); // 調(diào)用力導向圖 }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

進入數(shù)據(jù) 

methods: { // 1.先定義數(shù)據(jù) // 首先定義nodes數(shù)據(jù);節(jié)點數(shù)據(jù) 設(shè)計遞歸定義方法 digui(data) { data.children.forEach(item => { if (item.children) { this.digui(item); } const nodeObjs = {}; nodeObjs.name = item.name; nodeObjs.id = item.id; nodeObjs.level = item.level; nodeObjs.parent_id = item.parent_id; nodeObjs.has_children = item.has_children; const linksObjs = {}; linksObjs.source = item.parent_id; linksObjs.target = item.id; this.nodes.push(nodeObjs); this.links.push(linksObjs); }); }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

后端返回的數(shù)據(jù)是格式我們需要用遞歸地方法把他們處理在這里插入圖片描述
要知道插件的節(jié)點是nodes數(shù)據(jù)，連線是links數(shù)據(jù)，links數(shù)組中的每一項都有source和target，source的是連線的開始端，target是連線的結(jié)束端，source的是parent_id,target的是id，也就是依據(jù)數(shù)據(jù)進行連接，這一不懂的話可以看看這個插件的這個案例
在這里插入圖片描述
好，繼續(xù)，處理完的數(shù)據(jù)是nodes數(shù)據(jù)后端數(shù)據(jù)返回的每一項包括children下的每一項，links數(shù)據(jù)是每一項是的target:id和source:parent_id
處理數(shù)據(jù)完成，下一部在methods中設(shè)置力導向圖的函數(shù) 

 // 設(shè)置力導向圖 SetForce() { // 這里在最想面插入了一條數(shù)據(jù)是因為后端返還的數(shù)據(jù)和依據(jù)插件的機制需要我在最前面插入一條最起點的數(shù)據(jù)  //也就是這條數(shù)據(jù)就是起源，一般來說你們也會在最前面插入一條起源數(shù)據(jù)，因為后端數(shù)據(jù)差不多樣式都是一樣的 // 這條數(shù)據(jù)就不用在添加parent_id了，就是返回的有parent_id，而不需要添加。 this.nodes.unshift({ id: 10515, name: '化學', level: 1, }); this.ForceGraphData.links = this.links; this.ForceGraphData.nodes = this.nodes; const gukergForce = ForceGraph(); gukergForce(document.querySelector('.wrap')) // 力導向圖放在容器中 記住這個容器在樣式中要給大小 .graphData(this.ForceGraphData)// 這條就是數(shù)據(jù)源 .dagMode('td') // 模式有很多選擇，我選擇的td，自上而下的格式，文檔中有選擇，你們按自己需求選 } }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

現(xiàn)在一個簡單的力導向樹就出來了，隨項目的需求你可在節(jié)點加圖片，你需要import * as THREE from ‘three’;這個包不用下載，直接導入就可以， 

 const gukergForce = ForceGraph(); // 力導向圖放在容器中 gukergForce(document.querySelector('.wrap')) .graphData(this.ForceGraphData) .dagLevelDistance(70) // 兩點直接的距離 .dagMode('td') .nodeResolution(50) // 較高的值產(chǎn)生較光滑的球體。 .nodeThreeObject(node => { .nodeThreeObject(node => { if (node.level === 1) { console.log('你好'); } let imgTexture = ''; if (node.level === 1) { imgTexture = new THREE.TextureLoader().load(require('./assets/1.png')); } else if (node.level === 2) { imgTexture = new THREE.TextureLoader().load(require('./assets/2.png')); } else if (node.level === 3) { imgTexture = new THREE.TextureLoader().load(require('./assets/3.png')); } else if (node.level === 4) { imgTexture = new THREE.TextureLoader().load(require('./assets/4.png')); } else if (node.level === 5) { imgTexture = new THREE.TextureLoader().load(require('./assets/5.png')); } const material = new THREE.SpriteMaterial({ map: imgTexture }); const sprite = new THREE.Sprite(material); if (node.level === 1) { sprite.scale.set(50, 45); return sprite; } else if (node.level === 2) { sprite.scale.set(20, 20); return sprite; } if (node.level === 3) { sprite.scale.set(30, 30); return sprite; } if (node.level === 4) { sprite.scale.set(20, 15); return sprite; } if (node.level === 5) { sprite.scale.set(20, 20); return sprite; } }); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    •

其實由誰解決了它節(jié)點之間不重復的問題，可以給我留言，謝謝




轉(zhuǎn)自：csdn論壇

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

  藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔