Как получить график от sigmajs для отображения на html странице

Question

Я новичок в Aurelia и имею некоторый фон в javascript. Я использую CLI для создания и запуска моего проекта. Дуэйн Чаррингтон вел меня по интеграции сигмахов в Аурелию. Спасибо, Дуэйн!

Я установил сигмы в проект через

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" 
    ] 

Я использую прилагается) метод жизненного цикла (чтобы получить ц и HTML, чтобы работать вместе для интеграции 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 странице; даже когда я нажимаю кнопку «Обновить интерфейс». При нажатии на кнопку Refresh UI, я увидеть отладочные в консоли, соответствующей console.log (п), как

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 Не требуется импорт сигмы. Я считаю, что у vendor-bundle.js также есть сигма из-за preend