2017-08-04 40 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