如何安装 AntvX6

如果你想安装 AntvX6，下面是一个简单的指南，帮助你在项目中快速集成这个图形库。

步骤一：准备环境

在开始之前，请确保你的开发环境已经安装了 Node.js 和 npm。如果还没有安装，请访问 Node.js 官网下载并安装。

步骤二：创建项目

如果你还没有现有的项目，可以通过以下命令创建一个新的 npm 项目：

mkdir my-x6-project
cd my-x6-project
npm init -y

步骤三：安装 AntvX6

在你的项目目录下，运行以下命令来安装 AntvX6：

npm install @antv/x6 --save

这将会把 AntvX6 库添加到你的项目依赖中。

步骤四：引入 AntvX6

在你的 JavaScript 文件中引入 AntvX6。示例如下：

import { Graph } from '@antv/x6';
 
// 创建一个画布实例
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
});
 
// 添加节点或边到图中
graph.addNode({
  x: 40,
  y: 40,
  width: 80,
  height: 40,
  label: 'hello',
});

确保你有一个 HTML 元素作为容器，例如：

<div id="container"></div>

步骤五：运行项目

确保所有设置无误后，你可以通过以下命令启动你的应用程序：

npm start

或者根据你的具体构建工具和框架配置，选择合适的启动命令。

注意事项

• 确保浏览器支持 ES Module。
• 如果使用构建工具（如 Webpack、Parcel 等），请根据其配置文档进行必要调整。
• 查看 AntV X6 官方文档 获取更多详细信息和示例。

通过以上步骤，你应该能够成功地将 AntV X6 集成到你的项目中，并开始创建交互式图形。