[英]how to use jointjs in nodejs
我是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
我想使用jointjs在node.js项目中绘制流程图,所以我根据帖子更改了index.js如下: 解释或演示JointJS和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中呈现图形对象? 非常感谢你。
如何发送graph.toJSON()对象进行响应?
您可以通过如下所示的渲染功能将数据发送到响应:
res.render('index', {title: 'Express', graph: graph.toJSON()});
如何在index.jadd中呈现图对象
我通过使用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);
但是,如果我使用res.render('index',{title:'Express',graph:graph.toJSON(),我仍然不知道如何使用jointjs对象在服务器上渲染玉器并直接使用svg返回渲染的html。 )}); 有人可以帮忙吗?
var strjson = JSON.stringify(graph.toJSON());
var objjson = JSON.parse(strjson);
graph2.fromJSON(objjson);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.