当我从JointJS网站尝试Hello World示例时，总是会看到此异常:
Uncaught TypeError: Cannot call method 'getStrokeBBox' of undefined
这是代码:
<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="css/joint.css" />
<script src="js/joint.js"></script>
-->
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css"></link>
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</head>
<title>Test</title>
<body>
<div id="myholder"> </div>
</body>
</html>
我看到有另一个问题已经问过here了，但是我给出的解决方案不相关，因为我已经有一个用于纸张对象的div元素。
最佳答案
el: $('#myholder'),
浏览器从上到下阅读。浏览器会在找到ID为
myholder的元素之前执行此行，因此el是一个空的jQuery对象。而是将您的脚本标签移到HTML的底部(这样，浏览器就在找到它之前找到了
myholder)或将它们全部包装在 $(document).ready( call中。