在joint.js中读JSON？

Question

我想让joint.js库读取我的JSON并将其显示为图表...

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));

Answer 1

来自joint.dia.Graph的 API ：

joint.dia.Graph 是包含图表的所有单元（元素和链接）的模型。这是一个骨干模型。所有单元格的集合存储在属性单元格中。

所以预期的 JSON 应该是这种形式：{ cells: [] }。其中cells是元素和链接的数组。每个元素应具有以下形式：

{ 
    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 
}

参考：通过 JointJS 使用服务器数据