什么是 ngraph.physics.simulator
ngraph.physics.simulator 是一款用于数据可视化的 js 库，可以帮助您实现节点力学布局，例如力导向图。它也提供了一系列物理模拟算法，如经典的力导向布局、FR 布局、Brook 模型、Harel-Koren 模型等。
如何安装
可以通过 npm 进行安装：
npm install ngraph.physics.simulator --save-dev
或者可以在 HTML 中使用
<script src="https://unpkg.com/ngraph.physics.simulator@1.1.0/dist/ngraph.physics.simulator.js"></script>
官方文档
ngraph.physics.simulator 提供了详细的官方文档，文档非常全面，可以帮助你了解库的各个部分如何使用：https://github.com/anvaka/ngraph.physics.simulator
使用场景
ngraph.physics.simulator 主要用于数据可视化和制作复杂布局。
具体使用
在使用之前，需要引入以下文件
<script src="https://unpkg.com/ngraph.physics.simulator@1.1.0/dist/ngraph.physics.simulator.js"></script> <script src="https://unpkg.com/ngraph.forcelayout/dist/ngraph.forcelayout.js"></script>
然后我们需要实例化一个 physics simulator：
let sim = ngraph.physics.simulator();
接着，我们需要将 force layout 添加到 physics simulator:
let layout = ngraph.forcelayout(graph); sim.addForce(layout);
在将节点添加到 physics simulator 之前，我们需要将节点添加到 force layout：
graph.forEachNode(function (node) { layout.addNode(node.id, { x: Math.random()/10, y: Math.random()/10 }); });
最后，我们将节点添加到 physics simulator：
sim.addNode(node.id, { mass: nodeMass });
以下是完整代码示例：
-- -------------------- ---- ------- ----- ----- - -------------------------- -- ------------ --- --- - --------------------------- --- ------ - -------------------------- --------------------------------- ------ - ----------------------- - -- ----------------- -- ---------------- --- --- -- --------------- --------------------------- --- ------------ - ----------------------------------------- -------- -- -------------- --- --------------- - - ------------- --- ------------ ------- -------- ----- ------ - -- --- ------- - ------------------------------------------ -------------------------- ------ - --- -------- - ----------- ------------------------------------- ------------------------ - ----- -------- --- -------------------- ------ ----------- --- -------------------------- ------ - ------------------------------ ----------- --- --------------------- ---------------------- -------- ------------ - ------ -------------------------------- -展开代码
如上所述，上面的示例中，我们通过添加节点和边，然后将它们添加到 force layout 中，并将其加入到 physics simulator，并在空间索引中保存位置。
总结
通过本文您了解了 ngraph.physics.simulator 是什么，以及如何使用该库在您的应用程序中实现力导向图力学布局等功能。该库在数据可视化和复杂布局方面非常有用，对前端开发人员来说是一款优秀的 js 库，无论是学习还是实践都非常值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61696
