JointJS：Hello World示例不起作用

Question

I am always seeing this exception when I try the Hello World example from the JointJS site: 当我从JointJS网站尝试Hello World示例时，我总是看到这个异常：

Uncaught TypeError: Cannot call method 'getStrokeBBox' of undefined

Here's the code: 这是代码：

<!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>

I saw that there is another question already asked here for the same problem, but the solution given there isn't relevant as I already have a div element for paper object. 我看到这里已经有另一个问题要问同一个问题，但是那里给出的解决方案并不相关，因为我已经有了一个纸质对象的div元素。

Answer 1

el: $('#myholder'),

Browsers read from top to bottom. 浏览器从上到下阅读。 The browser is executing this line before it ever finds an element with the id of myholder , so el is an empty jQuery object. 浏览器在找到id为myholder的元素之前执行此行，因此el是一个空的jQuery对象。

Instead, move your script tag to the bottom of the HTML (so the browser has found myholder before you try to grab it) or wrap it all in a $(document).ready( call . 相反，将脚本标记移动到HTML的底部（因此浏览器在您尝试获取之前找到了myholder ）或将其全部包装在$(document).ready(调用。

Answer 2

You are trying to get elements which are not created yet. 您正在尝试获取尚未创建的元素。 Place your script at the end of <body> or use $(document).ready(); 将脚本放在<body>的末尾或使用$(document).ready();

Answer 3

you are 你是 not 不 using jQuery so this will work: 使用jQuery所以这将工作：

window.onload = function () {   your entire javascript code here };

but better include jQuery.js too and use: 但最好还包括jQuery.js并使用：

$(function () {  your entire javascript code here  });

The code is executed line by line so it first loads and runs your javascript and doesn't know what "myholder" is. 代码是逐行执行的，因此它首先加载并运行您的javascript并且不知道“myholder”是什么。 Doing it like I explained above it will load the javascript but it will only execute it once the entire page is loaded. 像我上面解释的那样，它将加载javascript但它只会在整个页面加载后执行它。

JointJS：Hello World示例不起作用

问题描述

3 个解决方案

解决方案1
8 已采纳 2014-02-17 19:30:10

解决方案2
1 2014-02-17 19:31:16

解决方案3
1 2014-02-17 19:38:23

JointJS：Hello World示例不起作用

问题描述

3 个解决方案

解决方案1 8 已采纳 2014-02-17 19:30:10

解决方案2 1 2014-02-17 19:31:16

解决方案3 1 2014-02-17 19:38:23

解决方案1
8 已采纳 2014-02-17 19:30:10

解决方案2
1 2014-02-17 19:31:16

解决方案3
1 2014-02-17 19:38:23