newbie: hello world using jointjs

问题

Hello Im trying to execute Hello world application using JointJS library as given in : http://www.jointjs.com/tutorial#hello-world I have downloaded joint.js and joint.css files I have copied the code given in HelloWorld tutorial in html file and accessed it from the firefox browser (26.0) But its not working as expected and shown in the tutorial. Expected: Two boxes with link should come. Actual: Nothing is coming on the browser. Ater debugging error is: "NS_ERROR_FAILURE:" in joint.js at:

    var bbox = this.el.getBBox();

code is:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
</head>        

<body>

<script type="text/javascript">
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>
</body>

</html>

Regards Ranganath

回答1:

You're missing a holder for the paper object. Add the following right after the opening <body> tag:

<div id="myholder"></div>

回答2:

You can try this code. Please add jquery.min.js lodash.min.js backbone-min.js

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="joint.css" />
    <script src="joint.js"></script>
    <script src="jquery.min.js"></script>
    <script src="lodash.min.js"></script>
    <script src="backbone-min.js"></script>
    </head>        

    <body>
    <div id="myholder"></div>
    <script type="text/javascript">
    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>
    </body>

来源：https://stackoverflow.com/questions/21233427/newbie-hello-world-using-jointjs

标签

jointjs