简介
3d-force-graph 是一款基于 Three.js 和 WebGL 技术的 JavaScript 图形库，它可以通过简单而强大的 API 创建 3D 力导向图，帮助前端开发者展示复杂的关系网络。通过 npm 安装，在 Web 应用中直接引用将大大简化开发过程。
安装
使用 npm 安装 3d-force-graph，只需在命令行中输入如下命令：
npm install 3d-force-graph
引用
在项目中引用 3d-force-graph 的方式有两种：通过 CDN 引用或者本地引用。推荐使用本地引用方式，这样可以避免由于 CDN 变化引起的项目异常。
在 HTML 文件中引用本地的 3d-force-graph 库：
<script src="./node_modules/3d-force-graph/dist/3d-force-graph.js"></script>
在 JavaScript 代码中调用 3d-force-graph：
var Graph = ForceGraph3D() (document.getElementById("3d-graph")) .graphData(graphData);
使用
数据
使用 3d-force-graph 显示关系网首先需要准备好数据，数据格式一般是 JSON 格式，它包含节点和边两个部分。节点是指网络中的每个实体，而边则是指节点之间的连接。
例如以下数据格式：
-- -------------------- ---- ------- - -------- - - ----- -- ------- ----- -- -- - ----- -- ------- ----- -- -- - ----- -- ------- ----- -- -- - ----- -- ------- ----- -- -- - ----- -- ------- ----- -- - -- -------- - - --------- -- --------- - -- - --------- -- --------- - -- - --------- -- --------- - -- - --------- -- --------- - -- - --------- -- --------- - - - -展开代码
创建 3d-force-graph 实例
创建一个 3d-force-graph 实例非常简单，只需要调用 ForceGraph3D() 方法即可：
var Graph = ForceGraph3D();
设置容器
使用 ForceGraph3D() 方法时可以传入 SVG 容器的 ID 或者 D3 的选择器，例如：
var Graph = ForceGraph3D() ("#svg-container") .graphData(graphData);
设置数据
设置数据时可以使用 graphData() 方法，例如：
var Graph = ForceGraph3D() (document.getElementById("3d-graph")) .graphData(graphData);
样式
3d-force-graph 提供了一些自定义样式的选项，使得开发者可以根据项目需要定制 3D 力导向图的外观和行为。
设置节点和边的样式：
-- -------------------- ---- ------- --- ----- - -------------- ------------------------------------- --------------------- --------------- -- ----------- -- ------ --------------------- -- --- ----------- --- ------------------------- --- ------------------------- ------ ---------- -- -- -- ------- --------------- -- ------------ -- ------展开代码
设置节点和边的交互行为，例如修改节点和连接线的大小：
-- -------------------- ---- ------- --- ----- - -------------- ------------------------------------- --------------------- --------------------- -- - ----- --- - --- ----------- --- ------------------------- --- ------------------------- ------ ---------- -- -- ---------------- -- --- ------ ---- -- --------------- -- ---------- - --- -- ------展开代码
交互
3d-force-graph 支持鼠标互动和触摸屏，通过添加事件监听器，您可以在图中添加更多的交互功能，例如设置节点点击时的透明度和旋转视角：
-- -------------------- ---- ------- --- ----- - -------------- ------------------------------------- --------------------- --------------------- -- --- ----------- --- ------------------------- --- ------------------------- ------ ----------- ------------ ----- -------- ---- -- -- ----------------- -- - --------------------- - -- ------- -- ------- -- ------ -- -- -------- ----- -- --- ---- -- ---- -- ---------------------- -- --------- ---------------- -- ------ ---展开代码
示例
-- -------------------- ---- ------- ---- -------------------- ------- --------------------------------------------------- ------- ------------------------------------------------------------------------ ------- -------------------------------------------------------------------- -------- --- --------- - - ------ - - --- -------- ----- ----- --- ------ -------- -- - --- -------- ----- ----- --- ------ -------- -- - --- -------- ----- ----- --- ------ -------- -- - --- -------- ----- ----- --- ------ -------- -- - --- -------- ----- ----- --- ------ -------- - -- ------ - - ------- -------- ------- ------- -- - ------- -------- ------- ------- -- - ------- -------- ------- ------- -- - ------- -------- ------- ------- -- - ------- -------- ------- ------- - - -- --- ----- - -------------- ------------------------------------- --------------------- --------------- -- ----------- --------------------- -- --- ----------- --- ------------------------- --- ------------------------- ------ ---------- -- -- --------------- -- ----------- --------------- -- ---------- - -- ---------------- ----------------- -- - --------------------- - -- ------- -- ------- -- ------ -- ----- ---- -- ---------------------- ---------------- --- ---------展开代码
以上示例代码将创建节点为红、绿、蓝、黄和紫色，并创建连接它们的链接。当单击节点时，图表会旋转到该节点并扩大节点的大小。
结论
3d-force-graph 可以是一个非常强大而又易于使用的工具，使开发者可以快速构建自己的 3D 力导向图。要利用 3d-force-graph 创建复杂而富有表现力的图形，您需要熟悉 Three.js 和 WebGL 编程技巧。使用这个 npm 包创建你自己的网络图，代码更健壮，更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61723
