Newbie: hello world using jointjs

Question

Newbie: hello world using jointjs

Hi, I am trying to run a Hello world application using the JointJS library as indicated in: http://www.jointjs.com/tutorial#hello-world I downloaded the joint.js and joint.css files I copied the code shown in the HelloWorld tutorial in the html file, and accessed it from the firefox browser (26.0) But it does not work as expected and shown in the tutorial. Expected: two boxes with a link should appear. In fact: nothing comes in the browser. Ater debugging error: "NS_ERROR_FAILURE:" in the joint.js file at:

    var bbox = this.el.getBBox();

code:

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

Relationship Ranganat

+2

jointjs

user3214974 Jan 20 '14 at 11:56

source share

2 answers

dave · Answer 1 · 2014-01-21T08:25:40+0000

. <body> :

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

Nonay Goy · Answer 2 · 2016-07-25T03:28:01+0000

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

Newbie: hello world using jointjs

More articles: