新手：世界你好使用jointjs

你好我试着执行使用JointJS库Hello World应用程序在给出： http://www.jointjs.com/tutorial#hello-world 我已经下载joint.js和joint.css文件我抄在HTML中的HelloWorld教程中给出的代码文件并从Firefox浏览器访问它（26.0）但它没有按预期工作并在教程中显示。预计：应带两个带链接的箱子。实际：浏览器上没有任何内容。亚特调试错误是： “NS_ERROR_FAILURE：” 在joint.js在：新手：世界你好使用jointjs

var bbox = this.el.getBBox();

代码：

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

问候兰甘特

来源

2014-01-20 user3214974

您能否显示您的代码？ –

@Roy代码现在加入 – user3214974

您缺少的文件对象持有人。添加下面的右开<body>标签后：

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

来源

2014-01-21 08:25:40 dave

谢谢@Dave，它的工作正常。 – user3214974

你可以试试这个代码。请添加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>

来源

2016-07-25 03:28:01

给它添加一些描述，简单地粘贴代码就不会。 – piyushj

新手：世界你好使用jointjs

回答

相关问题