我希望joint.js库读取我的JSON并将其显示为一个单元格:rect和circle

I want joint.js library to read my JSON and display it as a cell: rect and circle

本文关键字：一个 单元格 circle rect 显示 读取 js joint 我的 JSON 我希望      更新时间：2024-02-28

我有一个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（位置、大小…）？

您可以在位置/转换和链接上循环，并创建JointJS元素/链接。类似于：

_.each(json1.places, function(p) {
    graph.addCell(new joint.shapes.pn.Place({
        id: 'place' + p.id,
        position: { x: p.x, y: p.y },
        size: { width: p.width, height: p.height }
    }));
});
_.each(json1.transitions, function(t) {
    graph.addCell(new joint.shapes.pn.Transition({
        id: 'transition' + t.id,
        position: { x: t.x, y: t.y },
        size: { width: t.width, height: t.height },
        attrs: { '.label': { text: t.label } }
    }));
});
_.each(json1.ptlinks, function(l) {
    graph.addCell(new joint.dia.Link({
        source: { id: 'place' + l.src },
        target: { id: 'transition' + l.dst },
        labels: [ { position: .5, attrs: { text: { text: l.expr } } } ]
    }));
});
_.each(json1.tplinks, function(l) {
    graph.addCell(new joint.dia.Link({
        source: { id: 'transition' + l.src },
        target: { id: 'place' + l.dst },
        labels: [ { position: .5 } ]
    }));
});
相关文章：