6.serialization

Persistence
Synthetic Graphs
Limitations
总结

Data serialization is very easy in JointJS. It is done through two import/export functions on the Graph class:
在JointJS中，数据序列化非常容易。它通过图形类上的两个import/export 函数完成：

• graph.toJSON() - converts the whole graph into a JSON object. 将整个图形转换为JSON对象。
• graph.fromJSON() - overwrite current graph contents with converted contents of a provided JSON object. 用提供的JSON对象的转换内容覆盖当前图形内容。

Persistence

persistence
英 [pəˈsɪstəns] 美 [pərˈsɪstəns]
n.坚持;锲而不舍;持续存在;维持

The functions preserve all cells that have been added to the graph. Additionally, note that custom properties saved on the graph are preserved as well. You can use this to store additional state information:
函数保留已添加到图表中的所有单元格。此外，请注意，保存在图形上的自定义属性也会保留。您可以使用此存储其他状态信息：

var graph1 = new joint.dia.Graph();
graph1.set('graphCustomProperty', true);
graph1.set('graphExportTime', Date.now()); // 1558427822283
var jsonObject = graph1.toJSON();
console.log(jsonObject);

// transmission of `jsonObject` across network etc.
// 通过网络等传输“jsonObject”。

var graph2 = new joint.dia.Graph(); // new empty graph
graph2.fromJSON(jsonObject);
console.log(graph2.get('graphCustomProperty'));; // true
console.log(graph2.get('graphExportTime'));; // e.g. 1558427822283

It is important to remember that the two functions work with JSON objects - not JSON strings. However, if necessary, you can easily convert back and forth using the native JavaScript JSON.stringify() and JSON.parse() functions:
重要的是要记住，这两个函数使用的是JSON对象，而不是JSON字符串。但是，如果需要，可以使用本机javascript json.stringify（）和json.parse（）函数轻松地来回转换：

var graph1 = new joint.dia.Graph();
graph1.set('graphTimekk',Date.now())
var jsonObject = graph1.toJSON();
console.log(jsonObject);
var jsonString = JSON.stringify(jsonObject);

// transmission of `jsonString` across network etc.

var graph2 = new joint.dia.Graph(); // new empty graph
graph2.fromJSON(JSON.parse(jsonString));
console.log(graph2.get('graphTimekk'));

Depending on how you store/transmit your app data, you may work with the JSON objects directly (e.g. when storing it in a non-relational database like MongoDB), or in the stringified form (which can be stored anywhere plaintext can be stored, at the added cost of stringifying & parsing of the JSON object for every transmission).
根据您存储/传输应用程序数据的方式，您可以直接使用JSON对象（例如，在MongoDB等非关系数据库中存储JSON对象时），或者以字符串化的形式（可以存储任何可以存储明文的地方，每次传输都需要额外的JSON对象的stringifying 和parsing ）。

==>画图 以后，可以用JSON对象存储；然后拿到JSON对象，又可以绘图了。

Synthetic Graphs

synthetic
英 [sɪnˈθetɪk] 美 [sɪnˈθetɪk]
adj.人造的;(人工)合成的;综合(型)的
n.合成物;合成纤维(织物);合成剂

It is of course also possible to avoid using the graph.toJSON() function altogether and instead construct your own synthetic graphs; you just need to make sure that the object you provide is valid JSON and that it contains a cells array property:
当然，也可以避免同时使用graph.toJSON()函数，而是构建自己的合成图；您只需确保提供的对象是有效的json，并且它包含一个单元格数组属性：

var graph = new joint.dia.Graph();
graph.fromJSON({
    cells: [{
        id: 1,
        type: 'standard.Rectangle',
        position: {
            x: 100,
            y: 100
        },
        size: {
            width: 100,
            height: 100
        }
    }]
});

The cells array can even be empty, if you want to create an empty synthetic graph:

var graph = new joint.dia.Graph();
graph.fromJSON({ cells: [] });

Limitations

Keep in mind the general limitations of the JSON format. Some commonly used native JavaScript data types (including Function, Date, and undefined) are not supported. The variables that have values of these types will not be persisted. Among other things, this means that if persistence is important in your application, you should choose to define custom element/link subtypes instead of embedding custom functions into default joint.dia.Element and joint.dia.Link types.
请记住JSON格式的一般限制。不支持某些常用的本机javascript数据类型（包括Function、Date和undefined）。具有这些类型值的变量将不会被持久化。另外，这意味着如果持久性在应用程序中很重要，那么您应该选择定义自定义元素/链接子类型，而不是将自定义函数嵌入到默认的joint.dia.element和joint.dia.link类型中。

Additionally, if you want to make use of the JSON objects and directly store them into MongoDB, you should remember its additional restriction on object keys starting with the . (dot) or $ (dollar sign) symbols. Those are reserved for internal use of the MongoDB system. This is significant in the context of JointJS because it precludes the use of CSS-style selectors in the attrs arrays of your Elements and Links. Therefore, if persistence is important to you and you want to save data directly to MongoDB, you should always define custom subelement selectors in the markup of your custom elements instead of relying on CSS-style selectors.
此外，如果要使用JSON对象并将其直接存储到MongoDB中，则应该记住它对以. (dot) or $ (dollar sign) symbols开头的对象键的附加限制。这些是为MongoDB系统的内部使用而保留的。这在jointjs的上下文中很重要，因为它排除了在元素和链接的attrs数组中使用css样式选择器。因此，如果持久性对您很重要，并且您希望将数据直接保存到MongoDB，那么应该始终在自定义元素的markup 中定义自定义子元素选择器，而不是依赖于CSS样式选择器。

总结

persistence：
==>为了保存图形后，后续 进入页面，可以直接绘出图形。

synthetic graphs：

limitations：