Get started with antv-g6 CDN

MIT licensed

AntV-G6: Powerful, flexible graph visualization with JSs G6 engine.

Tags:

antv
g6
graph
graph analysis
graph editor
graph visualization
relational data

Stable version

https://cdn.cdnhub.io/antv-g6/5.0.32/g6.min.js Copied!

How to start using antv-g6 CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with antv-g6 CDN - cdnhub.io</title>
  <style>
    #container {
      width: 800px;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js"></script>
  <script src="https://cdn.cdnhub.io/antv-g6/4.8.24/g6.min.js"></script>
  <script>
    const data = {
      nodes: [
        { id: 1, label: 'Node 1' },
        { id: 2, label: 'Node 2' },
      ],
      edges: [
        { source: 1, target: 2 },
      ],
    };

    const container = document.getElementById('container');
    const graph = new G6.Graph({
      container,
      width: 800,
      height: 600,
      layout: {
        type: 'force',
      },
    });

    graph.data(data);

    graph.render();

    const node1 = graph.getNodes()[0];
    node1.setPosition(400, 300);

    const node2 = graph.getNodes()[1];
    node2.setPosition(450, 250);

    graph.fitView();
  </script>
</body>
</html>

Select version:

https://cdn.cdnhub.io/antv-g6/5.0.32/g6.min.js Copied!

Get started with antv-g6 CDN

Stable version

How to start using antv-g6 CDN

All versions