Question

我是联合新手。我正在尝试运行在jointjs官方网站上给出的UML Statechart Diagram的演示示例，但是当我运行它时，我收到以下错误并且没有显示任何内容。

未捕获的TypeError：this.findBySelector不是函数   joint.js：6872 at lodash.js：4944 at baseForOwn（lodash.js：3001）at at   lodash.js：4913 at function.forEach（lodash.js：9359）at child.update   （joint.js：6867）在child.wrapper [作为更新]（lodash.js：4968）at at   child.protoProps.render上的child.render（joint.js：7192）   （joint.js：4260）at child.renderView（joint.js：9888）joint.html：20

未捕获的TypeError：无法读取未定义的属性“Plot”   joint.html：20在joint.html：63

<!DOCTYPE html>
<html>
<head>
    <title>JOINT JS</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.3/joint.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.3/joint.js"></script>
    <script src="http://resources.jointjs.com/demos/joint/demo/umlsc/src/umlsc.js"></script>
</head>
<body>
    <div id="paper"></div>
</body>
</html>

<script>
$(function(){
    var graph = new joint.dia.Graph();

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


var uml = joint.shapes.uml;

var states = {

s0: new uml.StartState({
    position: { x:20  , y: 20 },
    size: { width: 30, height: 30 },
    attrs: {
        'circle': {
            fill: '#4b4a67',
            stroke: 'none'
        }
    }
}),

s1: new uml.State({
    position: { x:100  , y: 100 },
    size: { width: 200, height: 100 },
    name: "state 1",
    events: ["entry / init()","exit / destroy()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s2: new uml.State({
    position: { x:400  , y: 200 },
    size: { width: 300, height: 300 },
    name: "state 2",
    events: ["entry / create()","exit / kill()","A / foo()","B / bar()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s3: new uml.State({
    position: { x:130  , y: 400 },
    size: { width: 160, height: 60 },
    name: "state 3",
    events: ["entry / create()","exit / kill()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s4: new uml.State({
    position: { x:530  , y: 400 },
    size: { width: 160, height: 50 },
    name: "sub state 4",
    events: ["entry / create()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

se: new uml.EndState({
    position: { x:750  , y: 550 },
    size: { width: 30, height: 30 },
    attrs: {
        '.outer': {
            stroke: "#4b4a67",
            'stroke-width': 2
        },
        '.inner': {
            fill: '#4b4a67'
        }
    }
})

};
_.each(states, function(c) { graph.addCell(c); });

states.s2.embed(states.s4);

var linkAttrs =  {
'fill': 'none',
'stroke-linejoin': 'round',
'stroke-width': '2',
'stroke': '#4b4a67'
};

var transitons = [
new uml.Transition({
    source: { id: states.s0.id },
    target: { id: states.s1.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s1.id },
    target: { id: states.s2.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s1.id },
    target: { id: states.s3.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s3.id },
    target: { id: states.s4.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s2.id },
    target: { id: states.se.id },
    attrs: {'.connection': linkAttrs }
})
];

graph.addCells(transitons);


});

    </script>

Answer 1

经过大量搜索后，终于能够修复它了。

检查依赖项的版本，特别是Lodash。 JointJS它与版本4.x不兼容

jQuery：2.2.4 Lodash：3.10.1 骨干：1.3.3

无法运行UML StateChart Diagram

1 个答案: