新手：世界你好使用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

回答

相關問題