我有一个像这样的 json 数据结构,例如:
var json1 = {
"places": [ { "id":0, "x":0.0, "y":0.0, "width":10.0, "height":10.0 },
{ "id":1, "x":50.0, "y":0, "width":10.0, "height":10.0 },
{ "id":2, "x":0.0, "y":30.0, "width":10.0, "height":10.0 },
{ "id":3, "x":50.0, "y":30.0, "width":10.0, "height":10.0 } ],
"transitions": [ { "id":0, "x":20.0, "y":20.0, "width":20.0, "height":10.0, "label":"Hello" } ],
"ptlinks": [ { "src":0, "dst":0, "expr":"x=0" },
{ "src":1, "dst":0, "expr":"y=0" } ],
"tplinks": [ { "src":0, "dst":1 },
{ "src":0, "dst":3 } ],
"name"": "Client"
}
我想使用这些数据来绘制一个图形,其中元素转换为矩形,并放置为带有链接的圆形......
<script language="javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#main_petri'),
width: 960,
height: 500,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: '#FFFFFF' }, text: { text: '#', fill: '#000000' } }
});
var rect2 = rect.clone();
rect2.translate(0,50);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
如何在jointjs中使用JSON(位置,大小...)?