angular7中如何安装和使用sigmajs以及如何使用sigmajs的startForceAtlas2包

Question

如何在 angular 7 中添加 sigmajs 以及如何在 angular 7 中使用 sigma js。另外，我想使用 startForceAtlas2 包。

Answer 1

我收到你的问题

首次安装npm install sigma --save
在你的组件中 declare const sigma: any;
在 angular json 中导入 sigma 脚本
"node_modules/sigma/build/sigma.min.js",
并以sigmajs为例调用sigma js的图函数

你会得到一个图表。

Answer 2

要在 angular 中安装 sigma，最好遵循他们自己提供的文档：https://github.com/jacomyal/sigma.js/wiki

但是深入了解细节......我们到底如何使用力图集或其任何插件？好吧，在给自己带来许多麻烦之后，我找到了解决方案，而且它是如此愚蠢以至于有效：

 <script src="./node_modules/sigma/build/plugins/sigma.layout.forceAtlas2.min.js"></script>
<script src="./node_modules/sigma/plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="./node_modules/sigma/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>

我们会在安装 sigma 后在 node_modules 中找到它们。

即便如此，如果我们使用 import * from 'sigma' 它对我们不起作用，我们必须直接访问 sigma。在我们的组件中，我们使用：declare var sigma

一旦完成，我们将像以前一样使用该变量：

 this.fundingNetwork = new sigma({
            renderer: {
                container: this.sigmaGraph.nativeElement,
                type: 'canvas'
            },
            settings: {
                // defaultHoverLabelBGColor: '#EEAB00',
                font: 'Poppins',
                defaultNodeBorderColor: '#58D68D'
            }
        });

并且我们可以使用 forceAtlas:

             this.fundingNetwork.startForceAtlas2({worker: true, barnesHutOptimize: false});

angular7中如何安装和使用sigmajs以及如何使用sigmajs的startForceAtlas2包

How to install and use sigmajs in angular 7 and how to use startForceAtlas2 package of sigmajs

sigma.js

angular