引言
在前端的可视化领域，three.js 已成为很多开发者的选择。在利用 three.js 来开发3D 可视化时，有时需要展示包含关系网络（force directed network），这时候 three-forcegraph 可以帮助你快速上手实现关系网络可视化。本文主要介绍如何安装并使用该 NPM 包。
安装
你可以通过 npm 来安装该包，安装命令如下：
npm install three-forcegraph
安装完成后，你就可以开始使用 three-forcegraph 来构建3D的关系网络了。
基本用法
在使用该包前，我们需要先在 HTML 中引入 three.js 和相关的 three-forcegraph 文件，代码如下：
<script src="https://cdn.jsdelivr.net/npm/three@^0.127.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three-forcegraph"></script>
然后，我们可以在 JavaScript 代码中创建一个 ForceGraph3D 实例，其基本代码如下所示：
-- -------------------- ---- ------- -- -- ------ -- ----- ------ - ---------------------------------- ----- -------- - --- --------------------- ------ --- ----- ----- - --- -------------- -- -- ------------ -- ----- ------------ - ----------------------------------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- ------------------------ -- - ----- --- ----- - -----------------展开代码
上述代码创建了一个包含三个节点和三条边的关系网络，并使用 nodeAutoColorBy 属性来为每个节点自动赋予颜色。
进阶用法
在使用 three-forcegraph 来进行关系网络可视化时，你还可以自定义节点的样式、边的样式、交互行为等。下面介绍一些进阶用法。
自定义节点样式
可以通过 nodeThreeObject 属性来自定义节点的3D对象，例如：
-- -------------------- ---- ------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- --------------------- -- - ----- -------- - --- ------------------------- ----- -------- - --- --------------------------- ------ --- -------------------- ---------- ---展开代码
上述代码使用 SphereGeometry 和 MeshNormalMaterial 创建了一个球形节点。
自定义边的样式
可以通过 linkThreeObject 属性来自定义边的3D对象，例如：
-- -------------------- ---- ------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- --------------------- -- - ----- -------- - --- ------------------------- -- ---------- ----- -------- - --- --------------------------- ------ --- -------------------- ---------- ---展开代码
上述代码使用 CylinderGeometry 和 MeshNormalMaterial 创建了一条高度为边权值的柱形边。
自定义节点标签
默认情况下，three-forcegraph 展示的节点没有标签，如果你想在节点上展示标签，可以通过 nodeLabel 属性来自定义：
-- -------------------- ---- ------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- -----------------展开代码
上述代码将节点的标签设为了节点的 id 值。
鼠标交互
three-forcegraph 默认支持诸如拖曳、鼠标悬浮等交互行为。你还可以通过 dagreMode 属性来改变节点的布局方式：
-- -------------------- ---- ------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- -----------------展开代码
上述代码将节点布局方式设置为从上到下（top-down）。
示例代码
完整的示例代码如下所示，你可以借此参考如何实现各种功能：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------------ ----- ---------------- ------- ----- ---- - ------- -- -------- -- ------------ ------ ---------- ----------- ------ ----- ------- ----- --------- ------- - ------- - ------ ----- ------- ----- --------- --------- ----- -- ---- -- - -------- ------- ------ ------- --------------------- ------- ------------------------------------------------------------------------------ ------- ------------------------------------------------------------- -------- -- -- ------ -- ----- ------ - ---------------------------------- ----- -------- - --- --------------------- ------ --- ----- ----- - --- -------------- -- -- ------------ -- ----- ------------ - ----------------------------------- ----- ----- - --- -------------- ------------ ------ - - --- -------- ---- - -- - --- -------- ---- - -- - --- -------- ---- - - -- ------ - - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - -- - ------- -------- ------- -------- ---- - - - -- ----------------------- --------------------- -- - ----- -------- - --- ------------------------- -- ---------- ----- -------- - --- --------------------------- ------ --- -------------------- ---------- -- --------------------- -- - ----- -------- - --- ------------------------- ----- -------- - --- --------------------------- ------ --- -------------------- ---------- -- ---------------- ----------------- -- - ----- --- ----- - ----------------- -- ---- -------- -------- - ---------------------- -------------------- ------------------------------ - ------------------------------ --------- ------- -------展开代码
结语
通过本文的介绍，相信你已经了解了如何使用 three-forcegraph 这个 NPM 包来实现关系网络的可视化。在实际开发中，你还需要根据实际需求进行进一步的调整和优化，希望本文能给你提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61693
