2017-08-04 35 views
0

我想使用arbor在HTML文件中創建圖。我寫的代碼波紋管,但在畫布上沒有顯示由arbor創建的圖未顯示

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

視點canvas.what運行這些代碼沒有放映後問題?

回答

0

除了jquery被加載兩次,你的代碼看起來很好。所以這個問題可能與文件有關,只要檢查你的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,並從arbor的倉庫下載最新的文件 – Parag