与Cytoscape.js使用快速句柄

嗨，我是新来的网页开发，我试图与Cytoscape.js玩。我决定使用Node.js，Express和Express-handlebars来运行我的网页。我想使用Cytoscape.js来显示一个图表，但我不知道如何使用句柄来获取容器的引用来初始化cytoscape对象。这是我的main.handlebars文件：与Cytoscape.js使用快速句柄

<!doctype html> 
<html> 
<head> 
    <title>Hello Cytoscape</title> 
</head> 
<body> 
    {{{body}}} 
</body> 
</html>

这是我的home.handlebars文件：

<div id="cy"></div>

这是我的.js文件：

/** 
* 
*/ 
'use strict'; 

var express = require('express'); 
var app = express(); 

var cytoscape = require('cytoscape'); 

//layout defaults to main, located in the views layout folder 
var handlebars = require('express-handlebars').create({defaultLayout:'main'}); 

app.use(express.static('public')); 

//sets the template engine to use for the express object 
//a template engine will implement the view part of the app 
app.engine('handlebars', handlebars.engine); 
app.set('view engine', 'handlebars'); 


//initialize the cytoscape object 
var cy = cytoscape({ 

    //<----not sure how to do this-----> 
    container: document.getElementById('cy'), // container to render in 

    elements: [ // list of graph elements to start with 
      { // node a 
        data: { id: 'a' } 
      }, 
      { // node b 
        data: { id: 'b' } 
      }, 
      { // edge ab 
        data: { id: 'ab', source: 'a', target: 'b' } 
      } 
    ], 

    style: [ // the stylesheet for the graph 
      { 
        selector: 'node', 
        style: { 
          'background-color': '#666', 
          'label': 'data(id)' 
        } 
      }, 

      { 
      selector: 'edge', 
        style: { 
        'width': 3, 
        'line-color': '#ccc', 
        'target-arrow-color': '#ccc', 
        'target-arrow-shape': 'triangle' 
        } 
      } 
    ], 

    layout: { 
      name: 'grid', 
      rows: 1 
    }, 
    // initial viewport state: 
    zoom: 1, 
    pan: { x: 0, y: 0 }, 

    // interaction options: 
    minZoom: 1e-50, 
    maxZoom: 1e50, 
    zoomingEnabled: true, 
    userZoomingEnabled: true, 
    panningEnabled: true, 
    userPanningEnabled: true, 
    boxSelectionEnabled: false, 
    selectionType: 'single', 
    touchTapThreshold: 8, 
    desktopTapThreshold: 4, 
    autolock: false, 
    autoungrabify: false, 
    autounselectify: false, 
    // rendering options: 
    headless: false, 
    styleEnabled: true, 
    hideEdgesOnViewport: false, 
    hideLabelsOnViewport: false, 
    textureOnViewport: false, 
    motionBlur: false, 
    motionBlurOpacity: 0.2, 
    wheelSensitivity: 1, 
    pixelRatio: 'auto' 
});      

app.get('/', function (req, res) { 
    var context = {};  
    res.render('home', context); 
}); 

//listener all for unrecognized urls 
//return 404 not found response 
app.use(function(req,res){ 
res.status(404); 
res.render('404'); 
}); 

//listener for errors generate on server 
//return 500 response 
app.use(function(err, req, res, next){ 
console.error(err.stack); 
res.type('plain/text'); 
res.status(500); 
res.render('500'); 
}); 


if (module === require.main) { 
// [START server] 
// Start the server 
var server = app.listen(process.env.PORT || 8080, function() { 
var port = server.address().port; 
console.log('App listening on port %s', port); 
}); 
// [END server] 
} 

module.exports = app;

所以我想我的问题是怎么做的我得到了对div容器id =“cy”的引用，以便使用express-handlebars初始化我的Cytoscape.js图形，在此先感谢任何帮助。

来源

2016-09-30 Boo

如果您在服务器端运行Cytoscape - 就像您在示例中做的那样 - 那么它不会运行，并且不会显示在客户端上。

除非您正在进行只服务器端图分析，否则您应该在客户端使用Cytoscape。您的页面（main.handlebars）是所有客户端的驱动程序，因此请将您的Cytoscape代码放在那里。或者在页面中，使用<script>标记引用Cytoscape代码。

来源

2016-09-30 14:55:53 maxkfranz

与Cytoscape.js使用快速句柄

回答

相关问题