CODEWITHSUNDEEP
javascriptjointjs
hucijiao
hucijiao

Reputation: 13

JointJS:Hello World example doesn't work

Hello I'm trying to execute Hello world application using JointJS library as given in: http://www.jointjs.com/tutorial#hello-world

I have downloaded joint.js(1.0.2) and joint.css files, copied the code given in HelloWorld tutorial in html file, and accessed it from the Chrome browser but it's not working as shown in the tutorial.

Console.error: Uncaught TypeError: this.addCell is not a function

html is:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>diagram</title>
<link rel="stylesheet" href="node_modules/joint/joint.min.css">

<body>
   <div id="diaHolder">

   </div>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/lodash/lodash.min.js"></script>
  <script src="node_modules/backbone/backbone-min.js"></script>
  <script src="node_modules/joint/joint.min.js"></script>
  <script>
   var graph = new joint.dia.Graph;
   var paper = new joint.dia.Paper({
       el: $('#diaHolder'),
       width: 600,
       height: 200,
       model: graph,
       gridSize: 1
   });

   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>

Upvotes: 1

Views: 706

Answers (2)

vt.
vt.

Reputation: 1428

check versions of dependencies, especial Lodash. JointJS it's not compatible with version 4.x

jQuery: 2.2.4
Lodash: 3.10.1
Backbone: 1.3.3

Upvotes: 3

NormTheThird
NormTheThird

Reputation: 176

Just throwing this out there but do you have a starting html tag?

Upvotes: 2

Related Questions