Question

我想使用arbor在HTML文件中创建图形。我写下了代码，但没有在画布上显示

＆＃13;

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

＆＃13;

运行这些代码后，在视点画布中没有显示任何内容。问题是什么？

Answer 1

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

arbor创建的图形未显示

1 个答案: