获取错误 dia.ElementView：graph.fromJSON(json) 需要标记答案

【问题标题】：Getting error dia.ElementView: markup required from graph.fromJSON(json)获取错误 dia.ElementView：graph.fromJSON(json) 需要标记
【发布时间】：2019-12-17 02:20:58
【问题描述】：

在执行我的一项任务时，我想在 rappidJS/JointJS 的帮助下以 json 格式绘制图表。我指的是下面的链接 https://resources.jointjs.com/tutorial/serialization 我遇到了错误

dia.ElementView：需要标记

我用来填充的 json 是

{
"cells": [{
    "type": "standard.Rectangle",
    "position": {
        "x": 70,
        "y": 70
    },
    "size": {
        "width": 70,
        "height": 70
    },
    "angle": 0,
    "id": "79e30352-ad4f-417a-807a-0427d605a9f4",
    "z": 1

}]

}

图文代码如下

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
                width: $('.paper-container').width(),
                height: $('.paper-container').height(),
                gridSize: 10,
                drawGrid: true,
                model: graph,
                interactive: {linkMove: false},
                defaultLink: new joint.dia.Link({
                      attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }}
                }),
                async: true
            });

我得到的错误是

Uncaught Error: dia.ElementView: markup required
at child.renderMarkup (rappid.min.js:14)
at child.render (rappid.min.js:14)
at child.e.render (rappid.min.js:14)
at child.confirmUpdate (rappid.min.js:14)
at child.updateView (rappid.min.js:14)
at child.updateViewsBatch (rappid.min.js:14)
at child.updateViewsAsync (rappid.min.js:14)

我这里使用的是 Rappid 3.0 版本。

【问题讨论】：

那会回答你的问题stackoverflow.com/questions/57151942/…吗？
@Roman 我正在使用 requirejs，其中我添加了所有必需的 js 文件，例如（Rappid、backbone、lodash 等），同样在上面的示例中，我使用的是 RappidJS/ 提供的形状JointJS 即矩形。
内置形状没有区别。您能否尝试添加cellNamespace 和cellViewNamespace，如答案所示？
@Roman 谢谢它正在工作

标签： json jointjs

【解决方案1】：

确保您在创建时拥有图表集的cellNamespace，并且还拥有论文集的cellViewNamespace。

const graph = new joint.dia.Graph({}, {cellNamespace: joint.shape});
const paper = new joint.dia.Paper({model: graph, cellViewNamespace: joint.shapes});

之后，确保所有自定义元素扩展都在 joint.shape 对象上。因此，如果您有这样定义的自定义元素：

const NewElement = joint.dia.Element.define("node.NewElement", {size: {width:70,height: 70},... });

然后确保node.NewElement 元素位于joint.shapes 对象上，如下所示。 joint.shapes.node = {}; joint.shapes.node.NewElement = NewElement;

【讨论】：

谢谢你，你拯救了我的一天！