JointJS:Hello World示例不起作用

时间:2016-11-08 03:17:27

标签: javascript jointjs

您好我正在尝试使用JointJS库中的joint.js(1.0.2)库执行Hello world应用程序:http://www.jointjs.com/tutorial#hello-world

我已经下载了joint.css<!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> 个文件,复制了html文件中HelloWorld教程中给出的代码,并从Chrome浏览器中访问了它,但它没有按照教程中的说明进行操作。

  

Console.error:Uncaught TypeError:this.addCell不是函数

html是:

IDialogService

2 个答案:

答案 0 :(得分:3)

检查依赖项的版本,特别是Lodash。 JointJS它与版本4.x不兼容

jQuery:2.2.4
Lodash:3.10.1
骨干:1.3.3

答案 1 :(得分:2)

把它扔到那里但是你有一个起始的html标签吗?