docs(site): update layout examples (#6671)

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();

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"
+    }
+  ]
+}

packages/site/examples/layout/sub-graph/index.en.md

@@ -0,0 +1,4 @@
+---
+title: SubGraph
+order: 16
+---

packages/site/examples/layout/sub-graph/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 子图布局
+order: 16
+---