docs: optimize graphs docs

ant-design · Dec 12, 2024 · 2de7b9a · 2de7b9a
1 parent 872c4a7
commit 2de7b9a
Show file tree

Hide file tree

Showing 21 changed files with 698 additions and 281 deletions.
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
@@ -55,8 +55,8 @@ export default defineConfig({
       {
         slug: 'docs/options',
         title: {
-          zh: '选项',
-          en: 'Option',
+          zh: '组件',
+          en: 'Components',
         },
       },
       {
@@ -149,13 +149,21 @@ export default defineConfig({
         order: 10,
       },
       {
-        slug: 'options/graphs',
+        slug: 'options/graphs-concepts',
         title: {
-          zh: '关系图',
-          en: 'Relation Graph',
+          zh: '关系图概念',
+          en: 'Relation Graph Concepts',
         },
         order: 1,
       },
+      {
+        slug: 'options/graphs',
+        title: {
+          zh: '关系图组件',
+          en: 'Relation Graph Components',
+        },
+        order: 2,
+      },
     ],
     examples: [
       {

diff --git a/site/docs/options/demos/components-list.tsx b/site/docs/options/demos/components-list.tsx
@@ -1,11 +1,11 @@
 /**
  * inline: true
  */
-import { Button, Card, Col, Divider, Flex, Row, Tag } from 'antd';
+import { Card, Col, Divider, Flex, Row, Tag } from 'antd';
+import { useFullSidebarData, useLocale, useNavigate } from 'dumi';
+import { isEmpty } from 'lodash';
 import React, { Suspense, useMemo } from 'react';
-import { useLocale, useFullSidebarData, useNavigate } from 'dumi';
 import { styled } from 'styled-components';
-import { isEmpty } from 'lodash';
 
 enum ChartType {
   PLOT = 'Plot',
@@ -15,15 +15,15 @@ enum ChartType {
 const locales = {
   en: {
     [ChartType.PLOT]: 'Statistics',
-    [ChartType.GRAPH]: 'Relations'
+    [ChartType.GRAPH]: 'Relations',
   },
   zh: {
     [ChartType.PLOT]: '统计图',
-    [ChartType.GRAPH]: '关系图'
+    [ChartType.GRAPH]: '关系图',
   },
 };
 
-const URLS = ['/options/plots/special', '/options/graphs'];
+const URLS = ['/options/plots', '/options/graphs'];
 
 const StyledWrapper = styled.div`
   .filter-panel {
@@ -44,54 +44,65 @@ const StyledWrapper = styled.div`
       border: 1px solid #f0f0f0;
     }
   }
-.`
-
-const usagesData = [{
-  id: 'all',
-  nameZh: '全部',
-  nameEn: 'All',
-},
-{
-  id: 'comparison',
-  nameZh: '比较类',
-  nameEn: 'Comparison',
-}, {
-  id: 'distribution',
-  nameZh: '分布类',
-  nameEn: 'Distribution',
-}, {
-  id: 'flow',
-  nameZh: '流程类',
-  nameEn: 'Flow',
-}, {
-  id: 'proportion',
-  nameZh: '占比类',
-  nameEn: 'Proportion',
-}, {
-  id: 'interval',
-  nameZh: '区间类',
-  nameEn: 'Interval',
-}, {
-  id: 'relation',
-  nameZh: '关系类',
-  nameEn: 'Relation',
-}, {
-  id: 'trend',
-  nameZh: '趋势类',
-  nameEn: 'Trend',
-}, {
-  id: 'time',
-  nameZh: '时间类',
-  nameEn: 'Time',
-}, {
-  id: 'map',
-  nameZh: '地图类',
-  nameEn: 'Map',
-}, {
-  id: 'other',
-  nameZh: '其他',
-  nameEn: 'Other',
-}];
+.`;
+
+const usagesData = [
+  {
+    id: 'all',
+    nameZh: '全部',
+    nameEn: 'All',
+  },
+  {
+    id: 'comparison',
+    nameZh: '比较类',
+    nameEn: 'Comparison',
+  },
+  {
+    id: 'distribution',
+    nameZh: '分布类',
+    nameEn: 'Distribution',
+  },
+  {
+    id: 'flow',
+    nameZh: '流程类',
+    nameEn: 'Flow',
+  },
+  {
+    id: 'proportion',
+    nameZh: '占比类',
+    nameEn: 'Proportion',
+  },
+  {
+    id: 'interval',
+    nameZh: '区间类',
+    nameEn: 'Interval',
+  },
+  {
+    id: 'relation',
+    nameZh: '关系类',
+    nameEn: 'Relation',
+  },
+  {
+    id: 'trend',
+    nameZh: '趋势类',
+    nameEn: 'Trend',
+  },
+  {
+    id: 'time',
+    nameZh: '时间类',
+    nameEn: 'Time',
+  },
+  {
+    id: 'map',
+    nameZh: '地图类',
+    nameEn: 'Map',
+  },
+  {
+    id: 'other',
+    nameZh: '其他',
+    nameEn: 'Other',
+  },
+];
 
 export default () => {
   const lang = useLocale().id;
@@ -100,19 +111,27 @@ export default () => {
   const navigate = useNavigate();
   const [selectedUsages, setSelectedUsages] = React.useState<string[]>(['all']);
 
-  const metas = useMemo(() => URLS.flatMap(url => data[lang === 'zh' ? url : `/en${url}`][0].children)
-    .filter(meta => meta.frontmatter.category === 'Components')
-    .map(meta => {
-      const usageIds = (meta.frontmatter.usage || '').split(',').filter(usage => !isEmpty(usage));
-      const usages = usagesData.filter(tag => usageIds.includes(tag.id));
-      return {
-        ...meta,
-        ...meta.frontmatter,
-        usages,
-      }
-    })
-    .filter(meta => selectedUsages.includes('all') || selectedUsages.every(usage => meta.usages.some(item => item.id === usage)))
-    .sort((a, b) => a.title.localeCompare(b.title)), [data, lang, selectedUsages]);
+  const metas = useMemo(
+    () =>
+      URLS.flatMap((url) => data[lang === 'zh' ? url : `/en${url}`][0].children)
+        .filter((meta) => meta.frontmatter.category === 'Components')
+        .map((meta) => {
+          const usageIds = (meta.frontmatter.usage || '').split(',').filter((usage) => !isEmpty(usage));
+          const usages = usagesData.filter((tag) => usageIds.includes(tag.id));
+          return {
+            ...meta,
+            ...meta.frontmatter,
+            usages,
+          };
+        })
+        .filter(
+          (meta) =>
+            selectedUsages.includes('all') ||
+            selectedUsages.every((usage) => meta.usages.some((item) => item.id === usage)),
+        )
+        .sort((a, b) => a.title.localeCompare(b.title)),
+    [data, lang, selectedUsages],
+  );
 
   const handleChange = (tag: string, checked: boolean) => {
     let nextSelectedUsages;
@@ -132,47 +151,53 @@ export default () => {
     setSelectedUsages(nextSelectedUsages);
   };
 
-  return <Suspense fallback={null}>
-    <StyledWrapper>
-      <div className='filter-panel'>
-        <Divider />
-        <Flex gap={6} wrap align="center">
-          {usagesData.map<React.ReactNode>(({ id, nameZh, nameEn }) => (
-            <Tag.CheckableTag
-              className='filter-tag'
-              key={id}
-              checked={selectedUsages.includes(id)}
-              onChange={(checked) => handleChange(id, checked)}
-            >
-              {lang === 'zh' ? nameZh : nameEn}
-            </Tag.CheckableTag>
-          ))}
-        </Flex>
-        <Divider />
-      </div>
-
-      <Row gutter={[24, 24]}>
-        {metas.map((meta, index) => {
-          return <Col span={6} key={index}>
-            <Card
-              size="small"
-              onClick={() => navigate(meta.link)}
-              hoverable
-              title={meta.title}
-              style={{ borderRadius: 6 }}
-
-            >
-              <Flex justify="center" align="center">
-                <img alt={meta.title} src={meta.cover} height={158} />
-              </Flex>
-              <Flex wrap gap={2} className='usage-items'>
-                {meta.usages?.map((usage, index) => <div className='usage-item' key={index}>{
-                  lang === 'zh' ? usage.nameZh : usage.nameEn
-                }</div>)}
-              </Flex>
-            </Card></Col>
-        })}
-      </Row>
-    </StyledWrapper>
-  </Suspense >
+  return (
+    <Suspense fallback={null}>
+      <StyledWrapper>
+        <div className="filter-panel">
+          <Divider />
+          <Flex gap={6} wrap align="center">
+            {usagesData.map<React.ReactNode>(({ id, nameZh, nameEn }) => (
+              <Tag.CheckableTag
+                className="filter-tag"
+                key={id}
+                checked={selectedUsages.includes(id)}
+                onChange={(checked) => handleChange(id, checked)}
+              >
+                {lang === 'zh' ? nameZh : nameEn}
+              </Tag.CheckableTag>
+            ))}
+          </Flex>
+          <Divider />
+        </div>
+
+        <Row gutter={[24, 24]}>
+          {metas.map((meta, index) => {
+            return (
+              <Col span={6} key={index}>
+                <Card
+                  size="small"
+                  onClick={() => navigate(meta.link)}
+                  hoverable
+                  title={meta.title}
+                  style={{ borderRadius: 6 }}
+                >
+                  <Flex justify="center" align="center">
+                    <img alt={meta.title} src={meta.cover} height={158} />
+                  </Flex>
+                  <Flex wrap gap={2} className="usage-items">
+                    {meta.usages?.map((usage, index) => (
+                      <div className="usage-item" key={index}>
+                        {lang === 'zh' ? usage.nameZh : usage.nameEn}
+                      </div>
+                    ))}
+                  </Flex>
+                </Card>
+              </Col>
+            );
+          })}
+        </Row>
+      </StyledWrapper>
+    </Suspense>
+  );
 };
diff --git a/site/docs/options/graphs-common/option-behaviors.zh.md b/site/docs/options/graphs-common/option-behaviors.zh.md
@@ -0,0 +1,22 @@
+### Behaviors
+
+交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。
+
+**类型定义**：`BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])`
+
+默认情况下，`zoom-canvas`（缩放画布）和 `drag-canvas`（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。
+
+支持 G6 的所有内置交互。以下是部分交互的简介，详情可参考 [G6 - 核心概念 - 交互](https://g6.antv.antgroup.com/manual/core-concept/behavior)：
+
+- [Brush Select](https://g6.antv.antgroup.com/api/behaviors/brush-select)：框选
+- [Click Element](https://g6.antv.antgroup.com/api/behaviors/click-select)：单击选中
+- [Collapse Expand](https://g6.antv.antgroup.com/api/behaviors/collapse-expand)：展开收起
+- [Create Edge](https://g6.antv.antgroup.com/api/behaviors/create-edge)：创建边
+- [Drag Canvas](https://g6.antv.antgroup.com/api/behaviors/drag-canvas)：拖拽画布
+- [Drag Element](https://g6.antv.antgroup.com/api/behaviors/drag-element)：拖拽元素
+- [Focus Element](https://g6.antv.antgroup.com/api/behaviors/focus-element)：聚焦元素
+- [Hover Element](https://g6.antv.antgroup.com/api/behaviors/hover-activate)：悬停元素
+- [Lasso Select](https://g6.antv.antgroup.com/api/behaviors/lasso-select)：套索选择
+- [Zoom Canvas](https://g6.antv.antgroup.com/api/behaviors/zoom-canvas)：缩放画布
+
+若内置交互无法满足特定需求，还可根据 [G6 - 自定义交互](https://g6.antv.antgroup.com/manual/custom-extension/behavior) 教程来自定义交互。