無法運行UML狀態圖的jointjs演示的例子

我是新來jointjs。我試圖運行在jointjs官方網站上給出的UML狀態圖的演示示例，但是當我運行它時，出現以下錯誤，沒有任何顯示。無法運行UML狀態圖的jointjs演示的例子

Uncaught TypeError: this.findBySelector is not a function at joint.js:6872 at lodash.js:4944 at baseForOwn (lodash.js:3001) at lodash.js:4913 at Function.forEach (lodash.js:9359) at child.update (joint.js:6867) at child.wrapper [as update] (lodash.js:4968) at child.render (joint.js:7192) at child.protoProps.render (joint.js:4260) at child.renderView (joint.js:9888) joint.html:20

Uncaught TypeError: Cannot read property 'Plot' of undefined at joint.html:20 at 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>

來源

2017-03-01 Anupam Singh

我在控制檯中我得到的錯誤是：遺漏的類型錯誤：this.findBySelector是不是在joint.js功能：6872 在lodash.js：4944 在baseForOwn（lodash.js：3001）在lodash.js：4913 在Function.forEach（lodash.js：9359）的孩子.update（joint.js：6867）在child.wrapper [如更新（lodash.js：4968）在child.render（joint.js：7192）在child.protoProps.render（joint.js：4260）在child.renderView（joint.js：9888） joint.html：20遺漏的類型錯誤：在joint.html無法讀取的不確定財產 '塊'：20 在joint.html：63 –

更新您的問題與您的錯誤 –

大量搜索後，終於能夠解決它。依賴

檢查版本，特殊Lodash。 JointJS它不是與4.x版

jQuery的兼容：2.2.4 Lodash：3.10.1 骨幹：1.3.3

來源

2017-03-01 18:26:59

無法運行UML狀態圖的jointjs演示的例子

回答

相關問題