2017-08-04 9 views
0

アーバーを使用してHTMLファイルにグラフを作成したいと考えています。私は視点canvas.whatにこれらのコードは何もショーを実行した後グラフがアーバーによって作成されていない

<html> 
 

 
<head> 
 
    <title>graph</title> 
 
    <script type="text/javascript" src="jquery.js"></script> 
 
    <script type="text/javascript" src="arbor.js"></script> 
 
    <script type="text/javascript" src="graphics.js"></script> 
 
    <script type="text/javascript" src="renderer.js"></script> 
 
</head> 
 

 
<body> 
 
    <canvas id="viewport" width="800" height="600" style="background-color: yellow"></canvas> 
 
    <script src="jquery.js"></script> 
 

 
    <script language="javascript" type="text/javascript"> 
 
    var sys = arbor.ParticleSystem(1000, 400, 1); 
 
    sys.parameters({ 
 
     gravity: true 
 
    }); 
 
    sys.renderer = Renderer("#viewport"); 
 
    var data = { 
 
     nodes: { 
 
     animals: { 
 
      'color': 'red', 
 
      'shape': 'dot', 
 
      'label': 'Animals' 
 
     }, 
 
     dog: { 
 
      'color': 'green', 
 
      'shape': 'dot', 
 
      'label': 'dog' 
 
     }, 
 
     cat: { 
 
      'color': 'blue', 
 
      'shape': 'dot', 
 
      'label': 'cat' 
 
     } 
 
     }, 
 
     edges: { 
 
     animals: { 
 
      dog: {}, 
 
      cat: {} 
 
     } 
 
     } 
 
    }; 
 
    sys.graft(data); 
 
    </script> 
 

 
    <!--script src="test.js"></script--> 
 
</body> 
 

 
</html>

キャンバスで怒鳴る何もショーコードが問題です書くのか?

答えて

0

jqueryが2回読み込まれる点を除いて、コードは正常です。あなたのjsファイルがあなたのhtmlと同じディレクトリにあるかどうかを確認してください。次のコードは、

<!DOCTYPE html> 
<html> 
<head> 
    <title>graph</title> 
    <script src="jquery.js"></script> 
    <script src="arbor.js"></script> 
    <script src="graphics.js"></script> 
    <script src="renderer.js"></script> 
</head> 
<body> 
    <canvas id="viewport" width="800" height="600"></canvas> 
    <script language="javascript" type="text/javascript"> 
     var sys = arbor.ParticleSystem(1000, 400, 1); 
     sys.parameters({ 
      gravity: true 
     }); 
     sys.renderer = Renderer("#viewport"); 
     var data = { 
      nodes: { 
       animals: { 
        'color': 'red', 
        'shape': 'dot', 
        'label': 'Animals' 
       }, 
       dog: { 
        'color': 'green', 
        'shape': 'dot', 
        'label': 'dog' 
       }, 
       cat: { 
        'color': 'blue', 
        'shape': 'dot', 
        'label': 'cat' 
       } 
      }, 
      edges: { 
       animals: { 
        dog: {}, 
        cat: {} 
       } 
      } 
     }; 
     sys.graft(data); 
    </script> 
</body> 
</html> 
+0

JSファイルはHTMLファイルと同じディレクトリにあるが、私は何も出力を持っていない:( –

+0

あなたはおそらくコンソールにエラーを確認したり、スクリプトのバージョンに互換性があることを確認したい、私の作品私はjqueryの最新バージョンを使用し、アーバーのリポジトリから最新のファイルをダウンロードしました – Parag

関連する問題