我的Sigma.js图表​​未出现在我的Node.js网页上

时间:2019-04-12 16:12:43

标签: javascript html node.js sigma.js

我正在尝试使用Node.js和Sigma.js在网页上显示一个简单的图表。我没有收到任何错误。一切似乎都能正常工作,但图表未出现。感谢您的帮助。

注意:我从此目录树中删除了不相关的文件

mono

我使用npm导入了sigma.js。我使用以下命令创建了sigma-test-bundle.js:

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

sigma-test.js:

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

index.ejs:

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')

server.js:

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

Webpage and console output

1 个答案:

答案 0 :(得分:0)

您的代码对我有用,只需添加样式:

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

希望有帮助!