Блог

Главная - Вопросы по программированию - Моя Sigma.js диаграмма не отображается на моем Node.js веб-страница

Моя Sigma.js диаграмма не отображается на моем Node.js веб-страница

#javascript #html #node.js #sigma.js

#javascript #HTML #node.js #sigma.js

Вопрос:

Я пытаюсь отобразить простую диаграмму на веб-странице с помощью Node.js и Sigma.js . Я не получаю никаких ошибок. Кажется, что все работает правильно, но диаграмма не отображается. Спасибо за помощь.

Примечание: я удалил несвязанные файлы из этого дерева каталогов

 |-- node_modules
|-- package.json
|-- public
|   |-- css
|   |    `-- style.css
|   `-- javascript
|       |-- sigma-test-bundle.js
|       `-- sigma-test.js
|-- server.js
`-- views
    `-- index.ejs

Я импортировал sigma.js использование npm. Я создал sigma-test-bundle.js использование:

 browserify sigma-test.js -o sigma-test-bundle.js

sigma-test.js:

 const sigma = require('sigma');

console.log("sigma-test.js")

var i,
s,
N = 50,
E = 50,
g = {
  nodes: [],
  edges: []
};

// Generate random nodes:
for (i = 0; i < N; i  )
    g.nodes.push({
        id: 'n'   i,
        label: 'Article '   i,
        x: Math.random(),
        y: Math.random(),
        size: Math.random(),
        color: '#ec5148'
    });

// Generate random edges
for (i = 0; i < E; i  )
    g.edges.push({
    id: 'connection'   i,
    source: 'n'   (Math.random() * N | 0),
    target: 'n'   (Math.random() * N | 0),
    size: Math.random(),
    color: '#ccb6b6'
});

s = new sigma({ 
    graph: g,
    container: 'container',
    settings: {
        defaultNodeColor: '#ec5148'
    }
});

//Initialize nodes as a circle
s.graph.nodes().forEach(function(node, i, a) {
  node.x = Math.cos(Math.PI * 2 * i / a.length);
  node.y = Math.sin(Math.PI * 2 * i / a.length);
});

console.log('End of sigma-test.js')

index.ejs: 

 <head>
    <title>Test File</title>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

</head>

<body>
        <h1>Test File</h1>
        <h2>Tests basic functionality needed for the project.</h2>

        This text should appear above the sigma chart!

        <div id="container"></div>
        <script src='/javascript/sigma-test-bundle.js'></script>

        This text should appear below the sigma chart!

</body>

server.js:

 const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.set('view engine', 'ejs')

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', function (req, res) {
  res.render('index');
})

app.post('/', function (req, res) {
  res.render('index');
  console.log("server response");
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

Вывод веб-страницы и консоли

Ответ №1:

Ваш код работает для меня, просто добавьте стиль:

 <style> #container { height: 100% } </style>

Надеюсь, это поможет!