如何在nodejs中使用jointjs

我是javascript，jointjs和nodejs的新用戶。我用webstorm建設項目的NodeJS，文件結構如下：如何在nodejs中使用jointjs

/test 
/bin 
    www 
/node_modules 
/public 
/routes 
    index.js 
    users.js 
/views 
    error.jade 
    index.jade 
    layout.jade 
app.js 
pacakge.json

我想用jointjs繪製在Node.js的項目流程，所以我改變index.js如按照以下帖子： Explain or demonstrate integration between JointJS and Node.js

index.js

var express = require('express'); 
var router = express.Router(); 
var joint = require('jointjs'); 
var graph = new joint.dia.Graph; 

var el1 = new joint.shapes.basic.Rect({position: {x: 50, y: 50}, attrs: {text: {fill: 'yellow'}}}); 
var el2 = new joint.shapes.basic.Rect({position: {x: 300, y: 200}, attrs: {text: {fill: 'yellow'}}}); 
var link = new joint.dia.Link({source: {id: el1.id}, target: {id: el2.id}}); 
graph.addCells([el1, el2, link]); 

/* GET home page. */ 
router.get('/', function (req, res, next) { 
    res.render('index', {title: 'Express'}); 
}); 

module.exports = router;

然後，我感到困惑如何在graph.toJSON（）對象發送到響應？我如何渲染index.jade中的圖形對象？非常感謝。

來源

2016-07-26 Yingwei HU

如何發送graph.toJSON（）對象來響應？

您可以將數據發送到響應通過渲染功能如下圖所示：

res.render('index', {title: 'Express', graph: graph.toJSON()});

我怎樣才能使圖形對象在index.jadd

你需要熟悉玉Jade Lang
然後你可以按照這個教程http://www.jointjs.com/tutorial
因爲沒有joinjs的服務器端數據，所以你可以在瀏覽器中運行示例代碼。

來源

2016-07-26 04:33:22 Calvinxiao

非常感謝。我只是仍然對如何處理客戶端中的圖形對象感到困惑。我確實需要在服務器和客戶端之間進行交換。你想給出一個關於如何接受客戶端html圖表的示例代碼嗎？我應該使用graph.fromJSON（graphJSON）;在客戶端html/jade的腳本中獲取服務器數據？ –

看到你的解決方案，AJAX是更好的方法。 – Calvinxiao

我使用ajax解決了這個問題。

在JS在客戶端

$('#search').on('keyup', function(e){ 
     if(e.keyCode === 13) { 
      var parameters = { search: $(this).val() }; 
      $.get('/searching',parameters, function(data) { 
       // $('#results').html(data); 
       // var java = JSON.parse(data); 

       var graph = new joint.dia.Graph; 

       var paper = new joint.dia.Paper({ 
        el: $('#container'), 
        width: 800, 
        height: 200, 
        model: graph, 
        gridSize: 1 
       }); 
       var x = JSON.parse(data); 
       graph.fromJSON(x); 
      }); 
     }; 
    });

在服務器端，

var joint = require('jointjs'); 
var graph = new joint.dia.Graph; 

var el1 = new joint.shapes.basic.Rect({ 
    position: {x: 100, y: 30}, 
    size: {width: 100, height: 30}, 
    attrs: {rect: {fill: 'blue'}, 
    text: { text: 'my box', fill: 'white' }} 
}); 
var el2 = el1.clone(); 
el2.translate(300); 
var link = new joint.dia.Link({source: {id: el1.id}, target: {id: el2.id}}); 
graph.addCells([el1, el2, link]); 
var jsonString = JSON.stringify(graph.toJSON()); 
res.send(jsonString);

不過，我仍然不知道如何呈現在服務器玉石jointjs對象，並直接與返回的HTML渲染svg，如果我使用res.render（'index'，{title：'Express'，graph：graph.toJSON（）}）; 有人可以幫忙嗎？謝謝。

來源

2016-07-26 21:25:38

如何在nodejs中使用jointjs

回答

相關問題