From 0c84e3c22505d63b786c0381e8d04987d38cf4e1 Mon Sep 17 00:00:00 2001
From: OctKun <cainchen97@qq.com>
Date: Thu, 26 Dec 2024 14:44:33 +0800
Subject: [PATCH] docs(site): update layout examples (#6671)

---
 .../examples/layout/sub-graph/demo/basic.js   | 47 +++++++++++++++++++
 .../examples/layout/sub-graph/demo/meta.json  | 16 +++++++
 .../examples/layout/sub-graph/index.en.md     |  4 ++
 .../examples/layout/sub-graph/index.zh.md     |  4 ++
 4 files changed, 71 insertions(+)
 create mode 100644 packages/site/examples/layout/sub-graph/demo/basic.js
 create mode 100644 packages/site/examples/layout/sub-graph/demo/meta.json
 create mode 100644 packages/site/examples/layout/sub-graph/index.en.md
 create mode 100644 packages/site/examples/layout/sub-graph/index.zh.md

diff --git a/packages/site/examples/layout/sub-graph/demo/basic.js b/packages/site/examples/layout/sub-graph/demo/basic.js
new file mode 100644
index 00000000000..b1e9de752b0
--- /dev/null
+++ b/packages/site/examples/layout/sub-graph/demo/basic.js
@@ -0,0 +1,47 @@
+import { Graph } from '@antv/g6';
+
+function generateArray(groups = 10, itemsPerGroup = 6) {
+  const result = []
+  
+  for (let i = 1; i <= groups; i++) {
+    for (let j = 1; j <= itemsPerGroup; j++) {
+      const id = `${i}-${j}`
+      result.push({
+        id,
+        labelText: id
+      })
+    }
+  }
+  
+  return result
+}
+
+const data = generateArray()
+
+const graph = new Graph({
+  container: 'container',
+  data:{
+    nodes:data
+  },
+  animation:false,
+  autoFit: 'view',
+  autoResize: true,
+  node: {
+    style: {
+      labelFill: '#fff',
+      labelPlacement: 'center',
+      labelText: (d) => d.labelText,
+    },
+  },
+  layout: Array.from({ length: 10 }, (_, i) => ({
+    type: 'circular',
+    nodeFilter: (node) => node.id.startsWith(`${i + 1}-`),
+    center: [
+      1000 + (i % 5) * 850, // x坐标
+      i < 5 ? 100 : 1100, // y坐标
+    ],
+  })),
+  behaviors: ['drag-canvas', 'drag-element','zoom-canvas'],
+});
+
+graph.render();
diff --git a/packages/site/examples/layout/sub-graph/demo/meta.json b/packages/site/examples/layout/sub-graph/demo/meta.json
new file mode 100644
index 00000000000..05de2c9ac94
--- /dev/null
+++ b/packages/site/examples/layout/sub-graph/demo/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "basic.js",
+      "title": {
+        "zh": "子图布局",
+        "en": "SubGraph Layout"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7dQoTLrT2xMAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}
diff --git a/packages/site/examples/layout/sub-graph/index.en.md b/packages/site/examples/layout/sub-graph/index.en.md
new file mode 100644
index 00000000000..a39420344b4
--- /dev/null
+++ b/packages/site/examples/layout/sub-graph/index.en.md
@@ -0,0 +1,4 @@
+---
+title: SubGraph
+order: 16
+---
diff --git a/packages/site/examples/layout/sub-graph/index.zh.md b/packages/site/examples/layout/sub-graph/index.zh.md
new file mode 100644
index 00000000000..aff800e79ef
--- /dev/null
+++ b/packages/site/examples/layout/sub-graph/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 子图布局
+order: 16
+---