如何在nodejs中使用jointjs

Question

我是javascript、jointjs 和nodejs 的新用户。我用webstorm搭建了一个nodejs项目，文件结构如下：

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

我想在node.js项目中使用jointjs绘制流程图，所以我根据post修改了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 中渲染图形对象？非常感谢。

Answer 1

如何发送 graph.toJSON() 对象进行响应？

您可以通过如下所示的渲染函数将数据发送到响应：

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

如何在 index.jadd

中渲染图形对象

你需要熟悉翡翠Jade Lang
那你就可以跟着教程了http://www.jointjs.com/tutorial
由于没有joinjs的服务器端数据，您可以直接运行浏览器中的示例代码。

Answer 2

我使用 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 object 在服务器上渲染 jade 并直接 return 使用 svg 渲染 html，如果我使用 res.render('index', {标题: 'Express', 图表: graph.toJSON()}); 有人可以帮忙吗？谢谢。

Answer 3

var strjson = JSON.stringify(graph.toJSON());

var objjson = JSON.parse(strjson);

graph2.fromJSON(objjson);

如何在nodejs中使用jointjs

how to use jointjs in nodejs

javascript

node.js

express

jointjs