3D力导向树插件-3d-force-graph学习002

一、实现效果：节点+文字同时展示

1. 节点显示不同颜色
2. 节点盒label文字并存
3. 节点上添加点击事件

二、利用插件：CSS2DRenderer

提示：以下引入文件均可在安装完3d-force-graph的安装包里找到

三、关键代码

提示：模拟数据可按如下格式填充

// gData数据格式如下
let gData = {"nodes": [{"id": "Myriel", "group": 1},{"id": "Napoleon", "group": 1}],"links": [{"source": "Napoleon", "target": "Myriel", "value": 1},{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}]
}
initBlockJson(){const Graph = ForceGraph3D()(document.getElementById('3d-graph')).nodeAutoColorBy('user').nodeLabel(node => `${node.user}: ${node.description}`).onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank')).graphData(gData);}

4、寄语

花未全开月未圆
半山微醉尽余欢
何需多虑盈亏事
终归小满胜万全