Блог

Главная - Вопросы по программированию - Использование экспресс-рулей с Cytoscape.js

Использование экспресс-рулей с Cytoscape.js

#handlebars.js #cytoscape.js

#handlebars.js #cytoscape.js

Вопрос:

Привет, я новичок в веб-разработке, и я пытаюсь поиграть с Cytoscape.js . Я решил использовать Node.js , Экспресс и экспресс-рули для запуска моей веб-страницы. Я хотел использовать Cytoscape.js однако для отображения графика я не уверен, как использовать handlebars, чтобы получить ссылку на контейнер для инициализации объекта cytoscape. Вот мой файл main.handlebars:

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

Вот мой дом.файл руля:

 <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» для инициализации моего Cytoscape.js график использования экспресс-рулей, заранее спасибо за любую помощь.

Ответ №1:

Если вы запускаете Cytoscape на стороне сервера — как вы делаете в своем примере — тогда он не запускается и не отображается на стороне клиента.

Если вы не выполняете анализ графиков только на стороне сервера, вам следует использовать Cytoscape на стороне клиента. Ваша страница ( main.handlebars ) является драйвером всего клиентского, поэтому поместите туда свой код Cytoscape. Или на странице укажите ссылку на свой код Cytoscape с <script> помощью тега.