docs: add site demo

packages/g6/__tests__/demos/case-fishbone.ts

@@ -177,6 +177,7 @@ export const caseFishbone: TestCase = async (context) => {
     },
     layout: {
       type: 'fishbone',
+      direction: 'LR',
       hGap: 40,
       vGap: 60,
     },

packages/g6/__tests__/demos/layout-fishbone.ts

@@ -51,13 +51,6 @@ const data = {
   ],
 };
 
-function randomInt(n) {
-  return Math.round(Math.random() * n);
-}
-function randomColor() {
-  return `rgba(${randomInt(255)}, ${randomInt(255)}, ${randomInt(255)}, ${Math.random()})`;
-}
-
 export const layoutFishbone: TestCase = async (context) => {
   const graph = new Graph({
     ...context,

packages/g6/__tests__/unit/layouts/fishbone.spec.ts

@@ -14,13 +14,13 @@ describe('fishbone', () => {
   });
 
   it('default', async () => {
-    await expect(graph).toMatchSnapshot(__filename, 'direction-LR');
+    await expect(graph).toMatchSnapshot(__filename, 'direction-RL');
   });
 
   it('direction RL', async () => {
-    graph.setLayout((prev) => ({ ...prev, type: 'fishbone', direction: 'RL' }));
+    graph.setLayout((prev) => ({ ...prev, type: 'fishbone', direction: 'LR' }));
     await graph.render();
-    await expect(graph).toMatchSnapshot(__filename, 'direction-RL');
+    await expect(graph).toMatchSnapshot(__filename, 'direction-LR');
   });
 
   it('vGap and hGap', async () => {

packages/g6/src/layouts/fishbone.ts

@@ -65,15 +65,15 @@ type LayoutResult = { nodes: NodeResult[]; edges: EdgeResult[] };
  *
  * <en/> Fishbone layout
  * @remarks
- * <zh/> 鱼骨图布局是一种专门用于表示层次结构数据的图形布局方式。它通过模拟鱼骨的形状，将数据节点按照层次结构排列，使得数据的层次关系更加清晰直观。鱼骨图布局特别适用于需要展示因果关系、层次结构或分类信息的数据集。
+ * <zh/> [鱼骨图布局](https://en.wikipedia.org/wiki/Ishikawa_diagram)是一种专门用于表示层次结构数据的图形布局方式。它通过模拟鱼骨的形状，将数据节点按照层次结构排列，使得数据的层次关系更加清晰直观。鱼骨图布局特别适用于需要展示因果关系、层次结构或分类信息的数据集。
  *
- * <en/> Fishbone layout is a graphical layout method specifically designed to represent hierarchical data. By simulating the shape of a fishbone, it arranges data nodes according to their hierarchical structure, making the hierarchical relationships of the data clearer and more intuitive. The fishbone diagram layout is particularly suitable for datasets that need to display causal relationships, hierarchical structures, or classification information.
+ * <en/> [Fishbone layout](https://en.wikipedia.org/wiki/Ishikawa_diagram) is a graphical layout method specifically designed to represent hierarchical data. By simulating the shape of a fishbone, it arranges data nodes according to their hierarchical structure, making the hierarchical relationships of the data clearer and more intuitive. The fishbone diagram layout is particularly suitable for datasets that need to display causal relationships, hierarchical structures, or classification information.
  */
 export class FishboneLayout extends BaseLayout {
   id = 'fishbone';
 
   static defaultOptions: Partial<FishboneLayoutOptions> = {
-    direction: 'LR',
+    direction: 'RL',
     getRibSep: () => 60,
   };
 

packages/site/examples/scene-case/default/demo/meta.json

@@ -91,14 +91,6 @@
         "en": "Why Do Cats?"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ug4vTJA7QbMAAAAAAAAAAAAADmJ7AQ/original"
-    },
-    {
-      "filename": "fishbone.js",
-      "title": {
-        "zh": "克服拖延症鱼骨图",
-        "en": "Anti-Procrastination Fishbone Diagram"
-      },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VusPQ50s3uEAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }