2016-06-24 7 views
0

Wie kann ich ein joint.js Programm ausführen? Ich habe die erforderlichen js-Dateien heruntergeladen und den unten stehenden Code in einer HTML-Datei gespeichert. Ich habe versucht, in IE und Chrome zu öffnen, aber es führte zu einer leeren Seite statt:Joint.js Hilfe und Beratung

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="joint.css" /> 
    <script src="jquery.js"></script> 
    <script src="lodash.js"></script> 
    <script src="backbone.js"></script> 
    <script src="joint.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, 
     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> 
+0

scheint, dass Sie mit Dateispeicherorte vermasselt, Re-Check Dateipfade – Dakshika

Antwort

0

Clonen jointjs Projekt von https://github.com/clientIO/joint.git. Und gehen Sie zum Demo-Ordner, öffnen Sie eine HTML-Datei im Browser.

Ich denke, das wird Ihnen helfen, die Arbeit mit Jointjs zu beginnen.

Abhängigkeiten sind

jquery.js 
backbone.js 
joint.js 
0
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="css/joint.min.css" /> 
    <link rel="stylesheet" type="text/css" href="css/paper.css" /> 
    <script src="lib/jquery.min.js"></script> 
    <script src="lib/lodash.min.js"></script> 
    <script src="lib/backbone-min.js"></script> 
    <script src="lib/joint.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
0

Sie haben von der Version der Anstands kümmern, überprüfen Sie die Versionen in Bild unten, oder auch die folgenden CDN verwenden.

<link rel="stylesheet" href="joint.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script> 

enter image description here