AntvX6 基本配置和初始化

1. 引入 AntvX6

在你的项目中引入 AntvX6，可以通过 npm 或者直接在 HTML 中引入 CDN 链接。

使用 npm 安装

npm install @antv/x6

使用 CDN 引入

<script src="https://unpkg.com/@antv/x6"></script>

2. 初始化画布

创建一个容器，并在其中初始化画布。

创建容器

在 HTML 中添加一个 div 元素作为画布的容器。

<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc;"></div>

初始化 Graph 实例

使用 JavaScript 在刚才创建的容器中初始化 Graph 实例。

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

3. 添加节点和边

在画布上添加节点和边，以构建你的图形结构。

添加节点

const rect = graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  label: 'Hello',
});

添加边

const edge = graph.addEdge({
  source: rect, // 可以直接使用节点对象，也可以使用节点 id.
  target: { x:160, y:60 },
});

示例

以下是一个完整的示例，将上述步骤组合起来，创建一个简单的包含一个节点和一条边的图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AntvX6 Example</title>
    <script src="https://unpkg.com/@antv/x6"></script>
</head>
<body>
    <div id="container" style="width:800px; height:600px; border:1px solid #ccc;"></div>
 
    <script type="text/javascript">
        const { Graph } = X6;
 
        const graph = new Graph({
          container: document.getElementById('container'),
          width:800,
          height:600,
        });
 
        const rect = graph.addNode({
          x:40,
          y:40,
          width:100,
          height:40,
          label:'Hello',
        });
 
        const edge = graph.addEdge({
          source:{ x :90, y :60 },
          target:{ x :160, y :60 },
        });
    </script>
</body>
</html>

通过以上步骤，你可以成功地在网页中配置并初始化 AntvX6 的基本功能。根据实际需求，还可以进一步自定义样式、交互等高级功能。

🪴qql1's digital garden

探索