JSON in joint.js lesen?

ich joint.js Bibliothek möchte meine JSON lesen und es als Diagramm anzeigen ...JSON in joint.js lesen?

var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 600, 
    height: 200, 
    model: graph 
}); 

var graph = new joint.dia.Graph; 

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }'; 

graph.fromJSON(JSON.parse(jsonstring));

Quelle

2013-11-20 IamMowgoud

Ich bin fasziniert von einer Bibliothek, die eine 'fromJSON' Methode hat, die nicht JSON akzeptiert ... – lonesomeday

Es gibt einen Grund dafür . Lesen Sie https://developer.mozilla.org/en-US/docs/JSON#toJSON()_method und ein Beispiel für eine andere Bibliothek: http://backbonejs.org/#Model-toJSON. JSON.stringify ruft das Objekt jSON() des rekursiv beschreibenden Objekts auf. toJSON() soll ein Objekt und keine Zeichenfolge zurückgeben. Versuchen Sie Folgendes: JSON.stringify ({toJSON: function() {return {foo: 'bar'}}}). fromJSON() ist das Gegenteil und akzeptiert daher ein Objekt, keine Zeichenfolge. – dave

Von der API für joint.dia.Graph:

joint.dia.Graph ist das Modell alle Halte die Zellen (Elemente und Links) des Diagramms. Es ist ein Backbone model. Die Sammlung aller Zellen ist in den Eigenschaftenzellen gespeichert.

Der erwartete JSON sollte also in dieser Form sein: { cells: [] }. Wobei cells ein Array von Elementen und Links ist. Jedes Element sollte die Form hat:

{ 
    id: <string>, 
    type: '<type of shape>', 
    attrs: { <attrs> }, 
    position: { x: <int>, y: <int> }, 
    angle: <deg>, 
    size: { width: <int>, height: <int> }, 
    z: <int>, 
    ... and some other, maybe custom, data properties 
}

Referenz: Using Server Data with JointJS

Quelle

2013-11-20 13:41:21

Fügen Sie einfach hinzu, dass Sie die JSON normalerweise nicht manuell erstellen, sondern JointJS-Elemente und -Verbindungen zum Diagramm hinzufügen und das Diagramm dann mit JSON.stringify (Grafik) stringieren. – dave

Antwort

Verwandte Themen