Question

我是Aurelia的新手，并且拥有javascript的一些背景知识。我正在使用CLI来构建和运行我的项目。 Dwayne Charrington指导我将sigmajs整合到Aurelia。谢谢，Dwayne！

我已通过

将sigma安装到项目中

npm install sigma --save

我已将sigma.min.js添加到aurelia_project / aurelia.json。

  "prepend": [
        "node_modules/bluebird/js/browser/bluebird.core.js",
        "node_modules/requirejs/require.js", 
    "node_modules/sigma/build/sigma.min.js"
    ]

我正在使用附带的（）生命周期方法来让ts和html一起工作，以便根据Dwayne的建议集成sigmajs。

-- sigmajs.html
<template>
  <require from="./sigmajs.css"></require>
  <section>
   <div class="col-lg-4 col-lg-offset-4">
     <h1> An </h1>
     <div id="container1"></div>
   </div>
   <div class="col-lg-4 col-lg-offset-4">
    <button click.delegate="refreshUI()"> Refresh UI </button>
   </div>
 </section>
</template>

--sigmajs.ts

export class Sigmajs {
    s;
    refreshUI() {
      this.s.refresh();
      this.s.graph.nodes().forEach(function(n) {
        console.log(n);
      });
    }


    attached() {
      this.s =     new sigma({
        container: 'container1'
      });

      this.s.graph.addNode({
        id: 'n0',
        label: 'Hello',
        x: 10,
        y: 10,
        size: 1,
        color: '#f00'
      }).addNode({
        id: 'n1',
        label: 'World !',
        x: 100,
        y: 10,
        size: 1,
        color: '#00f'
      }).addEdge({
        id: 'e0',
        source: 'n0',
        target: 'n1'
      });
    }
 }

 -- sigmajs.css
 <style>
   #container1 {
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
  }
</style>

我无法在HTML页面上看到图表;即使我单击“刷新UI”按钮。当我单击Refresh UI按钮时，我确实看到控制台中与console.log（n）对应的调试语句为

Object { label: "Hello", x: 10, y: 10, size: 1, color: "#f00", id: "n0", read_cam0:size: 8, read_cam0:x: -2.8125, read_cam0:y: 0, cam0:x: 195.1875, 2 more… }  app-bundle.js:396:17
Object { label: "World !", x: 100, y: 10, size: 1, color: "#00f", id: "n1", read_cam0:size: 8, read_cam0:x: 2.8125, read_cam0:y: 0, cam0:x: 200.8125, 2 more… }  app-bundle.js:396:17

从而使我得出结论我正在正确地初始化sigmajs;只是没有看到HTML上的输出（图表）

提前感谢您的建议。

Answer 1

回答我自己的问题问题是css没有在图片中指定适当的高度，宽度和引导程序。 sigmajs.css中的以下声明显示了相当简单的图形（2个节点，一个边缘）。

<style type="text/css">
   body {
     margin: 0;
   } 

   #container2 {
      position: absolute;
      width: 100%;
      height: 100%;
  }
 </style>

我不是CSS人;所以这个答案虽然有效，但可能需要一些细微差别才能使图表更好看。

@LStarky似乎没有必要进行sigma导入。我相信vendor-bundle.js由于前置

也有sigma

如何从sigmajs获取图形以显示在html页面中

1 个答案: