From ea9cc6b4c013851fc9f84c13ae7360fb168ff370 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 23 Apr 2024 15:56:29 +0800 Subject: [PATCH] docs: adjust docs structure, create docs template (#5670) * docs: remove old docs * docs: adjust example dir name * feat: add script to create doc template * docs: create site docs template * docs: adjust api/element structure * docs: adjust graph docs * docs: adjust category naming --- packages/site/.dumirc.ts | 171 ++-- .../site/docs/apis/behavior/default.en.md | 3 + .../site/docs/apis/behavior/default.zh.md | 3 + .../behaviors/ActivateRelationsOptions.en.md | 31 - .../behaviors/ActivateRelationsOptions.zh.md | 31 - .../apis/behaviors/BrushSelectOptions.en.md | 12 - .../apis/behaviors/BrushSelectOptions.zh.md | 12 - .../apis/behaviors/ClickSelectOptions.en.md | 32 - .../apis/behaviors/ClickSelectOptions.zh.md | 32 - .../CollapseExpandComboOptions.en.md | 23 - .../CollapseExpandComboOptions.zh.md | 21 - .../behaviors/CollapseExpandTreeOptions.en.md | 28 - .../behaviors/CollapseExpandTreeOptions.zh.md | 28 - .../apis/behaviors/CreateEdgeOptions.en.md | 57 -- .../apis/behaviors/CreateEdgeOptions.zh.md | 57 -- .../apis/behaviors/DragCanvasOptions.en.md | 48 - .../apis/behaviors/DragCanvasOptions.zh.md | 46 - .../apis/behaviors/DragComboOptions.en.md | 15 - .../apis/behaviors/DragComboOptions.zh.md | 13 - .../docs/apis/behaviors/DragNodeOptions.en.md | 12 - .../docs/apis/behaviors/DragNodeOptions.zh.md | 10 - .../apis/behaviors/HoverActivateOptions.en.md | 28 - .../apis/behaviors/HoverActivateOptions.zh.md | 26 - .../apis/behaviors/LassoSelectOptions.en.md | 14 - .../apis/behaviors/LassoSelectOptions.zh.md | 12 - .../apis/behaviors/OrbitCanvas3DOptions.en.md | 28 - .../apis/behaviors/OrbitCanvas3DOptions.zh.md | 26 - .../site/docs/apis/behaviors/Overview.en.md | 36 - .../site/docs/apis/behaviors/Overview.zh.md | 36 - .../apis/behaviors/ScrollCanvasOptions.en.md | 37 - .../apis/behaviors/ScrollCanvasOptions.zh.md | 37 - .../apis/behaviors/ShortcutsCallOptions.en.md | 38 - .../apis/behaviors/ShortcutsCallOptions.zh.md | 38 - .../apis/behaviors/TrackCanvas3DOptions.en.md | 26 - .../apis/behaviors/TrackCanvas3DOptions.zh.md | 24 - .../apis/behaviors/ZoomCanvas3DOptions.en.md | 14 - .../apis/behaviors/ZoomCanvas3DOptions.zh.md | 12 - .../apis/behaviors/ZoomCanvasOptions.en.md | 18 - .../apis/behaviors/ZoomCanvasOptions.zh.md | 16 - .../docs/apis/data/ComboDisplayModel.en.md | 44 - .../docs/apis/data/ComboDisplayModel.zh.md | 44 - packages/site/docs/apis/data/ComboModel.en.md | 16 - packages/site/docs/apis/data/ComboModel.zh.md | 16 - .../site/docs/apis/data/ComboUserModel.en.md | 22 - .../site/docs/apis/data/ComboUserModel.zh.md | 22 - .../site/docs/apis/data/CustomTransform.en.md | 123 --- .../site/docs/apis/data/CustomTransform.zh.md | 123 --- packages/site/docs/apis/data/DataIntro.en.md | 101 -- packages/site/docs/apis/data/DataIntro.zh.md | 101 -- .../docs/apis/data/EdgeDisplayModel.en.md | 52 -- .../docs/apis/data/EdgeDisplayModel.zh.md | 54 -- packages/site/docs/apis/data/EdgeModel.en.md | 28 - packages/site/docs/apis/data/EdgeModel.zh.md | 28 - .../site/docs/apis/data/EdgeUserModel.en.md | 39 - .../site/docs/apis/data/EdgeUserModel.zh.md | 39 - packages/site/docs/apis/data/GraphData.en.md | 45 - packages/site/docs/apis/data/GraphData.zh.md | 45 - .../docs/apis/data/NodeDisplayModel.en.md | 46 - .../docs/apis/data/NodeDisplayModel.zh.md | 46 - packages/site/docs/apis/data/NodeModel.en.md | 16 - packages/site/docs/apis/data/NodeModel.zh.md | 16 - .../site/docs/apis/data/NodeUserModel.en.md | 25 - .../site/docs/apis/data/NodeUserModel.zh.md | 25 - packages/site/docs/apis/data/TreeData.en.md | 52 -- packages/site/docs/apis/data/TreeData.zh.md | 52 -- packages/site/docs/apis/data/node.en.md | 3 + packages/site/docs/apis/data/node.zh.md | 3 + .../docs/apis/element/combo/default.en.md | 3 + .../docs/apis/element/combo/default.zh.md | 3 + .../site/docs/apis/element/edge/default.en.md | 3 + .../site/docs/apis/element/edge/default.zh.md | 3 + .../site/docs/apis/element/node/default.en.md | 3 + .../site/docs/apis/element/node/default.zh.md | 3 + packages/site/docs/apis/export/default.en.md | 3 + packages/site/docs/apis/export/default.zh.md | 3 + packages/site/docs/apis/extension/3d.en.md | 3 + packages/site/docs/apis/extension/3d.zh.md | 3 + packages/site/docs/apis/extension/react.en.md | 3 + packages/site/docs/apis/extension/react.zh.md | 3 + .../site/docs/apis/function/function.en.md | 3 + .../site/docs/apis/function/function.zh.md | 3 + packages/site/docs/apis/graph/Graph.en.md | 856 ----------------- packages/site/docs/apis/graph/Graph.zh.md | 860 ------------------ .../docs/apis/graph/GraphProperties.en.md | 30 - .../docs/apis/graph/GraphProperties.zh.md | 30 - .../site/docs/apis/graph/Specification.en.md | 499 ---------- .../site/docs/apis/graph/Specification.zh.md | 503 ---------- packages/site/docs/apis/graph/method.en.md | 4 + packages/site/docs/apis/graph/method.zh.md | 4 + packages/site/docs/apis/graph/option.en.md | 4 + packages/site/docs/apis/graph/option.zh.md | 4 + packages/site/docs/apis/graph/property.en.md | 4 + packages/site/docs/apis/graph/property.zh.md | 4 + .../docs/apis/item/combo/CircleCombo.en.md | 43 - .../docs/apis/item/combo/CircleCombo.zh.md | 45 - .../docs/apis/item/combo/ComboIntro.en.md | 64 -- .../docs/apis/item/combo/ComboIntro.zh.md | 64 -- .../docs/apis/item/combo/CustomCombo.en.md | 44 - .../docs/apis/item/combo/CustomCombo.zh.md | 47 - .../site/docs/apis/item/combo/RectCombo.en.md | 54 -- .../site/docs/apis/item/combo/RectCombo.zh.md | 55 -- .../site/docs/apis/item/edge/CubicEdge.en.md | 63 -- .../site/docs/apis/item/edge/CubicEdge.zh.md | 63 -- .../apis/item/edge/CubicHorizontalEdge.en.md | 65 -- .../apis/item/edge/CubicHorizontalEdge.zh.md | 63 -- .../apis/item/edge/CubicVerticalEdge.en.md | 65 -- .../apis/item/edge/CubicVerticalEdge.zh.md | 63 -- .../site/docs/apis/item/edge/CustomEdge.en.md | 381 -------- .../site/docs/apis/item/edge/CustomEdge.zh.md | 378 -------- .../site/docs/apis/item/edge/EdgeIntro.en.md | 65 -- .../site/docs/apis/item/edge/EdgeIntro.zh.md | 65 -- .../site/docs/apis/item/edge/LineEdge.en.md | 20 - .../site/docs/apis/item/edge/LineEdge.zh.md | 32 - .../site/docs/apis/item/edge/LoopEdge.en.md | 74 -- .../site/docs/apis/item/edge/LoopEdge.zh.md | 74 -- .../docs/apis/item/edge/PolylineEdge.en.md | 76 -- .../docs/apis/item/edge/PolylineEdge.zh.md | 76 -- .../docs/apis/item/edge/QuadraticEdge.en.md | 59 -- .../docs/apis/item/edge/QuadraticEdge.zh.md | 57 -- .../site/docs/apis/item/node/CircleNode.en.md | 43 - .../site/docs/apis/item/node/CircleNode.zh.md | 47 - .../site/docs/apis/item/node/CubeNode.en.md | 68 -- .../site/docs/apis/item/node/CubeNode.zh.md | 68 -- .../site/docs/apis/item/node/CustomNode.en.md | 45 - .../site/docs/apis/item/node/CustomNode.zh.md | 45 - .../docs/apis/item/node/CustomNode3D.en.md | 315 ------- .../docs/apis/item/node/CustomNode3D.zh.md | 289 ------ .../docs/apis/item/node/DiamondNode.en.md | 45 - .../docs/apis/item/node/DiamondNode.zh.md | 45 - .../site/docs/apis/item/node/DonutNode.en.md | 75 -- .../site/docs/apis/item/node/DonutNode.zh.md | 75 -- .../docs/apis/item/node/EllipseNode.en.md | 50 - .../docs/apis/item/node/EllipseNode.zh.md | 50 - .../docs/apis/item/node/HexagonNode.en.md | 50 - .../docs/apis/item/node/HexagonNode.zh.md | 50 - .../site/docs/apis/item/node/ImageNode.en.md | 74 -- .../site/docs/apis/item/node/ImageNode.zh.md | 74 -- .../docs/apis/item/node/ModelRectNode.en.md | 144 --- .../docs/apis/item/node/ModelRectNode.zh.md | 144 --- .../site/docs/apis/item/node/NodeIntro.en.md | 79 -- .../site/docs/apis/item/node/NodeIntro.zh.md | 94 -- .../site/docs/apis/item/node/RectNode.en.md | 50 - .../site/docs/apis/item/node/RectNode.zh.md | 50 - .../site/docs/apis/item/node/SphereNode.en.md | 53 -- .../site/docs/apis/item/node/SphereNode.zh.md | 55 -- .../site/docs/apis/item/node/StarNode.en.md | 49 - .../site/docs/apis/item/node/StarNode.zh.md | 49 - .../docs/apis/item/node/TriangleNode.en.md | 50 - .../docs/apis/item/node/TriangleNode.zh.md | 50 - .../apis/layout/CircularLayoutOptions.en.md | 77 -- .../apis/layout/CircularLayoutOptions.zh.md | 77 -- .../layout/ComboCombinedLayoutOptions.en.md | 91 -- .../layout/ComboCombinedLayoutOptions.zh.md | 92 -- .../apis/layout/CompactBoxLayoutOptions.en.md | 151 --- .../apis/layout/CompactBoxLayoutOptions.zh.md | 151 --- .../apis/layout/ConcentricLayoutOptions.en.md | 92 -- .../apis/layout/ConcentricLayoutOptions.zh.md | 92 -- .../apis/layout/D3ForceLayoutOptions.en.md | 174 ---- .../apis/layout/D3ForceLayoutOptions.zh.md | 174 ---- .../docs/apis/layout/DagreLayoutOptions.en.md | 154 ---- .../docs/apis/layout/DagreLayoutOptions.zh.md | 153 ---- .../apis/layout/DendrogramLayoutOptions.en.md | 66 -- .../apis/layout/DendrogramLayoutOptions.zh.md | 66 -- .../layout/ForceAtlas2LayoutOptions.en.md | 142 --- .../layout/ForceAtlas2LayoutOptions.zh.md | 142 --- .../docs/apis/layout/ForceLayoutOptions.en.md | 270 ------ .../docs/apis/layout/ForceLayoutOptions.zh.md | 268 ------ .../layout/FruchtermanLayoutOptions.en.md | 114 --- .../layout/FruchtermanLayoutOptions.zh.md | 114 --- .../docs/apis/layout/GridLayoutOptions.en.md | 84 -- .../docs/apis/layout/GridLayoutOptions.zh.md | 86 -- .../apis/layout/IndentedLayoutOptions.en.md | 100 -- .../apis/layout/IndentedLayoutOptions.zh.md | 100 -- .../docs/apis/layout/LayoutOverview.en.md | 199 ---- .../docs/apis/layout/LayoutOverview.zh.md | 198 ---- .../docs/apis/layout/MDSLayoutOptions.en.md | 26 - .../docs/apis/layout/MDSLayoutOptions.zh.md | 27 - .../apis/layout/MindmapLayoutOptions.en.md | 110 --- .../apis/layout/MindmapLayoutOptions.zh.md | 110 --- .../apis/layout/RadialLayoutOptions.en.md | 131 --- .../apis/layout/RadialLayoutOptions.zh.md | 131 --- packages/site/docs/apis/layout/default.en.md | 3 + packages/site/docs/apis/layout/default.zh.md | 3 + packages/site/docs/apis/plugin/default.en.md | 3 + packages/site/docs/apis/plugin/default.zh.md | 3 + .../site/docs/apis/plugins/EdgeBundling.en.md | 122 --- .../site/docs/apis/plugins/EdgeBundling.zh.md | 122 --- .../docs/apis/plugins/EdgeFilterLens.en.md | 53 -- .../docs/apis/plugins/EdgeFilterLens.zh.md | 53 -- .../docs/apis/plugins/FisheyeConfig.en.md | 77 -- .../docs/apis/plugins/FisheyeConfig.zh.md | 77 -- .../site/docs/apis/plugins/GridConfig.en.md | 38 - .../site/docs/apis/plugins/GridConfig.zh.md | 38 - packages/site/docs/apis/plugins/Hull.en.md | 179 ---- packages/site/docs/apis/plugins/Hull.zh.md | 177 ---- .../site/docs/apis/plugins/LegendConfig.en.md | 101 -- .../site/docs/apis/plugins/LegendConfig.zh.md | 101 -- .../docs/apis/plugins/LodController.en.md | 50 - .../docs/apis/plugins/LodController.zh.md | 50 - .../site/docs/apis/plugins/MenuConfig.en.md | 71 -- .../site/docs/apis/plugins/MenuConfig.zh.md | 71 -- .../docs/apis/plugins/MiniMapConfig.en.md | 80 -- .../docs/apis/plugins/MiniMapConfig.zh.md | 78 -- .../site/docs/apis/plugins/Overview.en.md | 34 - .../site/docs/apis/plugins/Overview.zh.md | 34 - .../site/docs/apis/plugins/Snapline.en.md | 40 - .../site/docs/apis/plugins/Snapline.zh.md | 42 - packages/site/docs/apis/plugins/TimeBar.en.md | 341 ------- packages/site/docs/apis/plugins/TimeBar.zh.md | 339 ------- .../docs/apis/plugins/ToolbarConfig.en.md | 29 - .../docs/apis/plugins/ToolbarConfig.zh.md | 59 -- .../docs/apis/plugins/TooltipConfig.en.md | 85 -- .../docs/apis/plugins/TooltipConfig.zh.md | 85 -- .../site/docs/apis/plugins/WaterMarker.en.md | 91 -- .../site/docs/apis/plugins/WaterMarker.zh.md | 91 -- .../docs/apis/shape/CircleStyleProps.en.md | 30 - .../docs/apis/shape/CircleStyleProps.zh.md | 30 - .../docs/apis/shape/CubeGeometryProps.en.md | 42 - .../docs/apis/shape/CubeGeometryProps.zh.md | 40 - .../docs/apis/shape/EllipseStyleProps.en.md | 38 - .../docs/apis/shape/EllipseStyleProps.zh.md | 38 - .../docs/apis/shape/ImageStyleProps.en.md | 24 - .../docs/apis/shape/ImageStyleProps.zh.md | 24 - .../site/docs/apis/shape/LineStyleProps.en.md | 70 -- .../site/docs/apis/shape/LineStyleProps.zh.md | 70 -- packages/site/docs/apis/shape/Overview.en.md | 25 - packages/site/docs/apis/shape/Overview.zh.md | 25 - .../site/docs/apis/shape/PathStyleProps.en.md | 16 - .../site/docs/apis/shape/PathStyleProps.zh.md | 16 - .../docs/apis/shape/PlaneGeometryProps.en.md | 98 -- .../docs/apis/shape/PlaneGeometryProps.zh.md | 98 -- .../docs/apis/shape/PolygonStyleProps.en.md | 24 - .../docs/apis/shape/PolygonStyleProps.zh.md | 24 - .../docs/apis/shape/PolylineStyleProps.en.md | 8 - .../docs/apis/shape/PolylineStyleProps.zh.md | 8 - .../site/docs/apis/shape/RectStyleProps.en.md | 16 - .../site/docs/apis/shape/RectStyleProps.zh.md | 16 - .../docs/apis/shape/SphereGeometryProps.en.md | 32 - .../docs/apis/shape/SphereGeometryProps.zh.md | 30 - .../site/docs/apis/shape/TextStyleProps.en.md | 182 ---- .../site/docs/apis/shape/TextStyleProps.zh.md | 182 ---- .../docs/apis/shape/TorusGeometryProps.en.md | 40 - .../docs/apis/shape/TorusGeometryProps.zh.md | 38 - packages/site/docs/common/ArrowStyle.en.md | 31 - packages/site/docs/common/ArrowStyle.zh.md | 40 - .../docs/common/BaseNodeOverrideMethod.en.md | 260 ------ .../docs/common/BaseNodeOverrideMethod.zh.md | 258 ------ .../site/docs/common/BaseStyleProps.en.md | 220 ----- .../site/docs/common/BaseStyleProps.zh.md | 222 ----- .../docs/common/BaseZoomCanvasOptions.en.md | 45 - .../docs/common/BaseZoomCanvasOptions.zh.md | 45 - .../docs/common/BehaviorBrushSelect.en.md | 82 -- .../docs/common/BehaviorBrushSelect.zh.md | 82 -- .../site/docs/common/BehaviorDirection.en.md | 7 - .../site/docs/common/BehaviorDirection.zh.md | 7 - packages/site/docs/common/BehaviorDrag.en.md | 78 -- packages/site/docs/common/BehaviorDrag.zh.md | 78 -- .../docs/common/BehaviorEnableOptimize.en.md | 7 - .../docs/common/BehaviorEnableOptimize.zh.md | 7 - .../site/docs/common/BehaviorEventName.en.md | 7 - .../site/docs/common/BehaviorEventName.zh.md | 7 - .../site/docs/common/BehaviorItemTypes.en.md | 7 - .../site/docs/common/BehaviorItemTypes.zh.md | 7 - .../site/docs/common/BehaviorMultiple.en.md | 7 - .../site/docs/common/BehaviorMultiple.zh.md | 7 - .../docs/common/BehaviorScalableRange.en.md | 13 - .../docs/common/BehaviorScalableRange.zh.md | 13 - .../docs/common/BehaviorSecondaryKey.en.md | 7 - .../docs/common/BehaviorSecondaryKey.zh.md | 7 - .../site/docs/common/BehaviorShould.en.md | 13 - .../site/docs/common/BehaviorShould.zh.md | 11 - .../docs/common/BehaviorShouldBegin.en.md | 11 - .../docs/common/BehaviorShouldBegin.zh.md | 9 - .../site/docs/common/BehaviorSpeedUpKey.en.md | 7 - .../site/docs/common/BehaviorSpeedUpKey.zh.md | 7 - .../site/docs/common/ComboShapeStyles.en.md | 233 ----- .../site/docs/common/ComboShapeStyles.zh.md | 229 ----- .../site/docs/common/ComboUserModel.en.md | 31 - .../site/docs/common/ComboUserModel.zh.md | 31 - .../site/docs/common/DataAnchorShapes.en.md | 24 - .../site/docs/common/DataAnchorShapes.zh.md | 24 - packages/site/docs/common/DataAnimates.en.md | 7 - packages/site/docs/common/DataAnimates.zh.md | 7 - packages/site/docs/common/DataAttrTips.en.md | 3 - packages/site/docs/common/DataAttrTips.zh.md | 3 - packages/site/docs/common/DataBadge.en.md | 17 - packages/site/docs/common/DataBadge.zh.md | 17 - .../site/docs/common/DataBadgePosition.en.md | 15 - .../site/docs/common/DataBadgePosition.zh.md | 15 - .../site/docs/common/DataBadgeShapes.en.md | 34 - .../site/docs/common/DataBadgeShapes.zh.md | 34 - packages/site/docs/common/DataBadges.en.md | 9 - packages/site/docs/common/DataBadges.zh.md | 9 - packages/site/docs/common/DataHaloShape.en.md | 9 - packages/site/docs/common/DataHaloShape.zh.md | 9 - packages/site/docs/common/DataID.en.md | 5 - packages/site/docs/common/DataID.zh.md | 5 - packages/site/docs/common/DataIcon.en.md | 22 - packages/site/docs/common/DataIcon.zh.md | 22 - packages/site/docs/common/DataIconShape.en.md | 28 - packages/site/docs/common/DataIconShape.zh.md | 28 - .../site/docs/common/DataInnerModelTips.en.md | 3 - .../site/docs/common/DataInnerModelTips.zh.md | 3 - .../common/DataLabelBackgroundShape.en.md | 21 - .../common/DataLabelBackgroundShape.zh.md | 21 - .../site/docs/common/DataLabelShape.en.md | 52 -- .../site/docs/common/DataLabelShape.zh.md | 52 -- .../site/docs/common/DataOtherShapes.en.md | 21 - .../site/docs/common/DataOtherShapes.zh.md | 21 - .../site/docs/common/EdgeShapeStyles.en.md | 158 ---- .../site/docs/common/EdgeShapeStyles.zh.md | 164 ---- packages/site/docs/common/EdgeUserModel.en.md | 37 - packages/site/docs/common/EdgeUserModel.zh.md | 37 - packages/site/docs/common/IAnimates.en.md | 42 - packages/site/docs/common/IAnimates.zh.md | 42 - packages/site/docs/common/IG6GraphEvent.en.md | 26 - packages/site/docs/common/IG6GraphEvent.zh.md | 26 - .../site/docs/common/IPluginBaseConfig.en.md | 25 - .../site/docs/common/IPluginBaseConfig.zh.md | 25 - .../site/docs/common/LayoutNodeSize.en.md | 7 - .../site/docs/common/LayoutNodeSize.zh.md | 7 - .../docs/common/LayoutPreventOverlap.en.md | 7 - .../docs/common/LayoutPreventOverlap.zh.md | 7 - .../docs/common/LayoutSizeOrSpacing.en.md | 1 - .../docs/common/LayoutSizeOrSpacing.zh.md | 1 - .../docs/common/LayoutWorkerEnabled.en.md | 11 - .../docs/common/LayoutWorkerEnabled.zh.md | 11 - packages/site/docs/common/LodLevels.en.md | 27 - packages/site/docs/common/LodLevels.zh.md | 27 - packages/site/docs/common/Marker.en.md | 39 - packages/site/docs/common/Marker.zh.md | 39 - .../site/docs/common/NodeShapeStyles.en.md | 249 ----- .../site/docs/common/NodeShapeStyles.zh.md | 256 ------ packages/site/docs/common/NodeUserModel.en.md | 69 -- packages/site/docs/common/NodeUserModel.zh.md | 69 -- .../site/docs/common/PluginAPIDestroy.en.md | 5 - .../site/docs/common/PluginAPIDestroy.zh.md | 5 - .../site/docs/common/PluginGetContent.en.md | 9 - .../site/docs/common/PluginGetContent.zh.md | 9 - .../site/docs/common/PluginLensBase.en.md | 69 -- .../site/docs/common/PluginLensBase.zh.md | 57 -- .../docs/common/PluginLoadingContent.en.md | 7 - .../docs/common/PluginLoadingContent.zh.md | 7 - .../site/docs/common/PluginMergedStyles.en.md | 30 - .../site/docs/common/PluginMergedStyles.zh.md | 30 - .../site/docs/common/PluginShouldBegin.en.md | 9 - .../site/docs/common/PluginShouldBegin.zh.md | 9 - packages/site/docs/common/PluginSize.en.md | 15 - packages/site/docs/common/PluginSize.zh.md | 15 - .../site/docs/common/PluginUpsertShape.en.md | 30 - .../site/docs/common/PluginUpsertShape.zh.md | 33 - packages/site/docs/common/Position.en.md | 15 - packages/site/docs/common/Position.zh.md | 15 - .../site/docs/common/ShapeStyleProps.en.md | 3 - .../site/docs/common/ShapeStyleProps.zh.md | 3 - packages/site/docs/common/Size.en.md | 15 - packages/site/docs/common/Size.zh.md | 15 - packages/site/docs/common/Throttle.en.md | 7 - packages/site/docs/common/Throttle.zh.md | 8 - .../docs/manual/advanced/comboTheory.en.md | 6 - .../docs/manual/advanced/comboTheory.zh.md | 6 - .../manual/advanced/coordinate-system.en.md | 6 - .../manual/advanced/coordinate-system.zh.md | 6 - .../manual/advanced/custom-animation.en.md | 4 + .../manual/advanced/custom-animation.zh.md | 4 + .../manual/advanced/custom-behavior.en.md | 4 + .../manual/advanced/custom-behavior.zh.md | 4 + .../docs/manual/advanced/custom-element.en.md | 4 + .../docs/manual/advanced/custom-element.zh.md | 4 + .../docs/manual/advanced/custom-layout.en.md | 4 + .../docs/manual/advanced/custom-layout.zh.md | 4 + .../docs/manual/advanced/custom-palette.en.md | 4 + .../docs/manual/advanced/custom-palette.zh.md | 4 + .../docs/manual/advanced/custom-plugin.en.md | 4 + .../docs/manual/advanced/custom-plugin.zh.md | 4 + .../docs/manual/advanced/custom-theme.en.md | 4 + .../docs/manual/advanced/custom-theme.zh.md | 4 + .../manual/advanced/custom-transform.en.md | 4 + .../manual/advanced/custom-transform.zh.md | 4 + .../site/docs/manual/advanced/event.en.md | 4 + .../site/docs/manual/advanced/event.zh.md | 4 + .../site/docs/manual/advanced/iconfont.en.md | 10 - .../site/docs/manual/advanced/iconfont.zh.md | 32 - .../advanced/mode-and-custom-behavior.en.md | 6 - .../advanced/mode-and-custom-behavior.zh.md | 6 - .../docs/manual/advanced/remote-data.en.md | 37 - .../docs/manual/advanced/remote-data.zh.md | 37 - .../site/docs/manual/cases/edgeBundling.en.md | 331 ------- .../site/docs/manual/cases/edgeBundling.zh.md | 329 ------- .../site/docs/manual/cases/relations.en.md | 105 --- .../site/docs/manual/cases/relations.zh.md | 105 --- .../site/docs/manual/cases/sequenceTime.en.md | 88 -- .../site/docs/manual/cases/sequenceTime.zh.md | 88 -- .../docs/manual/core-concept/animation.en.md | 4 + .../docs/manual/core-concept/animation.zh.md | 4 + .../docs/manual/core-concept/behavior.en.md | 4 + .../docs/manual/core-concept/behavior.zh.md | 4 + .../site/docs/manual/core-concept/data.en.md | 4 + .../site/docs/manual/core-concept/data.zh.md | 4 + .../docs/manual/core-concept/element.en.md | 4 + .../docs/manual/core-concept/element.zh.md | 4 + .../site/docs/manual/core-concept/graph.en.md | 4 + .../site/docs/manual/core-concept/graph.zh.md | 4 + .../docs/manual/core-concept/layout.en.md | 4 + .../docs/manual/core-concept/layout.zh.md | 4 + .../docs/manual/core-concept/palette.en.md | 4 + .../docs/manual/core-concept/palette.zh.md | 4 + .../docs/manual/core-concept/plugin.en.md | 4 + .../docs/manual/core-concept/plugin.zh.md | 4 + .../manual/customize/behaviorExtension.en.md | 61 -- .../manual/customize/behaviorExtension.zh.md | 61 -- .../manual/customize/layoutExtension.en.md | 6 - .../manual/customize/layoutExtension.zh.md | 6 - .../site/docs/manual/customize/overview.en.md | 154 ---- .../site/docs/manual/customize/overview.zh.md | 151 --- .../manual/customize/pluginExtension.en.md | 128 --- .../manual/customize/pluginExtension.zh.md | 128 --- .../manual/customize/themeExtension.en.md | 138 --- .../manual/customize/themeExtension.zh.md | 138 --- .../manual/customize/transformExtension.en.md | 84 -- .../manual/customize/transformExtension.zh.md | 84 -- packages/site/docs/manual/faq.en.md | 4 + packages/site/docs/manual/faq.zh.md | 6 + packages/site/docs/manual/feature.en.md | 4 + packages/site/docs/manual/feature.zh.md | 4 + packages/site/docs/manual/glossary.en.md | 4 + packages/site/docs/manual/glossary.zh.md | 4 + packages/site/docs/manual/introduction.en.md | 81 -- packages/site/docs/manual/introduction.zh.md | 81 -- packages/site/docs/manual/quick-start.en.md | 4 + packages/site/docs/manual/quick-start.zh.md | 4 + .../site/docs/manual/tutorial/animation.en.md | 77 -- .../site/docs/manual/tutorial/animation.zh.md | 77 -- .../site/docs/manual/tutorial/behavior.en.md | 336 ------- .../site/docs/manual/tutorial/behavior.zh.md | 341 ------- .../site/docs/manual/tutorial/elements.en.md | 528 ----------- .../site/docs/manual/tutorial/elements.zh.md | 532 ----------- .../site/docs/manual/tutorial/epilog.en.md | 24 - .../site/docs/manual/tutorial/epilog.zh.md | 24 - .../site/docs/manual/tutorial/layout.en.md | 248 ----- .../site/docs/manual/tutorial/layout.zh.md | 252 ----- .../site/docs/manual/tutorial/plugins.en.md | 104 --- .../site/docs/manual/tutorial/plugins.zh.md | 110 --- .../site/docs/manual/tutorial/preface.en.md | 64 -- .../site/docs/manual/tutorial/preface.zh.md | 62 -- .../docs/manual/tutorial/quick-start.en.md | 149 --- .../docs/manual/tutorial/quick-start.zh.md | 153 ---- packages/site/docs/manual/upgrade.en.md | 4 + packages/site/docs/manual/upgrade.zh.md | 4 + packages/site/docs/manual/v5/features.en.md | 591 ------------ packages/site/docs/manual/v5/features.zh.md | 626 ------------- packages/site/docs/manual/v5/publish.en.md | 98 -- packages/site/docs/manual/v5/publish.zh.md | 98 -- packages/site/docs/manual/v5/upgrade.en.md | 743 --------------- packages/site/docs/manual/v5/upgrade.zh.md | 790 ---------------- .../changePosition/demo/animateOrder.js | 0 .../demo/circleComboAnimates.js | 0 .../changePosition/demo/itemAnimates.js | 0 .../changePosition/demo/loopAnimates.js | 0 .../changePosition/demo/meta.json | 0 .../changePosition/demo/rectComboAnimates.js | 0 .../changePosition/demo/treeAnimates.js | 0 .../changePosition/demo/viewAnimates.js | 0 .../changePosition/index.en.md | 0 .../changePosition/index.zh.md | 0 .../{interaction => behavior}/combo/API.en.md | 0 .../{interaction => behavior}/combo/API.zh.md | 0 .../combo/demo/cCircle.js | 0 .../combo/demo/cRect.js | 0 .../combo/demo/circle.js | 0 .../combo/demo/meta.json | 0 .../combo/demo/rect.js | 0 .../combo/index.en.md | 0 .../combo/index.zh.md | 0 .../createEdge/API.en.md | 0 .../createEdge/API.zh.md | 0 .../createEdge/demo/createCustomEdge.ts | 0 .../createEdge/demo/createEdgeByClicking.ts | 0 .../createEdge/demo/createEdgeByDragging.ts | 0 .../createEdge/demo/createEdgeCombo.ts | 0 .../createEdge/demo/meta.json | 0 .../createEdge/index.en.md | 0 .../createEdge/index.zh.md | 0 .../customBehavior/API.en.md | 0 .../customBehavior/API.zh.md | 0 .../demo/dragCanvasTwoFingers.js | 0 .../customBehavior/demo/meta.json | 0 .../customBehavior/index.en.md | 0 .../customBehavior/index.zh.md | 0 .../{interaction => behavior}/focus/API.en.md | 0 .../{interaction => behavior}/focus/API.zh.md | 0 .../focus/demo/clickFocus.ts | 0 .../focus/demo/clickFocusAnimate.ts | 0 .../focus/demo/meta.json | 0 .../focus/index.en.md | 0 .../focus/index.zh.md | 0 .../hoverElement/API.en.md | 0 .../hoverElement/API.zh.md | 0 .../hoverElement/demo/activateRelations.ts | 0 .../hoverElement/demo/activateRelations2.ts | 0 .../hoverElement/demo/basic.ts | 0 .../hoverElement/demo/meta.json | 0 .../hoverElement/index.en.md | 0 .../hoverElement/index.zh.md | 0 .../{interaction => behavior}/label/API.en.md | 0 .../{interaction => behavior}/label/API.zh.md | 0 .../label/demo/changeImg.js | 0 .../label/demo/meta.json | 0 .../label/demo/update.js | 0 .../label/index.en.md | 0 .../label/index.zh.md | 0 .../moveCanvas/API.en.md | 0 .../moveCanvas/API.zh.md | 0 .../moveCanvas/demo/dragCanvas.js | 0 .../moveCanvas/demo/meta.json | 0 .../moveCanvas/demo/scrollBoth.js | 0 .../moveCanvas/demo/scrollY.js | 0 .../moveCanvas/index.en.md | 0 .../moveCanvas/index.zh.md | 0 .../partialResponse/API.en.md | 0 .../partialResponse/API.zh.md | 0 .../partialResponse/demo/meta.json | 0 .../partialResponse/demo/partialNode.js | 0 .../partialResponse/index.en.md | 0 .../partialResponse/index.zh.md | 0 .../select/API.en.md | 0 .../select/API.zh.md | 0 .../select/demo/brush-combo.ts | 0 .../select/demo/brush.ts | 0 .../select/demo/click.ts | 0 .../select/demo/lasso.ts | 0 .../select/demo/meta.json | 0 .../select/index.en.md | 0 .../select/index.zh.md | 0 .../setMode/API.en.md | 0 .../setMode/API.zh.md | 0 .../setMode/demo/meta.json | 0 .../setMode/demo/setMode.js | 0 .../setMode/index.en.md | 0 .../setMode/index.zh.md | 0 .../shortcutsCall/API.en.md | 0 .../shortcutsCall/API.zh.md | 0 .../shortcutsCall/demo/meta.json | 0 .../shortcutsCall/demo/shortcuts-fitView.js | 0 .../shortcutsCall/index.en.md | 0 .../shortcutsCall/index.zh.md | 0 .../treeBehavior/API.en.md | 0 .../treeBehavior/API.zh.md | 0 .../treeBehavior/demo/changeData.js | 0 .../treeBehavior/demo/meta.json | 0 .../treeBehavior/index.en.md | 0 .../treeBehavior/index.zh.md | 0 .../zoomAndAutoLod/API.en.md | 0 .../zoomAndAutoLod/API.zh.md | 0 .../zoomAndAutoLod/demo/autoLod.js | 0 .../zoomAndAutoLod/demo/meta.json | 0 .../zoomAndAutoLod/index.en.md | 0 .../zoomAndAutoLod/index.zh.md | 0 .../zoomCanvasFixItem/demo/fixItem.js | 0 .../zoomCanvasFixItem/demo/meta.json | 0 .../zoomCanvasFixItem/index.en.md | 0 .../zoomCanvasFixItem/index.zh.md | 0 .../{item => element}/arrows/API.en.md | 0 .../{item => element}/arrows/API.zh.md | 0 .../arrows/demo/built-in-arrows.ts | 0 .../arrows/demo/custom-arrows.ts | 0 .../{item => element}/arrows/demo/meta.json | 0 .../{item => element}/arrows/index.en.md | 0 .../{item => element}/arrows/index.zh.md | 0 .../{item => element}/customCombo/API.en.md | 0 .../{item => element}/customCombo/API.zh.md | 0 .../customCombo/demo/cCircle.js | 0 .../customCombo/demo/cRect.js | 0 .../customCombo/demo/meta.json | 0 .../{item => element}/customCombo/index.en.md | 0 .../{item => element}/customCombo/index.zh.md | 0 .../{item => element}/customEdge/API.en.md | 0 .../{item => element}/customEdge/API.zh.md | 0 .../customEdge/demo/customPolyline.js | 0 .../customEdge/demo/edgeMulLabel.js | 0 .../customEdge/demo/extraShape.js | 0 .../customEdge/demo/meta.json | 0 .../{item => element}/customEdge/index.en.md | 0 .../{item => element}/customEdge/index.zh.md | 0 .../{item => element}/customNode/API.en.md | 0 .../{item => element}/customNode/API.zh.md | 0 .../{item => element}/customNode/demo/card.js | 0 .../customNode/demo/cardNode.js | 0 .../customNode/demo/g2ActiveChart.js | 0 .../customNode/demo/g2BarChart.js | 0 .../customNode/demo/g2LatticeChart.js | 0 .../customNode/demo/jsx-g-node.js | 0 .../customNode/demo/meta.json | 0 .../customNode/demo/pieChart.js | 0 .../customNode/demo/react-node.js | 0 .../{item => element}/customNode/index.en.md | 0 .../{item => element}/customNode/index.zh.md | 0 .../{item => element}/defaultCombos/API.en.md | 0 .../{item => element}/defaultCombos/API.zh.md | 0 .../defaultCombos/demo/circle.ts | 0 .../defaultCombos/demo/meta.json | 0 .../defaultCombos/demo/rect.ts | 0 .../defaultCombos/index.en.md | 0 .../defaultCombos/index.zh.md | 0 .../{item => element}/defaultEdges/API.en.md | 0 .../{item => element}/defaultEdges/API.zh.md | 0 .../defaultEdges/demo/cubic.ts | 0 .../defaultEdges/demo/horizontalCubic.ts | 0 .../defaultEdges/demo/line.ts | 0 .../defaultEdges/demo/loopCurve.ts | 0 .../defaultEdges/demo/loopPolyline.ts | 0 .../defaultEdges/demo/meta.json | 0 .../defaultEdges/demo/polyline.ts | 0 .../defaultEdges/demo/polylineOrth.ts | 0 .../defaultEdges/demo/polylineOrthHasCPs.ts | 0 .../defaultEdges/demo/quadratic.ts | 0 .../defaultEdges/demo/verticalCubic.ts | 0 .../defaultEdges/index.en.md | 0 .../defaultEdges/index.zh.md | 0 .../{item => element}/defaultNodes/API.en.md | 0 .../{item => element}/defaultNodes/API.zh.md | 0 .../defaultNodes/demo/3d-node.js | 0 .../defaultNodes/demo/circle.ts | 0 .../defaultNodes/demo/diamond.ts | 0 .../defaultNodes/demo/donut.ts | 0 .../defaultNodes/demo/ellipse.ts | 0 .../defaultNodes/demo/hexagon.ts | 0 .../defaultNodes/demo/image.ts | 0 .../defaultNodes/demo/meta.json | 0 .../defaultNodes/demo/modelRect.js | 0 .../defaultNodes/demo/radiusRect.ts | 0 .../defaultNodes/demo/rect.ts | 0 .../defaultNodes/demo/star.ts | 0 .../defaultNodes/demo/triangle.ts | 0 .../defaultNodes/index.en.md | 0 .../defaultNodes/index.zh.md | 0 .../{item => element}/label/demo/copyLabel.ts | 0 .../{item => element}/label/demo/labelLen.ts | 0 .../{item => element}/label/demo/labelLen1.ts | 0 .../{item => element}/label/demo/meta.json | 0 .../{item => element}/label/index.en.md | 0 .../{item => element}/label/index.zh.md | 0 .../labelBg/demo/label-background.ts | 0 .../{item => element}/labelBg/demo/meta.json | 0 .../{item => element}/labelBg/index.en.md | 0 .../{item => element}/labelBg/index.zh.md | 0 .../multiEdge/demo/meta.json | 0 .../multiEdge/demo/multiEdges.ts | 0 .../{item => element}/multiEdge/index.en.md | 0 .../{item => element}/multiEdge/index.zh.md | 0 .../{item => element}/ports/demo/meta.json | 0 .../{item => element}/ports/demo/ports.ts | 0 .../{item => element}/ports/index.en.md | 0 .../{item => element}/ports/index.zh.md | 0 .../arcDiagram/demo/basicArcDiagram.js | 0 .../arcDiagram/demo/circularArcDiagram.js | 0 .../{net => layout}/arcDiagram/demo/meta.json | 0 .../{net => layout}/arcDiagram/index.en.md | 0 .../{net => layout}/arcDiagram/index.zh.md | 0 .../{net => layout}/circular/API.en.md | 0 .../{net => layout}/circular/API.zh.md | 0 .../{net => layout}/circular/demo/basic.ts | 0 .../circular/demo/configurationTranslate.ts | 0 .../{net => layout}/circular/demo/degree.ts | 0 .../{net => layout}/circular/demo/division.ts | 0 .../{net => layout}/circular/demo/meta.json | 0 .../{net => layout}/circular/demo/spiral.ts | 0 .../{net => layout}/circular/index.en.md | 0 .../{net => layout}/circular/index.zh.md | 0 .../{net => layout}/comboLayout/API.en.md | 0 .../{net => layout}/comboLayout/API.zh.md | 0 .../comboLayout/demo/comboCombined.ts | 0 .../comboLayout/demo/meta.json | 0 .../{net => layout}/comboLayout/index.en.md | 0 .../{net => layout}/comboLayout/index.zh.md | 0 .../{net => layout}/compactBox/API.en.md | 0 .../{net => layout}/compactBox/API.zh.md | 0 .../compactBox/demo/basicCompactBox.ts | 0 .../compactBox/demo/compactBoxLeftAlign.ts | 0 .../{net => layout}/compactBox/demo/meta.json | 0 .../compactBox/demo/topToBottomCompactBox.ts | 0 .../{net => layout}/compactBox/index.en.md | 0 .../{net => layout}/compactBox/index.zh.md | 0 .../concentricLayout/API.en.md | 0 .../concentricLayout/API.zh.md | 0 .../concentricLayout/demo/basicConcentric.ts | 0 .../concentricLayout/demo/meta.json | 0 .../concentricLayout/index.en.md | 0 .../concentricLayout/index.zh.md | 0 .../{net => layout}/dagreFlow/API.en.md | 0 .../{net => layout}/dagreFlow/API.zh.md | 0 .../dagreFlow/demo/antv-dagre-combo.ts | 0 .../dagreFlow/demo/antv-dagre.ts | 0 .../{net => layout}/dagreFlow/demo/dagre.ts | 0 .../{net => layout}/dagreFlow/demo/meta.json | 0 .../{net => layout}/dagreFlow/index.en.md | 0 .../{net => layout}/dagreFlow/index.zh.md | 0 .../{net => layout}/dendrogram/API.en.md | 0 .../{net => layout}/dendrogram/API.zh.md | 0 .../dendrogram/demo/basicDendrogram.ts | 0 .../{net => layout}/dendrogram/demo/meta.json | 0 .../dendrogram/demo/tbDendrogram.ts | 0 .../{net => layout}/dendrogram/index.en.md | 0 .../{net => layout}/dendrogram/index.zh.md | 0 .../{net => layout}/forceDirected/API.en.md | 0 .../{net => layout}/forceDirected/API.zh.md | 0 .../forceDirected/demo/basicFA2.js | 0 .../forceDirected/demo/basicForce.js | 0 .../forceDirectedConfigurationTranslate.js | 0 .../demo/forceDirectedFunctionalParams.js | 0 .../forceDirected/demo/meta.json | 0 .../{net => layout}/forceDirected/index.en.md | 0 .../{net => layout}/forceDirected/index.zh.md | 0 .../fruchtermanLayout/API.en.md | 0 .../fruchtermanLayout/API.zh.md | 0 .../demo/basicFruchterman.ts | 0 .../demo/fruchtermanCluster.ts | 0 .../fruchtermanLayout/demo/fruchtermanFix.ts | 0 .../demo/fruchtermanWebWorker.ts | 0 .../fruchtermanLayout/demo/meta.json | 0 .../fruchtermanLayout/index.en.md | 0 .../fruchtermanLayout/index.zh.md | 0 .../{net => layout}/gpuLayout/API.en.md | 0 .../{net => layout}/gpuLayout/API.zh.md | 0 .../gpuLayout/demo/basicFruchterman.ts | 0 .../gpuLayout/demo/basicGForce.js | 0 .../gpuLayout/demo/fruchtermanComplexData.ts | 0 .../gpuLayout/demo/gForceComplexData.js | 0 .../{net => layout}/gpuLayout/demo/meta.json | 0 .../{net => layout}/gpuLayout/index.en.md | 0 .../{net => layout}/gpuLayout/index.zh.md | 0 .../{net => layout}/gridLayout/API.en.md | 0 .../{net => layout}/gridLayout/API.zh.md | 0 .../{net => layout}/gridLayout/demo/grid.ts | 0 .../{net => layout}/gridLayout/demo/meta.json | 0 .../{net => layout}/gridLayout/index.en.md | 0 .../{net => layout}/gridLayout/index.zh.md | 0 .../{net => layout}/indented/API.en.md | 0 .../{net => layout}/indented/API.zh.md | 0 .../indented/demo/filesystem.js | 0 .../indented/demo/graphWithIntended.js | 0 .../indented/demo/hIntended.js | 0 .../indented/demo/intendAlignTop.js | 0 .../{net => layout}/indented/demo/meta.json | 0 .../{net => layout}/indented/index.en.md | 0 .../{net => layout}/indented/index.zh.md | 0 .../{net => layout}/layoutMechanism/API.en.md | 0 .../{net => layout}/layoutMechanism/API.zh.md | 0 .../layoutMechanism/demo/customBigraph.js | 0 .../layoutMechanism/demo/dataChange.js | 0 .../layoutMechanism/demo/layoutTiming.js | 0 .../layoutMechanism/demo/layoutTranslate.js | 0 .../layoutMechanism/demo/meta.json | 0 .../layoutMechanism/demo/subgraphLayout.js | 0 .../layoutMechanism/demo/sublayoutPipes.js | 0 .../layoutMechanism/index.en.md | 0 .../layoutMechanism/index.zh.md | 0 .../{net => layout}/mdsLayout/API.en.md | 0 .../{net => layout}/mdsLayout/API.zh.md | 0 .../mdsLayout/demo/basicMDS.ts | 0 .../{net => layout}/mdsLayout/demo/meta.json | 0 .../{net => layout}/mdsLayout/index.en.md | 0 .../{net => layout}/mdsLayout/index.zh.md | 0 .../{net => layout}/mindmap/API.en.md | 0 .../{net => layout}/mindmap/API.zh.md | 0 .../mindmap/demo/hCustomSideMindmap.ts | 0 .../mindmap/demo/hLeftMindmap.ts | 0 .../{net => layout}/mindmap/demo/hMindmap.ts | 0 .../mindmap/demo/hRightMindmap.ts | 0 .../{net => layout}/mindmap/demo/meta.json | 0 .../{net => layout}/mindmap/index.en.md | 0 .../{net => layout}/mindmap/index.zh.md | 0 .../{net => layout}/radialLayout/API.en.md | 0 .../{net => layout}/radialLayout/API.zh.md | 0 .../radialLayout/demo/basic.ts | 0 .../demo/configurationTranslate.ts | 0 .../radialLayout/demo/meta.json | 0 .../radialLayout/demo/preventOverlap.ts | 0 .../demo/preventOverlapUnstrict.ts | 0 .../{net => layout}/radialLayout/demo/sort.ts | 0 .../{net => layout}/radialLayout/index.en.md | 0 .../{net => layout}/radialLayout/index.zh.md | 0 .../{net => layout}/radialtree/API.en.md | 0 .../{net => layout}/radialtree/API.zh.md | 0 .../{net => layout}/radialtree/demo/meta.json | 0 .../radialtree/demo/radialTree.js | 0 .../{net => layout}/radialtree/index.en.md | 0 .../{net => layout}/radialtree/index.zh.md | 0 .../{tool => plugin}/contextMenu/API.en.md | 0 .../{tool => plugin}/contextMenu/API.zh.md | 0 .../contextMenu/demo/contextMenu.ts | 0 .../contextMenu/demo/meta.json | 0 .../{tool => plugin}/contextMenu/index.en.md | 0 .../{tool => plugin}/contextMenu/index.zh.md | 0 .../edgeFilterLens/demo/default.ts | 2 +- .../edgeFilterLens/demo/meta.json | 0 .../edgeFilterLens/demo/moreConfig.ts | 2 +- .../edgeFilterLens/index.en.md | 0 .../edgeFilterLens/index.zh.md | 0 .../{tool => plugin}/fisheye/API.en.md | 0 .../{tool => plugin}/fisheye/API.zh.md | 0 .../{tool => plugin}/fisheye/demo/fisheye.ts | 0 .../fisheye/demo/fisheyeStyle.js | 0 .../{tool => plugin}/fisheye/demo/meta.json | 0 .../{tool => plugin}/fisheye/index.en.md | 0 .../{tool => plugin}/fisheye/index.zh.md | 0 .../{tool => plugin}/grid/demo/default.ts | 0 .../{tool => plugin}/grid/demo/meta.json | 0 .../{tool => plugin}/grid/index.en.md | 0 .../{tool => plugin}/grid/index.zh.md | 0 .../{tool => plugin}/history/demo/default.ts | 0 .../{tool => plugin}/history/demo/meta.json | 0 .../{tool => plugin}/history/index.en.md | 0 .../{tool => plugin}/history/index.zh.md | 0 .../examples/{tool => plugin}/hull/API.en.md | 0 .../examples/{tool => plugin}/hull/API.zh.md | 0 .../hull/demo/changeMembers.ts | 0 .../{tool => plugin}/hull/demo/hull.ts | 0 .../{tool => plugin}/hull/demo/meta.json | 0 .../{tool => plugin}/hull/index.en.md | 0 .../{tool => plugin}/hull/index.zh.md | 0 .../{tool => plugin}/legend/API.en.md | 0 .../{tool => plugin}/legend/API.zh.md | 0 .../legend/demo/legend-click.ts | 0 .../{tool => plugin}/legend/demo/legend.ts | 0 .../{tool => plugin}/legend/demo/meta.json | 0 .../{tool => plugin}/legend/demo/style.ts | 0 .../{tool => plugin}/legend/index.en.md | 0 .../{tool => plugin}/legend/index.zh.md | 0 .../{tool => plugin}/minimap/API.en.md | 0 .../{tool => plugin}/minimap/API.zh.md | 0 .../{tool => plugin}/minimap/demo/meta.json | 0 .../minimap/demo/minimap-api.ts | 0 .../{tool => plugin}/minimap/demo/minimap.ts | 0 .../{tool => plugin}/minimap/index.en.md | 0 .../{tool => plugin}/minimap/index.zh.md | 0 .../{tool => plugin}/overview/demo/default.ts | 0 .../{tool => plugin}/overview/demo/meta.json | 0 .../{tool => plugin}/overview/index.en.md | 0 .../{tool => plugin}/overview/index.zh.md | 0 .../{tool => plugin}/snapline/demo/meta.json | 0 .../snapline/demo/snapline.ts | 0 .../{tool => plugin}/snapline/index.en.md | 0 .../{tool => plugin}/snapline/index.zh.md | 0 .../{tool => plugin}/timebar/API.en.md | 0 .../{tool => plugin}/timebar/API.zh.md | 0 .../{tool => plugin}/timebar/demo/meta.json | 0 .../timebar/demo/timebar-chart.ts | 0 .../timebar/demo/timebar-time.ts | 0 .../{tool => plugin}/timebar/index.en.md | 0 .../{tool => plugin}/timebar/index.zh.md | 0 .../{tool => plugin}/toolbar/API.en.md | 0 .../{tool => plugin}/toolbar/API.zh.md | 0 .../toolbar/demo/customized-toolbar.ts | 0 .../{tool => plugin}/toolbar/demo/meta.json | 0 .../{tool => plugin}/toolbar/demo/toolbar.ts | 0 .../{tool => plugin}/toolbar/index.en.md | 0 .../{tool => plugin}/toolbar/index.zh.md | 0 .../{tool => plugin}/tooltip/API.en.md | 0 .../{tool => plugin}/tooltip/API.zh.md | 0 .../{tool => plugin}/tooltip/demo/meta.json | 0 .../tooltip/demo/tooltipClick.ts | 0 .../tooltip/demo/tooltipPlugin.ts | 0 .../{tool => plugin}/tooltip/index.en.md | 0 .../{tool => plugin}/tooltip/index.zh.md | 0 .../watermarker/demo/background.ts | 0 .../watermarker/demo/imgWatermark.ts | 0 .../watermarker/demo/meta.json | 0 .../watermarker/demo/textWatermark.ts | 0 .../{tool => plugin}/watermarker/index.en.md | 0 .../{tool => plugin}/watermarker/index.zh.md | 0 packages/site/package.json | 1 + packages/site/scripts/doc-template.js | 33 + 873 files changed, 374 insertions(+), 30687 deletions(-) create mode 100644 packages/site/docs/apis/behavior/default.en.md create mode 100644 packages/site/docs/apis/behavior/default.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ActivateRelationsOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ActivateRelationsOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/BrushSelectOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/BrushSelectOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ClickSelectOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ClickSelectOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/CollapseExpandComboOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/CollapseExpandComboOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/CreateEdgeOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/CreateEdgeOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/DragCanvasOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/DragCanvasOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/DragComboOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/DragComboOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/DragNodeOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/DragNodeOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/HoverActivateOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/HoverActivateOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/LassoSelectOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/LassoSelectOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/Overview.en.md delete mode 100644 packages/site/docs/apis/behaviors/Overview.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ScrollCanvasOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ScrollCanvasOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ShortcutsCallOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ShortcutsCallOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/TrackCanvas3DOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/TrackCanvas3DOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.zh.md delete mode 100644 packages/site/docs/apis/behaviors/ZoomCanvasOptions.en.md delete mode 100644 packages/site/docs/apis/behaviors/ZoomCanvasOptions.zh.md delete mode 100644 packages/site/docs/apis/data/ComboDisplayModel.en.md delete mode 100644 packages/site/docs/apis/data/ComboDisplayModel.zh.md delete mode 100644 packages/site/docs/apis/data/ComboModel.en.md delete mode 100644 packages/site/docs/apis/data/ComboModel.zh.md delete mode 100644 packages/site/docs/apis/data/ComboUserModel.en.md delete mode 100644 packages/site/docs/apis/data/ComboUserModel.zh.md delete mode 100644 packages/site/docs/apis/data/CustomTransform.en.md delete mode 100644 packages/site/docs/apis/data/CustomTransform.zh.md delete mode 100644 packages/site/docs/apis/data/DataIntro.en.md delete mode 100644 packages/site/docs/apis/data/DataIntro.zh.md delete mode 100644 packages/site/docs/apis/data/EdgeDisplayModel.en.md delete mode 100644 packages/site/docs/apis/data/EdgeDisplayModel.zh.md delete mode 100644 packages/site/docs/apis/data/EdgeModel.en.md delete mode 100644 packages/site/docs/apis/data/EdgeModel.zh.md delete mode 100644 packages/site/docs/apis/data/EdgeUserModel.en.md delete mode 100644 packages/site/docs/apis/data/EdgeUserModel.zh.md delete mode 100644 packages/site/docs/apis/data/GraphData.en.md delete mode 100644 packages/site/docs/apis/data/GraphData.zh.md delete mode 100644 packages/site/docs/apis/data/NodeDisplayModel.en.md delete mode 100644 packages/site/docs/apis/data/NodeDisplayModel.zh.md delete mode 100644 packages/site/docs/apis/data/NodeModel.en.md delete mode 100644 packages/site/docs/apis/data/NodeModel.zh.md delete mode 100644 packages/site/docs/apis/data/NodeUserModel.en.md delete mode 100644 packages/site/docs/apis/data/NodeUserModel.zh.md delete mode 100644 packages/site/docs/apis/data/TreeData.en.md delete mode 100644 packages/site/docs/apis/data/TreeData.zh.md create mode 100644 packages/site/docs/apis/data/node.en.md create mode 100644 packages/site/docs/apis/data/node.zh.md create mode 100644 packages/site/docs/apis/element/combo/default.en.md create mode 100644 packages/site/docs/apis/element/combo/default.zh.md create mode 100644 packages/site/docs/apis/element/edge/default.en.md create mode 100644 packages/site/docs/apis/element/edge/default.zh.md create mode 100644 packages/site/docs/apis/element/node/default.en.md create mode 100644 packages/site/docs/apis/element/node/default.zh.md create mode 100644 packages/site/docs/apis/export/default.en.md create mode 100644 packages/site/docs/apis/export/default.zh.md create mode 100644 packages/site/docs/apis/extension/3d.en.md create mode 100644 packages/site/docs/apis/extension/3d.zh.md create mode 100644 packages/site/docs/apis/extension/react.en.md create mode 100644 packages/site/docs/apis/extension/react.zh.md create mode 100644 packages/site/docs/apis/function/function.en.md create mode 100644 packages/site/docs/apis/function/function.zh.md delete mode 100644 packages/site/docs/apis/graph/Graph.en.md delete mode 100644 packages/site/docs/apis/graph/Graph.zh.md delete mode 100644 packages/site/docs/apis/graph/GraphProperties.en.md delete mode 100644 packages/site/docs/apis/graph/GraphProperties.zh.md delete mode 100644 packages/site/docs/apis/graph/Specification.en.md delete mode 100644 packages/site/docs/apis/graph/Specification.zh.md create mode 100644 packages/site/docs/apis/graph/method.en.md create mode 100644 packages/site/docs/apis/graph/method.zh.md create mode 100644 packages/site/docs/apis/graph/option.en.md create mode 100644 packages/site/docs/apis/graph/option.zh.md create mode 100644 packages/site/docs/apis/graph/property.en.md create mode 100644 packages/site/docs/apis/graph/property.zh.md delete mode 100644 packages/site/docs/apis/item/combo/CircleCombo.en.md delete mode 100644 packages/site/docs/apis/item/combo/CircleCombo.zh.md delete mode 100644 packages/site/docs/apis/item/combo/ComboIntro.en.md delete mode 100644 packages/site/docs/apis/item/combo/ComboIntro.zh.md delete mode 100644 packages/site/docs/apis/item/combo/CustomCombo.en.md delete mode 100644 packages/site/docs/apis/item/combo/CustomCombo.zh.md delete mode 100644 packages/site/docs/apis/item/combo/RectCombo.en.md delete mode 100644 packages/site/docs/apis/item/combo/RectCombo.zh.md delete mode 100644 packages/site/docs/apis/item/edge/CubicEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/CubicEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/CustomEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/CustomEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/EdgeIntro.en.md delete mode 100644 packages/site/docs/apis/item/edge/EdgeIntro.zh.md delete mode 100644 packages/site/docs/apis/item/edge/LineEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/LineEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/LoopEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/LoopEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/PolylineEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/PolylineEdge.zh.md delete mode 100644 packages/site/docs/apis/item/edge/QuadraticEdge.en.md delete mode 100644 packages/site/docs/apis/item/edge/QuadraticEdge.zh.md delete mode 100644 packages/site/docs/apis/item/node/CircleNode.en.md delete mode 100644 packages/site/docs/apis/item/node/CircleNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/CubeNode.en.md delete mode 100644 packages/site/docs/apis/item/node/CubeNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/CustomNode.en.md delete mode 100644 packages/site/docs/apis/item/node/CustomNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/CustomNode3D.en.md delete mode 100644 packages/site/docs/apis/item/node/CustomNode3D.zh.md delete mode 100644 packages/site/docs/apis/item/node/DiamondNode.en.md delete mode 100644 packages/site/docs/apis/item/node/DiamondNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/DonutNode.en.md delete mode 100644 packages/site/docs/apis/item/node/DonutNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/EllipseNode.en.md delete mode 100644 packages/site/docs/apis/item/node/EllipseNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/HexagonNode.en.md delete mode 100644 packages/site/docs/apis/item/node/HexagonNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/ImageNode.en.md delete mode 100644 packages/site/docs/apis/item/node/ImageNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/ModelRectNode.en.md delete mode 100644 packages/site/docs/apis/item/node/ModelRectNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/NodeIntro.en.md delete mode 100644 packages/site/docs/apis/item/node/NodeIntro.zh.md delete mode 100644 packages/site/docs/apis/item/node/RectNode.en.md delete mode 100644 packages/site/docs/apis/item/node/RectNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/SphereNode.en.md delete mode 100644 packages/site/docs/apis/item/node/SphereNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/StarNode.en.md delete mode 100644 packages/site/docs/apis/item/node/StarNode.zh.md delete mode 100644 packages/site/docs/apis/item/node/TriangleNode.en.md delete mode 100644 packages/site/docs/apis/item/node/TriangleNode.zh.md delete mode 100644 packages/site/docs/apis/layout/CircularLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/CircularLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/DagreLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/DagreLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/ForceLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/ForceLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/GridLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/GridLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/IndentedLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/LayoutOverview.en.md delete mode 100644 packages/site/docs/apis/layout/LayoutOverview.zh.md delete mode 100644 packages/site/docs/apis/layout/MDSLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/MDSLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/MindmapLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md delete mode 100644 packages/site/docs/apis/layout/RadialLayoutOptions.en.md delete mode 100644 packages/site/docs/apis/layout/RadialLayoutOptions.zh.md create mode 100644 packages/site/docs/apis/layout/default.en.md create mode 100644 packages/site/docs/apis/layout/default.zh.md create mode 100644 packages/site/docs/apis/plugin/default.en.md create mode 100644 packages/site/docs/apis/plugin/default.zh.md delete mode 100644 packages/site/docs/apis/plugins/EdgeBundling.en.md delete mode 100644 packages/site/docs/apis/plugins/EdgeBundling.zh.md delete mode 100644 packages/site/docs/apis/plugins/EdgeFilterLens.en.md delete mode 100644 packages/site/docs/apis/plugins/EdgeFilterLens.zh.md delete mode 100644 packages/site/docs/apis/plugins/FisheyeConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/FisheyeConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/GridConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/GridConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/Hull.en.md delete mode 100644 packages/site/docs/apis/plugins/Hull.zh.md delete mode 100644 packages/site/docs/apis/plugins/LegendConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/LegendConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/LodController.en.md delete mode 100644 packages/site/docs/apis/plugins/LodController.zh.md delete mode 100644 packages/site/docs/apis/plugins/MenuConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/MenuConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/MiniMapConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/MiniMapConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/Overview.en.md delete mode 100644 packages/site/docs/apis/plugins/Overview.zh.md delete mode 100644 packages/site/docs/apis/plugins/Snapline.en.md delete mode 100644 packages/site/docs/apis/plugins/Snapline.zh.md delete mode 100644 packages/site/docs/apis/plugins/TimeBar.en.md delete mode 100644 packages/site/docs/apis/plugins/TimeBar.zh.md delete mode 100644 packages/site/docs/apis/plugins/ToolbarConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/ToolbarConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/TooltipConfig.en.md delete mode 100644 packages/site/docs/apis/plugins/TooltipConfig.zh.md delete mode 100644 packages/site/docs/apis/plugins/WaterMarker.en.md delete mode 100644 packages/site/docs/apis/plugins/WaterMarker.zh.md delete mode 100644 packages/site/docs/apis/shape/CircleStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/CircleStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/CubeGeometryProps.en.md delete mode 100644 packages/site/docs/apis/shape/CubeGeometryProps.zh.md delete mode 100644 packages/site/docs/apis/shape/EllipseStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/EllipseStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/ImageStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/ImageStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/LineStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/LineStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/Overview.en.md delete mode 100644 packages/site/docs/apis/shape/Overview.zh.md delete mode 100644 packages/site/docs/apis/shape/PathStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/PathStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/PlaneGeometryProps.en.md delete mode 100644 packages/site/docs/apis/shape/PlaneGeometryProps.zh.md delete mode 100644 packages/site/docs/apis/shape/PolygonStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/PolygonStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/PolylineStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/PolylineStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/RectStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/RectStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/SphereGeometryProps.en.md delete mode 100644 packages/site/docs/apis/shape/SphereGeometryProps.zh.md delete mode 100644 packages/site/docs/apis/shape/TextStyleProps.en.md delete mode 100644 packages/site/docs/apis/shape/TextStyleProps.zh.md delete mode 100644 packages/site/docs/apis/shape/TorusGeometryProps.en.md delete mode 100644 packages/site/docs/apis/shape/TorusGeometryProps.zh.md delete mode 100644 packages/site/docs/common/ArrowStyle.en.md delete mode 100644 packages/site/docs/common/ArrowStyle.zh.md delete mode 100644 packages/site/docs/common/BaseNodeOverrideMethod.en.md delete mode 100644 packages/site/docs/common/BaseNodeOverrideMethod.zh.md delete mode 100644 packages/site/docs/common/BaseStyleProps.en.md delete mode 100644 packages/site/docs/common/BaseStyleProps.zh.md delete mode 100644 packages/site/docs/common/BaseZoomCanvasOptions.en.md delete mode 100644 packages/site/docs/common/BaseZoomCanvasOptions.zh.md delete mode 100644 packages/site/docs/common/BehaviorBrushSelect.en.md delete mode 100644 packages/site/docs/common/BehaviorBrushSelect.zh.md delete mode 100644 packages/site/docs/common/BehaviorDirection.en.md delete mode 100644 packages/site/docs/common/BehaviorDirection.zh.md delete mode 100644 packages/site/docs/common/BehaviorDrag.en.md delete mode 100644 packages/site/docs/common/BehaviorDrag.zh.md delete mode 100644 packages/site/docs/common/BehaviorEnableOptimize.en.md delete mode 100644 packages/site/docs/common/BehaviorEnableOptimize.zh.md delete mode 100644 packages/site/docs/common/BehaviorEventName.en.md delete mode 100644 packages/site/docs/common/BehaviorEventName.zh.md delete mode 100644 packages/site/docs/common/BehaviorItemTypes.en.md delete mode 100644 packages/site/docs/common/BehaviorItemTypes.zh.md delete mode 100644 packages/site/docs/common/BehaviorMultiple.en.md delete mode 100644 packages/site/docs/common/BehaviorMultiple.zh.md delete mode 100644 packages/site/docs/common/BehaviorScalableRange.en.md delete mode 100644 packages/site/docs/common/BehaviorScalableRange.zh.md delete mode 100644 packages/site/docs/common/BehaviorSecondaryKey.en.md delete mode 100644 packages/site/docs/common/BehaviorSecondaryKey.zh.md delete mode 100644 packages/site/docs/common/BehaviorShould.en.md delete mode 100644 packages/site/docs/common/BehaviorShould.zh.md delete mode 100644 packages/site/docs/common/BehaviorShouldBegin.en.md delete mode 100644 packages/site/docs/common/BehaviorShouldBegin.zh.md delete mode 100644 packages/site/docs/common/BehaviorSpeedUpKey.en.md delete mode 100644 packages/site/docs/common/BehaviorSpeedUpKey.zh.md delete mode 100644 packages/site/docs/common/ComboShapeStyles.en.md delete mode 100644 packages/site/docs/common/ComboShapeStyles.zh.md delete mode 100644 packages/site/docs/common/ComboUserModel.en.md delete mode 100644 packages/site/docs/common/ComboUserModel.zh.md delete mode 100644 packages/site/docs/common/DataAnchorShapes.en.md delete mode 100644 packages/site/docs/common/DataAnchorShapes.zh.md delete mode 100644 packages/site/docs/common/DataAnimates.en.md delete mode 100644 packages/site/docs/common/DataAnimates.zh.md delete mode 100644 packages/site/docs/common/DataAttrTips.en.md delete mode 100644 packages/site/docs/common/DataAttrTips.zh.md delete mode 100644 packages/site/docs/common/DataBadge.en.md delete mode 100644 packages/site/docs/common/DataBadge.zh.md delete mode 100644 packages/site/docs/common/DataBadgePosition.en.md delete mode 100644 packages/site/docs/common/DataBadgePosition.zh.md delete mode 100644 packages/site/docs/common/DataBadgeShapes.en.md delete mode 100644 packages/site/docs/common/DataBadgeShapes.zh.md delete mode 100644 packages/site/docs/common/DataBadges.en.md delete mode 100644 packages/site/docs/common/DataBadges.zh.md delete mode 100644 packages/site/docs/common/DataHaloShape.en.md delete mode 100644 packages/site/docs/common/DataHaloShape.zh.md delete mode 100644 packages/site/docs/common/DataID.en.md delete mode 100644 packages/site/docs/common/DataID.zh.md delete mode 100644 packages/site/docs/common/DataIcon.en.md delete mode 100644 packages/site/docs/common/DataIcon.zh.md delete mode 100644 packages/site/docs/common/DataIconShape.en.md delete mode 100644 packages/site/docs/common/DataIconShape.zh.md delete mode 100644 packages/site/docs/common/DataInnerModelTips.en.md delete mode 100644 packages/site/docs/common/DataInnerModelTips.zh.md delete mode 100644 packages/site/docs/common/DataLabelBackgroundShape.en.md delete mode 100644 packages/site/docs/common/DataLabelBackgroundShape.zh.md delete mode 100644 packages/site/docs/common/DataLabelShape.en.md delete mode 100644 packages/site/docs/common/DataLabelShape.zh.md delete mode 100644 packages/site/docs/common/DataOtherShapes.en.md delete mode 100644 packages/site/docs/common/DataOtherShapes.zh.md delete mode 100644 packages/site/docs/common/EdgeShapeStyles.en.md delete mode 100644 packages/site/docs/common/EdgeShapeStyles.zh.md delete mode 100644 packages/site/docs/common/EdgeUserModel.en.md delete mode 100644 packages/site/docs/common/EdgeUserModel.zh.md delete mode 100644 packages/site/docs/common/IAnimates.en.md delete mode 100644 packages/site/docs/common/IAnimates.zh.md delete mode 100644 packages/site/docs/common/IG6GraphEvent.en.md delete mode 100644 packages/site/docs/common/IG6GraphEvent.zh.md delete mode 100644 packages/site/docs/common/IPluginBaseConfig.en.md delete mode 100644 packages/site/docs/common/IPluginBaseConfig.zh.md delete mode 100644 packages/site/docs/common/LayoutNodeSize.en.md delete mode 100644 packages/site/docs/common/LayoutNodeSize.zh.md delete mode 100644 packages/site/docs/common/LayoutPreventOverlap.en.md delete mode 100644 packages/site/docs/common/LayoutPreventOverlap.zh.md delete mode 100644 packages/site/docs/common/LayoutSizeOrSpacing.en.md delete mode 100644 packages/site/docs/common/LayoutSizeOrSpacing.zh.md delete mode 100644 packages/site/docs/common/LayoutWorkerEnabled.en.md delete mode 100644 packages/site/docs/common/LayoutWorkerEnabled.zh.md delete mode 100644 packages/site/docs/common/LodLevels.en.md delete mode 100644 packages/site/docs/common/LodLevels.zh.md delete mode 100644 packages/site/docs/common/Marker.en.md delete mode 100644 packages/site/docs/common/Marker.zh.md delete mode 100644 packages/site/docs/common/NodeShapeStyles.en.md delete mode 100644 packages/site/docs/common/NodeShapeStyles.zh.md delete mode 100644 packages/site/docs/common/NodeUserModel.en.md delete mode 100644 packages/site/docs/common/NodeUserModel.zh.md delete mode 100644 packages/site/docs/common/PluginAPIDestroy.en.md delete mode 100644 packages/site/docs/common/PluginAPIDestroy.zh.md delete mode 100644 packages/site/docs/common/PluginGetContent.en.md delete mode 100644 packages/site/docs/common/PluginGetContent.zh.md delete mode 100644 packages/site/docs/common/PluginLensBase.en.md delete mode 100644 packages/site/docs/common/PluginLensBase.zh.md delete mode 100644 packages/site/docs/common/PluginLoadingContent.en.md delete mode 100644 packages/site/docs/common/PluginLoadingContent.zh.md delete mode 100644 packages/site/docs/common/PluginMergedStyles.en.md delete mode 100644 packages/site/docs/common/PluginMergedStyles.zh.md delete mode 100644 packages/site/docs/common/PluginShouldBegin.en.md delete mode 100644 packages/site/docs/common/PluginShouldBegin.zh.md delete mode 100644 packages/site/docs/common/PluginSize.en.md delete mode 100644 packages/site/docs/common/PluginSize.zh.md delete mode 100644 packages/site/docs/common/PluginUpsertShape.en.md delete mode 100644 packages/site/docs/common/PluginUpsertShape.zh.md delete mode 100644 packages/site/docs/common/Position.en.md delete mode 100644 packages/site/docs/common/Position.zh.md delete mode 100644 packages/site/docs/common/ShapeStyleProps.en.md delete mode 100644 packages/site/docs/common/ShapeStyleProps.zh.md delete mode 100644 packages/site/docs/common/Size.en.md delete mode 100644 packages/site/docs/common/Size.zh.md delete mode 100644 packages/site/docs/common/Throttle.en.md delete mode 100644 packages/site/docs/common/Throttle.zh.md delete mode 100644 packages/site/docs/manual/advanced/comboTheory.en.md delete mode 100644 packages/site/docs/manual/advanced/comboTheory.zh.md delete mode 100644 packages/site/docs/manual/advanced/coordinate-system.en.md delete mode 100644 packages/site/docs/manual/advanced/coordinate-system.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-animation.en.md create mode 100644 packages/site/docs/manual/advanced/custom-animation.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-behavior.en.md create mode 100644 packages/site/docs/manual/advanced/custom-behavior.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-element.en.md create mode 100644 packages/site/docs/manual/advanced/custom-element.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-layout.en.md create mode 100644 packages/site/docs/manual/advanced/custom-layout.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-palette.en.md create mode 100644 packages/site/docs/manual/advanced/custom-palette.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-plugin.en.md create mode 100644 packages/site/docs/manual/advanced/custom-plugin.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-theme.en.md create mode 100644 packages/site/docs/manual/advanced/custom-theme.zh.md create mode 100644 packages/site/docs/manual/advanced/custom-transform.en.md create mode 100644 packages/site/docs/manual/advanced/custom-transform.zh.md create mode 100644 packages/site/docs/manual/advanced/event.en.md create mode 100644 packages/site/docs/manual/advanced/event.zh.md delete mode 100644 packages/site/docs/manual/advanced/iconfont.en.md delete mode 100644 packages/site/docs/manual/advanced/iconfont.zh.md delete mode 100644 packages/site/docs/manual/advanced/mode-and-custom-behavior.en.md delete mode 100644 packages/site/docs/manual/advanced/mode-and-custom-behavior.zh.md delete mode 100644 packages/site/docs/manual/advanced/remote-data.en.md delete mode 100644 packages/site/docs/manual/advanced/remote-data.zh.md delete mode 100644 packages/site/docs/manual/cases/edgeBundling.en.md delete mode 100644 packages/site/docs/manual/cases/edgeBundling.zh.md delete mode 100644 packages/site/docs/manual/cases/relations.en.md delete mode 100644 packages/site/docs/manual/cases/relations.zh.md delete mode 100644 packages/site/docs/manual/cases/sequenceTime.en.md delete mode 100644 packages/site/docs/manual/cases/sequenceTime.zh.md create mode 100644 packages/site/docs/manual/core-concept/animation.en.md create mode 100644 packages/site/docs/manual/core-concept/animation.zh.md create mode 100644 packages/site/docs/manual/core-concept/behavior.en.md create mode 100644 packages/site/docs/manual/core-concept/behavior.zh.md create mode 100644 packages/site/docs/manual/core-concept/data.en.md create mode 100644 packages/site/docs/manual/core-concept/data.zh.md create mode 100644 packages/site/docs/manual/core-concept/element.en.md create mode 100644 packages/site/docs/manual/core-concept/element.zh.md create mode 100644 packages/site/docs/manual/core-concept/graph.en.md create mode 100644 packages/site/docs/manual/core-concept/graph.zh.md create mode 100644 packages/site/docs/manual/core-concept/layout.en.md create mode 100644 packages/site/docs/manual/core-concept/layout.zh.md create mode 100644 packages/site/docs/manual/core-concept/palette.en.md create mode 100644 packages/site/docs/manual/core-concept/palette.zh.md create mode 100644 packages/site/docs/manual/core-concept/plugin.en.md create mode 100644 packages/site/docs/manual/core-concept/plugin.zh.md delete mode 100644 packages/site/docs/manual/customize/behaviorExtension.en.md delete mode 100644 packages/site/docs/manual/customize/behaviorExtension.zh.md delete mode 100644 packages/site/docs/manual/customize/layoutExtension.en.md delete mode 100644 packages/site/docs/manual/customize/layoutExtension.zh.md delete mode 100644 packages/site/docs/manual/customize/overview.en.md delete mode 100644 packages/site/docs/manual/customize/overview.zh.md delete mode 100644 packages/site/docs/manual/customize/pluginExtension.en.md delete mode 100644 packages/site/docs/manual/customize/pluginExtension.zh.md delete mode 100644 packages/site/docs/manual/customize/themeExtension.en.md delete mode 100644 packages/site/docs/manual/customize/themeExtension.zh.md delete mode 100644 packages/site/docs/manual/customize/transformExtension.en.md delete mode 100644 packages/site/docs/manual/customize/transformExtension.zh.md create mode 100644 packages/site/docs/manual/faq.en.md create mode 100644 packages/site/docs/manual/faq.zh.md create mode 100644 packages/site/docs/manual/feature.en.md create mode 100644 packages/site/docs/manual/feature.zh.md create mode 100644 packages/site/docs/manual/glossary.en.md create mode 100644 packages/site/docs/manual/glossary.zh.md create mode 100644 packages/site/docs/manual/quick-start.en.md create mode 100644 packages/site/docs/manual/quick-start.zh.md delete mode 100644 packages/site/docs/manual/tutorial/animation.en.md delete mode 100644 packages/site/docs/manual/tutorial/animation.zh.md delete mode 100644 packages/site/docs/manual/tutorial/behavior.en.md delete mode 100644 packages/site/docs/manual/tutorial/behavior.zh.md delete mode 100644 packages/site/docs/manual/tutorial/elements.en.md delete mode 100644 packages/site/docs/manual/tutorial/elements.zh.md delete mode 100644 packages/site/docs/manual/tutorial/epilog.en.md delete mode 100644 packages/site/docs/manual/tutorial/epilog.zh.md delete mode 100644 packages/site/docs/manual/tutorial/layout.en.md delete mode 100644 packages/site/docs/manual/tutorial/layout.zh.md delete mode 100644 packages/site/docs/manual/tutorial/plugins.en.md delete mode 100644 packages/site/docs/manual/tutorial/plugins.zh.md delete mode 100644 packages/site/docs/manual/tutorial/preface.en.md delete mode 100644 packages/site/docs/manual/tutorial/preface.zh.md delete mode 100644 packages/site/docs/manual/tutorial/quick-start.en.md delete mode 100644 packages/site/docs/manual/tutorial/quick-start.zh.md create mode 100644 packages/site/docs/manual/upgrade.en.md create mode 100644 packages/site/docs/manual/upgrade.zh.md delete mode 100644 packages/site/docs/manual/v5/features.en.md delete mode 100644 packages/site/docs/manual/v5/features.zh.md delete mode 100644 packages/site/docs/manual/v5/publish.en.md delete mode 100644 packages/site/docs/manual/v5/publish.zh.md delete mode 100644 packages/site/docs/manual/v5/upgrade.en.md delete mode 100644 packages/site/docs/manual/v5/upgrade.zh.md rename packages/site/examples/{scatter => animation}/changePosition/demo/animateOrder.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/circleComboAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/itemAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/loopAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/meta.json (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/rectComboAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/treeAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/demo/viewAnimates.js (100%) rename packages/site/examples/{scatter => animation}/changePosition/index.en.md (100%) rename packages/site/examples/{scatter => animation}/changePosition/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/combo/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/combo/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/combo/demo/cCircle.js (100%) rename packages/site/examples/{interaction => behavior}/combo/demo/cRect.js (100%) rename packages/site/examples/{interaction => behavior}/combo/demo/circle.js (100%) rename packages/site/examples/{interaction => behavior}/combo/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/combo/demo/rect.js (100%) rename packages/site/examples/{interaction => behavior}/combo/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/combo/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/createEdge/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/createEdge/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/createEdge/demo/createCustomEdge.ts (100%) rename packages/site/examples/{interaction => behavior}/createEdge/demo/createEdgeByClicking.ts (100%) rename packages/site/examples/{interaction => behavior}/createEdge/demo/createEdgeByDragging.ts (100%) rename packages/site/examples/{interaction => behavior}/createEdge/demo/createEdgeCombo.ts (100%) rename packages/site/examples/{interaction => behavior}/createEdge/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/createEdge/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/createEdge/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/demo/dragCanvasTwoFingers.js (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/customBehavior/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/focus/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/focus/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/focus/demo/clickFocus.ts (100%) rename packages/site/examples/{interaction => behavior}/focus/demo/clickFocusAnimate.ts (100%) rename packages/site/examples/{interaction => behavior}/focus/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/focus/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/focus/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/demo/activateRelations.ts (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/demo/activateRelations2.ts (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/demo/basic.ts (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/hoverElement/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/label/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/label/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/label/demo/changeImg.js (100%) rename packages/site/examples/{interaction => behavior}/label/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/label/demo/update.js (100%) rename packages/site/examples/{interaction => behavior}/label/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/label/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/demo/dragCanvas.js (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/demo/scrollBoth.js (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/demo/scrollY.js (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/moveCanvas/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/demo/partialNode.js (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/partialResponse/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/select/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/select/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/select/demo/brush-combo.ts (100%) rename packages/site/examples/{interaction => behavior}/select/demo/brush.ts (100%) rename packages/site/examples/{interaction => behavior}/select/demo/click.ts (100%) rename packages/site/examples/{interaction => behavior}/select/demo/lasso.ts (100%) rename packages/site/examples/{interaction => behavior}/select/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/select/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/select/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/setMode/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/setMode/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/setMode/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/setMode/demo/setMode.js (100%) rename packages/site/examples/{interaction => behavior}/setMode/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/setMode/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/demo/shortcuts-fitView.js (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/shortcutsCall/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/demo/changeData.js (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/treeBehavior/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/API.en.md (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/API.zh.md (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/demo/autoLod.js (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/zoomAndAutoLod/index.zh.md (100%) rename packages/site/examples/{interaction => behavior}/zoomCanvasFixItem/demo/fixItem.js (100%) rename packages/site/examples/{interaction => behavior}/zoomCanvasFixItem/demo/meta.json (100%) rename packages/site/examples/{interaction => behavior}/zoomCanvasFixItem/index.en.md (100%) rename packages/site/examples/{interaction => behavior}/zoomCanvasFixItem/index.zh.md (100%) rename packages/site/examples/{item => element}/arrows/API.en.md (100%) rename packages/site/examples/{item => element}/arrows/API.zh.md (100%) rename packages/site/examples/{item => element}/arrows/demo/built-in-arrows.ts (100%) rename packages/site/examples/{item => element}/arrows/demo/custom-arrows.ts (100%) rename packages/site/examples/{item => element}/arrows/demo/meta.json (100%) rename packages/site/examples/{item => element}/arrows/index.en.md (100%) rename packages/site/examples/{item => element}/arrows/index.zh.md (100%) rename packages/site/examples/{item => element}/customCombo/API.en.md (100%) rename packages/site/examples/{item => element}/customCombo/API.zh.md (100%) rename packages/site/examples/{item => element}/customCombo/demo/cCircle.js (100%) rename packages/site/examples/{item => element}/customCombo/demo/cRect.js (100%) rename packages/site/examples/{item => element}/customCombo/demo/meta.json (100%) rename packages/site/examples/{item => element}/customCombo/index.en.md (100%) rename packages/site/examples/{item => element}/customCombo/index.zh.md (100%) rename packages/site/examples/{item => element}/customEdge/API.en.md (100%) rename packages/site/examples/{item => element}/customEdge/API.zh.md (100%) rename packages/site/examples/{item => element}/customEdge/demo/customPolyline.js (100%) rename packages/site/examples/{item => element}/customEdge/demo/edgeMulLabel.js (100%) rename packages/site/examples/{item => element}/customEdge/demo/extraShape.js (100%) rename packages/site/examples/{item => element}/customEdge/demo/meta.json (100%) rename packages/site/examples/{item => element}/customEdge/index.en.md (100%) rename packages/site/examples/{item => element}/customEdge/index.zh.md (100%) rename packages/site/examples/{item => element}/customNode/API.en.md (100%) rename packages/site/examples/{item => element}/customNode/API.zh.md (100%) rename packages/site/examples/{item => element}/customNode/demo/card.js (100%) rename packages/site/examples/{item => element}/customNode/demo/cardNode.js (100%) rename packages/site/examples/{item => element}/customNode/demo/g2ActiveChart.js (100%) rename packages/site/examples/{item => element}/customNode/demo/g2BarChart.js (100%) rename packages/site/examples/{item => element}/customNode/demo/g2LatticeChart.js (100%) rename packages/site/examples/{item => element}/customNode/demo/jsx-g-node.js (100%) rename packages/site/examples/{item => element}/customNode/demo/meta.json (100%) rename packages/site/examples/{item => element}/customNode/demo/pieChart.js (100%) rename packages/site/examples/{item => element}/customNode/demo/react-node.js (100%) rename packages/site/examples/{item => element}/customNode/index.en.md (100%) rename packages/site/examples/{item => element}/customNode/index.zh.md (100%) rename packages/site/examples/{item => element}/defaultCombos/API.en.md (100%) rename packages/site/examples/{item => element}/defaultCombos/API.zh.md (100%) rename packages/site/examples/{item => element}/defaultCombos/demo/circle.ts (100%) rename packages/site/examples/{item => element}/defaultCombos/demo/meta.json (100%) rename packages/site/examples/{item => element}/defaultCombos/demo/rect.ts (100%) rename packages/site/examples/{item => element}/defaultCombos/index.en.md (100%) rename packages/site/examples/{item => element}/defaultCombos/index.zh.md (100%) rename packages/site/examples/{item => element}/defaultEdges/API.en.md (100%) rename packages/site/examples/{item => element}/defaultEdges/API.zh.md (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/cubic.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/horizontalCubic.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/line.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/loopCurve.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/loopPolyline.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/meta.json (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/polyline.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/polylineOrth.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/polylineOrthHasCPs.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/quadratic.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/demo/verticalCubic.ts (100%) rename packages/site/examples/{item => element}/defaultEdges/index.en.md (100%) rename packages/site/examples/{item => element}/defaultEdges/index.zh.md (100%) rename packages/site/examples/{item => element}/defaultNodes/API.en.md (100%) rename packages/site/examples/{item => element}/defaultNodes/API.zh.md (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/3d-node.js (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/circle.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/diamond.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/donut.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/ellipse.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/hexagon.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/image.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/meta.json (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/modelRect.js (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/radiusRect.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/rect.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/star.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/demo/triangle.ts (100%) rename packages/site/examples/{item => element}/defaultNodes/index.en.md (100%) rename packages/site/examples/{item => element}/defaultNodes/index.zh.md (100%) rename packages/site/examples/{item => element}/label/demo/copyLabel.ts (100%) rename packages/site/examples/{item => element}/label/demo/labelLen.ts (100%) rename packages/site/examples/{item => element}/label/demo/labelLen1.ts (100%) rename packages/site/examples/{item => element}/label/demo/meta.json (100%) rename packages/site/examples/{item => element}/label/index.en.md (100%) rename packages/site/examples/{item => element}/label/index.zh.md (100%) rename packages/site/examples/{item => element}/labelBg/demo/label-background.ts (100%) rename packages/site/examples/{item => element}/labelBg/demo/meta.json (100%) rename packages/site/examples/{item => element}/labelBg/index.en.md (100%) rename packages/site/examples/{item => element}/labelBg/index.zh.md (100%) rename packages/site/examples/{item => element}/multiEdge/demo/meta.json (100%) rename packages/site/examples/{item => element}/multiEdge/demo/multiEdges.ts (100%) rename packages/site/examples/{item => element}/multiEdge/index.en.md (100%) rename packages/site/examples/{item => element}/multiEdge/index.zh.md (100%) rename packages/site/examples/{item => element}/ports/demo/meta.json (100%) rename packages/site/examples/{item => element}/ports/demo/ports.ts (100%) rename packages/site/examples/{item => element}/ports/index.en.md (100%) rename packages/site/examples/{item => element}/ports/index.zh.md (100%) rename packages/site/examples/{net => layout}/arcDiagram/demo/basicArcDiagram.js (100%) rename packages/site/examples/{net => layout}/arcDiagram/demo/circularArcDiagram.js (100%) rename packages/site/examples/{net => layout}/arcDiagram/demo/meta.json (100%) rename packages/site/examples/{net => layout}/arcDiagram/index.en.md (100%) rename packages/site/examples/{net => layout}/arcDiagram/index.zh.md (100%) rename packages/site/examples/{net => layout}/circular/API.en.md (100%) rename packages/site/examples/{net => layout}/circular/API.zh.md (100%) rename packages/site/examples/{net => layout}/circular/demo/basic.ts (100%) rename packages/site/examples/{net => layout}/circular/demo/configurationTranslate.ts (100%) rename packages/site/examples/{net => layout}/circular/demo/degree.ts (100%) rename packages/site/examples/{net => layout}/circular/demo/division.ts (100%) rename packages/site/examples/{net => layout}/circular/demo/meta.json (100%) rename packages/site/examples/{net => layout}/circular/demo/spiral.ts (100%) rename packages/site/examples/{net => layout}/circular/index.en.md (100%) rename packages/site/examples/{net => layout}/circular/index.zh.md (100%) rename packages/site/examples/{net => layout}/comboLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/comboLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/comboLayout/demo/comboCombined.ts (100%) rename packages/site/examples/{net => layout}/comboLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/comboLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/comboLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/compactBox/API.en.md (100%) rename packages/site/examples/{net => layout}/compactBox/API.zh.md (100%) rename packages/site/examples/{net => layout}/compactBox/demo/basicCompactBox.ts (100%) rename packages/site/examples/{net => layout}/compactBox/demo/compactBoxLeftAlign.ts (100%) rename packages/site/examples/{net => layout}/compactBox/demo/meta.json (100%) rename packages/site/examples/{net => layout}/compactBox/demo/topToBottomCompactBox.ts (100%) rename packages/site/examples/{net => layout}/compactBox/index.en.md (100%) rename packages/site/examples/{net => layout}/compactBox/index.zh.md (100%) rename packages/site/examples/{net => layout}/concentricLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/concentricLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/concentricLayout/demo/basicConcentric.ts (100%) rename packages/site/examples/{net => layout}/concentricLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/concentricLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/concentricLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/dagreFlow/API.en.md (100%) rename packages/site/examples/{net => layout}/dagreFlow/API.zh.md (100%) rename packages/site/examples/{net => layout}/dagreFlow/demo/antv-dagre-combo.ts (100%) rename packages/site/examples/{net => layout}/dagreFlow/demo/antv-dagre.ts (100%) rename packages/site/examples/{net => layout}/dagreFlow/demo/dagre.ts (100%) rename packages/site/examples/{net => layout}/dagreFlow/demo/meta.json (100%) rename packages/site/examples/{net => layout}/dagreFlow/index.en.md (100%) rename packages/site/examples/{net => layout}/dagreFlow/index.zh.md (100%) rename packages/site/examples/{net => layout}/dendrogram/API.en.md (100%) rename packages/site/examples/{net => layout}/dendrogram/API.zh.md (100%) rename packages/site/examples/{net => layout}/dendrogram/demo/basicDendrogram.ts (100%) rename packages/site/examples/{net => layout}/dendrogram/demo/meta.json (100%) rename packages/site/examples/{net => layout}/dendrogram/demo/tbDendrogram.ts (100%) rename packages/site/examples/{net => layout}/dendrogram/index.en.md (100%) rename packages/site/examples/{net => layout}/dendrogram/index.zh.md (100%) rename packages/site/examples/{net => layout}/forceDirected/API.en.md (100%) rename packages/site/examples/{net => layout}/forceDirected/API.zh.md (100%) rename packages/site/examples/{net => layout}/forceDirected/demo/basicFA2.js (100%) rename packages/site/examples/{net => layout}/forceDirected/demo/basicForce.js (100%) rename packages/site/examples/{net => layout}/forceDirected/demo/forceDirectedConfigurationTranslate.js (100%) rename packages/site/examples/{net => layout}/forceDirected/demo/forceDirectedFunctionalParams.js (100%) rename packages/site/examples/{net => layout}/forceDirected/demo/meta.json (100%) rename packages/site/examples/{net => layout}/forceDirected/index.en.md (100%) rename packages/site/examples/{net => layout}/forceDirected/index.zh.md (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/demo/basicFruchterman.ts (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/demo/fruchtermanCluster.ts (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/demo/fruchtermanFix.ts (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/demo/fruchtermanWebWorker.ts (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/fruchtermanLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/gpuLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/gpuLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/gpuLayout/demo/basicFruchterman.ts (100%) rename packages/site/examples/{net => layout}/gpuLayout/demo/basicGForce.js (100%) rename packages/site/examples/{net => layout}/gpuLayout/demo/fruchtermanComplexData.ts (100%) rename packages/site/examples/{net => layout}/gpuLayout/demo/gForceComplexData.js (100%) rename packages/site/examples/{net => layout}/gpuLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/gpuLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/gpuLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/gridLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/gridLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/gridLayout/demo/grid.ts (100%) rename packages/site/examples/{net => layout}/gridLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/gridLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/gridLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/indented/API.en.md (100%) rename packages/site/examples/{net => layout}/indented/API.zh.md (100%) rename packages/site/examples/{net => layout}/indented/demo/filesystem.js (100%) rename packages/site/examples/{net => layout}/indented/demo/graphWithIntended.js (100%) rename packages/site/examples/{net => layout}/indented/demo/hIntended.js (100%) rename packages/site/examples/{net => layout}/indented/demo/intendAlignTop.js (100%) rename packages/site/examples/{net => layout}/indented/demo/meta.json (100%) rename packages/site/examples/{net => layout}/indented/index.en.md (100%) rename packages/site/examples/{net => layout}/indented/index.zh.md (100%) rename packages/site/examples/{net => layout}/layoutMechanism/API.en.md (100%) rename packages/site/examples/{net => layout}/layoutMechanism/API.zh.md (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/customBigraph.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/dataChange.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/layoutTiming.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/layoutTranslate.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/meta.json (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/subgraphLayout.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/demo/sublayoutPipes.js (100%) rename packages/site/examples/{net => layout}/layoutMechanism/index.en.md (100%) rename packages/site/examples/{net => layout}/layoutMechanism/index.zh.md (100%) rename packages/site/examples/{net => layout}/mdsLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/mdsLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/mdsLayout/demo/basicMDS.ts (100%) rename packages/site/examples/{net => layout}/mdsLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/mdsLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/mdsLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/mindmap/API.en.md (100%) rename packages/site/examples/{net => layout}/mindmap/API.zh.md (100%) rename packages/site/examples/{net => layout}/mindmap/demo/hCustomSideMindmap.ts (100%) rename packages/site/examples/{net => layout}/mindmap/demo/hLeftMindmap.ts (100%) rename packages/site/examples/{net => layout}/mindmap/demo/hMindmap.ts (100%) rename packages/site/examples/{net => layout}/mindmap/demo/hRightMindmap.ts (100%) rename packages/site/examples/{net => layout}/mindmap/demo/meta.json (100%) rename packages/site/examples/{net => layout}/mindmap/index.en.md (100%) rename packages/site/examples/{net => layout}/mindmap/index.zh.md (100%) rename packages/site/examples/{net => layout}/radialLayout/API.en.md (100%) rename packages/site/examples/{net => layout}/radialLayout/API.zh.md (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/basic.ts (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/configurationTranslate.ts (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/meta.json (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/preventOverlap.ts (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/preventOverlapUnstrict.ts (100%) rename packages/site/examples/{net => layout}/radialLayout/demo/sort.ts (100%) rename packages/site/examples/{net => layout}/radialLayout/index.en.md (100%) rename packages/site/examples/{net => layout}/radialLayout/index.zh.md (100%) rename packages/site/examples/{net => layout}/radialtree/API.en.md (100%) rename packages/site/examples/{net => layout}/radialtree/API.zh.md (100%) rename packages/site/examples/{net => layout}/radialtree/demo/meta.json (100%) rename packages/site/examples/{net => layout}/radialtree/demo/radialTree.js (100%) rename packages/site/examples/{net => layout}/radialtree/index.en.md (100%) rename packages/site/examples/{net => layout}/radialtree/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/contextMenu/API.en.md (100%) rename packages/site/examples/{tool => plugin}/contextMenu/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/contextMenu/demo/contextMenu.ts (100%) rename packages/site/examples/{tool => plugin}/contextMenu/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/contextMenu/index.en.md (100%) rename packages/site/examples/{tool => plugin}/contextMenu/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/edgeFilterLens/demo/default.ts (99%) rename packages/site/examples/{tool => plugin}/edgeFilterLens/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/edgeFilterLens/demo/moreConfig.ts (99%) rename packages/site/examples/{tool => plugin}/edgeFilterLens/index.en.md (100%) rename packages/site/examples/{tool => plugin}/edgeFilterLens/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/fisheye/API.en.md (100%) rename packages/site/examples/{tool => plugin}/fisheye/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/fisheye/demo/fisheye.ts (100%) rename packages/site/examples/{tool => plugin}/fisheye/demo/fisheyeStyle.js (100%) rename packages/site/examples/{tool => plugin}/fisheye/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/fisheye/index.en.md (100%) rename packages/site/examples/{tool => plugin}/fisheye/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/grid/demo/default.ts (100%) rename packages/site/examples/{tool => plugin}/grid/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/grid/index.en.md (100%) rename packages/site/examples/{tool => plugin}/grid/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/history/demo/default.ts (100%) rename packages/site/examples/{tool => plugin}/history/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/history/index.en.md (100%) rename packages/site/examples/{tool => plugin}/history/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/hull/API.en.md (100%) rename packages/site/examples/{tool => plugin}/hull/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/hull/demo/changeMembers.ts (100%) rename packages/site/examples/{tool => plugin}/hull/demo/hull.ts (100%) rename packages/site/examples/{tool => plugin}/hull/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/hull/index.en.md (100%) rename packages/site/examples/{tool => plugin}/hull/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/legend/API.en.md (100%) rename packages/site/examples/{tool => plugin}/legend/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/legend/demo/legend-click.ts (100%) rename packages/site/examples/{tool => plugin}/legend/demo/legend.ts (100%) rename packages/site/examples/{tool => plugin}/legend/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/legend/demo/style.ts (100%) rename packages/site/examples/{tool => plugin}/legend/index.en.md (100%) rename packages/site/examples/{tool => plugin}/legend/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/minimap/API.en.md (100%) rename packages/site/examples/{tool => plugin}/minimap/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/minimap/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/minimap/demo/minimap-api.ts (100%) rename packages/site/examples/{tool => plugin}/minimap/demo/minimap.ts (100%) rename packages/site/examples/{tool => plugin}/minimap/index.en.md (100%) rename packages/site/examples/{tool => plugin}/minimap/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/overview/demo/default.ts (100%) rename packages/site/examples/{tool => plugin}/overview/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/overview/index.en.md (100%) rename packages/site/examples/{tool => plugin}/overview/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/snapline/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/snapline/demo/snapline.ts (100%) rename packages/site/examples/{tool => plugin}/snapline/index.en.md (100%) rename packages/site/examples/{tool => plugin}/snapline/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/timebar/API.en.md (100%) rename packages/site/examples/{tool => plugin}/timebar/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/timebar/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/timebar/demo/timebar-chart.ts (100%) rename packages/site/examples/{tool => plugin}/timebar/demo/timebar-time.ts (100%) rename packages/site/examples/{tool => plugin}/timebar/index.en.md (100%) rename packages/site/examples/{tool => plugin}/timebar/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/toolbar/API.en.md (100%) rename packages/site/examples/{tool => plugin}/toolbar/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/toolbar/demo/customized-toolbar.ts (100%) rename packages/site/examples/{tool => plugin}/toolbar/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/toolbar/demo/toolbar.ts (100%) rename packages/site/examples/{tool => plugin}/toolbar/index.en.md (100%) rename packages/site/examples/{tool => plugin}/toolbar/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/tooltip/API.en.md (100%) rename packages/site/examples/{tool => plugin}/tooltip/API.zh.md (100%) rename packages/site/examples/{tool => plugin}/tooltip/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/tooltip/demo/tooltipClick.ts (100%) rename packages/site/examples/{tool => plugin}/tooltip/demo/tooltipPlugin.ts (100%) rename packages/site/examples/{tool => plugin}/tooltip/index.en.md (100%) rename packages/site/examples/{tool => plugin}/tooltip/index.zh.md (100%) rename packages/site/examples/{tool => plugin}/watermarker/demo/background.ts (100%) rename packages/site/examples/{tool => plugin}/watermarker/demo/imgWatermark.ts (100%) rename packages/site/examples/{tool => plugin}/watermarker/demo/meta.json (100%) rename packages/site/examples/{tool => plugin}/watermarker/demo/textWatermark.ts (100%) rename packages/site/examples/{tool => plugin}/watermarker/index.en.md (100%) rename packages/site/examples/{tool => plugin}/watermarker/index.zh.md (100%) create mode 100644 packages/site/scripts/doc-template.js diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts index 94f36cff3c0..68e45bcc90f 100644 --- a/packages/site/.dumirc.ts +++ b/packages/site/.dumirc.ts @@ -50,30 +50,30 @@ export default defineConfig({ }, navs: [ { - slug: 'docs/manual/introduction', + slug: 'docs/manual', title: { - zh: '教程', - en: 'Manual', + zh: '文档', + en: 'Docs', }, }, { - slug: 'examples', + slug: 'docs/apis', title: { - zh: '示例', - en: 'Examples', + zh: 'API', + en: 'API', }, }, { - slug: 'docs/apis', + slug: 'examples', title: { - zh: 'API', - en: 'API', + zh: '图表示例', + en: 'Playground', }, }, { title: { - zh: '其他资源', - en: 'Online Tools', + zh: '社区', + en: 'Community', }, dropdownItems: [ { @@ -84,148 +84,117 @@ export default defineConfig({ }, }, { - url: 'https://g6.antv.antgroup.com', + url: 'https://g6-next.antv.antgroup.com', name: { zh: '国内镜像', - en: 'China Site', + en: 'Site in China', }, }, ], }, ], - ecosystems: [ - // 头部的菜单中的「周边生态」 - ], docs: [ + // Docs folder { - slug: 'manual/v5', - title: { - zh: '🎉 新版本 5.0', - en: '🎉 New v5.0', - }, - order: 4, - }, - { - slug: 'manual/tutorial', + slug: 'manual/core-concept', title: { - zh: '入门教程', - en: 'Tutorial', + zh: '核心概念', + en: 'Concepts', }, - order: 5, + order: 3, }, { slug: 'manual/advanced', title: { - zh: '进阶教程', + zh: '进阶指南', en: 'Advanced', }, - order: 6, - }, - { - slug: 'manual/customize', - title: { - zh: '自定义扩展', - en: 'Customzing Extensions', - }, - order: 7, + order: 4, }, - // ==========API==================== + // APIs folder { - slug: 'apis/reference', + slug: 'apis/graph', title: { - zh: 'API 文档', - en: 'API Reference', + zh: 'Graph - 图', + en: 'Graph', }, - order: 1, }, { slug: 'apis/data', title: { - zh: '数据', + zh: 'Data - 数据', en: 'Data', }, - order: 2, }, { - slug: 'apis/graph', + slug: 'apis/element', title: { - zh: '图实例', - en: 'Graph', + zh: 'Element - 元素', + en: 'Element', }, - order: 2, }, { - slug: 'apis/item', + slug: 'apis/element/node', title: { - zh: '元素', - en: 'Elements', + zh: 'Node - 节点', + en: 'Node', }, }, { - slug: 'apis/item/node', + slug: 'apis/element/edge', title: { - zh: '节点', - en: 'Node', + zh: 'Edge - 边', + en: 'Edge', }, - order: 3, }, { - slug: 'apis/item/edge', + slug: 'apis/element/combo', title: { - zh: '边', - en: 'Edge', + zh: 'Combo - 组合', + en: 'Combo', }, - order: 4, }, { - slug: 'apis/item/combo', + slug: 'apis/layout', title: { - zh: 'Combo', - en: 'Combo', + zh: 'Layout - 布局', + en: 'Layout', }, - order: 5, }, { - slug: 'apis/shape', + slug: 'apis/behavior', title: { - zh: '图形', - en: 'Shape', + zh: 'Behavior - 交互', + en: 'Behavior', }, - order: 6, }, { - slug: 'apis/layout', + slug: 'apis/plugin', title: { - zh: '布局', - en: 'layout', + zh: 'Plugin - 插件', + en: 'Plugin', }, - order: 7, }, { - slug: 'apis/behaviors', + slug: 'apis/extension', title: { - zh: '交互', - en: 'Interaction', + zh: 'Extension - 扩展', + en: 'Extension', }, - order: 8, }, { - slug: 'apis/plugins', + slug: 'apis/function', title: { - zh: '自由插件', - en: 'Plugin', + zh: 'Function - 函数', + en: 'Function', }, - order: 9, }, - ], - tutorials: [ { - slug: 'manual/about', + slug: 'apis/export', title: { - zh: '关于', - en: 'About', + zh: 'Export - 导出', + en: 'Export', }, - order: 1, }, ], examples: [ @@ -233,7 +202,7 @@ export default defineConfig({ slug: 'feature', icon: 'gallery', title: { - zh: '5.0 新能力', + zh: '5.0 特性', en: '5.0 Features', }, }, @@ -246,7 +215,7 @@ export default defineConfig({ }, }, { - slug: 'net', + slug: 'layout', icon: 'net', title: { zh: '图布局', @@ -254,23 +223,23 @@ export default defineConfig({ }, }, { - slug: 'item', + slug: 'element', icon: 'shape', title: { zh: '元素', - en: 'Item', + en: 'Element', }, }, { - slug: 'interaction', + slug: 'behavior', icon: 'interaction', title: { zh: '交互', - en: 'Interaction', + en: 'Behavior', }, }, { - slug: 'scatter', + slug: 'animation', icon: 'scatter', title: { zh: '动画', @@ -278,18 +247,18 @@ export default defineConfig({ }, }, { - slug: 'tool', + slug: 'plugin', icon: 'tool', title: { - zh: '组件', - en: 'Component', + zh: '插件', + en: 'Plugin', }, }, { slug: 'performance', icon: 'net', title: { - zh: '性能测试', + zh: '性能', en: 'Performance', }, }, @@ -334,7 +303,7 @@ export default defineConfig({ { text: { zh: '图表示例', - en: 'Examples', + en: 'Playground', }, link: `/examples`, type: 'primary', @@ -389,7 +358,7 @@ export default defineConfig({ }, description: { zh: '扎根实际具体业务场景、结合业界领先成果，沉淀顶尖解决方案', - en: 'According to practical bussiness scenarios, we found out the top solutions', + en: 'According to practical business scenarios, we found out the top solutions', }, }, { @@ -400,7 +369,7 @@ export default defineConfig({ }, description: { zh: 'Vivid, 精心设计的简单、灵活、高可拓展的接口，满足你的无限创意', - en: 'Well-designed simple, flexible, and extendable intefaces will satisfy your infinite originality', + en: 'Well-designed simple, flexible, and extendable interfaces will satisfy your infinite originality', }, }, ], @@ -478,7 +447,7 @@ export default defineConfig({ img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', }, { - name: '网上银行', + name: '网商银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', }, { diff --git a/packages/site/docs/apis/behavior/default.en.md b/packages/site/docs/apis/behavior/default.en.md new file mode 100644 index 00000000000..3cfafa5e40b --- /dev/null +++ b/packages/site/docs/apis/behavior/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Behavior +--- \ No newline at end of file diff --git a/packages/site/docs/apis/behavior/default.zh.md b/packages/site/docs/apis/behavior/default.zh.md new file mode 100644 index 00000000000..ad8e401f662 --- /dev/null +++ b/packages/site/docs/apis/behavior/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)交互 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/behaviors/ActivateRelationsOptions.en.md b/packages/site/docs/apis/behaviors/ActivateRelationsOptions.en.md deleted file mode 100644 index 1852cead504..00000000000 --- a/packages/site/docs/apis/behaviors/ActivateRelationsOptions.en.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: ActivateRelations -order: 8 ---- - -Activate the adjacent nodes of the current node when the interaction is triggered - -- [Activate Relations](/en/examples/interaction/highlight/#activateRelations) -- [Custom Highlight](/en/examples/interaction/highlight/#highlightDark) - -activate relations - -## activeState - -**Type**: `string` - -**Default**: `selected` - -Switch to this state when highlighted - - - -## trigger - -**Type**: `string` - -**Default**: `click | pointerenter` - -The event type that triggers the interaction - - diff --git a/packages/site/docs/apis/behaviors/ActivateRelationsOptions.zh.md b/packages/site/docs/apis/behaviors/ActivateRelationsOptions.zh.md deleted file mode 100644 index cabf582ba2a..00000000000 --- a/packages/site/docs/apis/behaviors/ActivateRelationsOptions.zh.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: ActivateRelations 高亮相邻节点 -order: 8 ---- - -触发交互时，高亮当前节点的相邻节点 - -- [内置的高亮节点](/examples/interaction/highlight/#activateRelations) -- [自定义高亮](/examples/interaction/highlight/#highlightDark) - -activate relations - -## activeState - -**类型**：`string` - -**默认值**：`selected` - -高亮时切换到该状态 - - - -## trigger - -**类型**：`string` - -**默认值**：`click | pointerenter` - -触发交互的事件类型 - - diff --git a/packages/site/docs/apis/behaviors/BrushSelectOptions.en.md b/packages/site/docs/apis/behaviors/BrushSelectOptions.en.md deleted file mode 100644 index c46e9dc287b..00000000000 --- a/packages/site/docs/apis/behaviors/BrushSelectOptions.en.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: BrushSelect -order: 5 ---- - -Brush select a group of nodes - -- [Brush Select](/en/examples/interaction/select/#brush) - -brush select - - diff --git a/packages/site/docs/apis/behaviors/BrushSelectOptions.zh.md b/packages/site/docs/apis/behaviors/BrushSelectOptions.zh.md deleted file mode 100644 index dba659fda4e..00000000000 --- a/packages/site/docs/apis/behaviors/BrushSelectOptions.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: BrushSelect 框选 -order: 5 ---- - -框选一组节点 - -- [框选](/examples/interaction/select/#brush) - -brush select - - diff --git a/packages/site/docs/apis/behaviors/ClickSelectOptions.en.md b/packages/site/docs/apis/behaviors/ClickSelectOptions.en.md deleted file mode 100644 index e3589c6d736..00000000000 --- a/packages/site/docs/apis/behaviors/ClickSelectOptions.en.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: ClickSelect -order: 4 ---- - -- [Click Select](/en/examples/interaction/select/#click) - -click select - - - - - - - -## selectedState - -**Type**: `string` - -**Default**: `selected` - -Switch to this state when selected - -## trigger - -**Type**: `'shift' | 'ctrl' | 'alt' | 'control'` - -**Default**: `'shift'` - -Hold down to select multiple - - diff --git a/packages/site/docs/apis/behaviors/ClickSelectOptions.zh.md b/packages/site/docs/apis/behaviors/ClickSelectOptions.zh.md deleted file mode 100644 index 3e2f4798517..00000000000 --- a/packages/site/docs/apis/behaviors/ClickSelectOptions.zh.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: ClickSelect 点击选中 -order: 4 ---- - -- [点击单选或多选](/examples/interaction/select/#click) - -click select - - - - - - - -## selectedState - -**类型**：`string` - -**默认值**：`selected` - -选中时切换到该状态 - -## trigger - -**类型**：`'shift' | 'ctrl' | 'alt' | 'control'` - -**默认值**：`'shift'` - -按住以进行多选 - - diff --git a/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.en.md b/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.en.md deleted file mode 100644 index 4ab38aa7041..00000000000 --- a/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.en.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: CollapseExpandCombo -order: 9 ---- - -- [Circle Combo](/en/examples/interaction/combo/#circle) -- [Rect Combo](/en/examples/interaction/combo/#rect) -- [Extend Circle Combo](/en/examples/interaction/combo#cCircle) -- [Extend Rect Combo](/en/examples/interaction/combo/#cRect) - -collapse and expand canvas - -## trigger - -**Type**: `'click' | 'dblclick'` - -**Default**: `click` - -The event that triggers the collapse/expand of the Combo - - - - diff --git a/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.zh.md b/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.zh.md deleted file mode 100644 index 33e8c550489..00000000000 --- a/packages/site/docs/apis/behaviors/CollapseExpandComboOptions.zh.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: CollapseExpandCombo 收起/展开 Combo -order: 9 ---- - -- [圆形 Combo](/examples/interaction/combo/#circle) -- [矩形 Combo](/examples/interaction/combo/#rect) -- [扩展圆形 Combo](/examples/interaction/combo#cCircle) -- [扩展矩形 Combo](/examples/interaction/combo/#cRect) - - collapse and expand canvas - -## trigger - -**类型**：`'click' | 'dblclick'` - -**默认值**：`click` - -触发收起/展开 Combo 的事件 - - diff --git a/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.en.md b/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.en.md deleted file mode 100644 index 7a6dd5cd162..00000000000 --- a/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.en.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: CollapseExpandCombo -order: 10 ---- - -- [Using changeData](/en/examples/interaction/treeBehavior/#changeData) - -collapse and expand tree - -## disableAnimate - -**Type**: `boolean` - -**Default**: `false` - -Whether to disable animation - - - - - -## trigger - -**Type**: `'click' | 'dblclick'` - -**Default**: `click` - -The event that triggers the collapse/expand of the tree diff --git a/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.zh.md b/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.zh.md deleted file mode 100644 index 52a6e449e4f..00000000000 --- a/packages/site/docs/apis/behaviors/CollapseExpandTreeOptions.zh.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: CollapseExpandCombo 收起/展开树 -order: 10 ---- - -- [使用 changeData](/examples/interaction/treeBehavior/#changeData) - -collapse and expand tree - -## disableAnimate - -**类型**：`boolean` - -**默认值**：`false` - -是否禁用动画 - - - - - -## trigger - -**类型**：`'click' | 'dblclick'` - -**默认值**：`click` - -触发收起/展开树的事件 diff --git a/packages/site/docs/apis/behaviors/CreateEdgeOptions.en.md b/packages/site/docs/apis/behaviors/CreateEdgeOptions.en.md deleted file mode 100644 index 3eb0e5698a8..00000000000 --- a/packages/site/docs/apis/behaviors/CreateEdgeOptions.en.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CreateEdge -order: 13 ---- - -- [Create Edge by Dragging](/en/examples/interaction/createEdge/#createEdgeByDragging) -- [Create Edge by Clicking](/en/examples/interaction/createEdge/#createEdgeByClicking) - -create edge - -## cancelCreateEventName - -**Type**: `string` - -**Default**: `undefined` - -The event name triggered when canceling the creation of the edge - -## createActualEventName - -**Type**: `string` - -**Default**: `undefined` - -The event name triggered when creating the actual edge - -## createVirtualEventName - -**Type**: `string` - -**Default**: `undefined` - -The event name triggered when creating the virtual edge - -## edgeConfig - -**Type**: `EdgeDisplayModelData` - -**Default**: `{}` - -Edge configuration - - - -## trigger - -**Type**: `'click' | 'drag'` - - - -**Default**: `'click'` - -**Required**: false - -**Description**: The event type that triggers the interaction - - diff --git a/packages/site/docs/apis/behaviors/CreateEdgeOptions.zh.md b/packages/site/docs/apis/behaviors/CreateEdgeOptions.zh.md deleted file mode 100644 index 2df93755f1e..00000000000 --- a/packages/site/docs/apis/behaviors/CreateEdgeOptions.zh.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CreateEdge 创建边 -order: 13 ---- - -- [从节点拖拽创建边](/examples/interaction/createEdge/#createEdgeByDragging) -- [点击节点创建边](/examples/interaction/createEdge/#createEdgeByClicking) - -create edge - -## cancelCreateEventName - -**类型**：`string` - -**默认值**：`undefined` - -取消创建边时，触发的事件名称 - -## createActualEventName - -**类型**：`string` - -**默认值**：`undefined` - -创建真实边时，触发的事件名称 - -## createVirtualEventName - -**类型**：`string` - -**默认值**：`undefined` - -创建虚拟边时，触发的事件名称 - -## edgeConfig - -**类型**：`EdgeDisplayModelData` - -**默认值**：`{}` - -边的配置项 - - - -## trigger - -**类型**：`'click' | 'drag'` - - - -**默认值**：`'click'` - -**是否必须**：false - -**说明**：触发交互的事件类型 - - diff --git a/packages/site/docs/apis/behaviors/DragCanvasOptions.en.md b/packages/site/docs/apis/behaviors/DragCanvasOptions.en.md deleted file mode 100644 index 14ef9344ddd..00000000000 --- a/packages/site/docs/apis/behaviors/DragCanvasOptions.en.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: DragCanvas -order: 1 ---- - -- [Drag Canvas](/en/examples/interaction/moveCanvas/#dragCanvas) - -drag canvas - - - - - -## dragOnItems - -**Type**: `boolean` - -**Default**: `false` - -Whether to drag the canvas when dragging the node, edge or combo - - - - - - - -## secondaryKeyToDisable - -**Type**: `string` - -**Default**: `shift` - -The key to disable dragging - - - - - -## trigger - -**Type**: `'drag' | 'directionKeys'` - -**Default**: `drag` - -The event type that triggers the interaction - - diff --git a/packages/site/docs/apis/behaviors/DragCanvasOptions.zh.md b/packages/site/docs/apis/behaviors/DragCanvasOptions.zh.md deleted file mode 100644 index 643a19c8f8f..00000000000 --- a/packages/site/docs/apis/behaviors/DragCanvasOptions.zh.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: DragCanvas 拖拽画布 -order: 1 ---- - -- [拖拽画布](/examples/interaction/moveCanvas/#dragCanvas) - -drag canvas - - - - - -## dragOnItems - -**类型**：`boolean` - -**默认值**：`false` - -是否在节点/边/Combo 上触发画布拖拽 - - - - - - - -## secondaryKeyToDisable - -**类型**：`string` - -**默认值**：`shift` - -禁用拖拽的按键 - - - - - -## trigger - -**类型**：`'drag' | 'directionKeys'` - -**默认值**：`drag` - -触发交互的事件类型 diff --git a/packages/site/docs/apis/behaviors/DragComboOptions.en.md b/packages/site/docs/apis/behaviors/DragComboOptions.en.md deleted file mode 100644 index 485ea03ea39..00000000000 --- a/packages/site/docs/apis/behaviors/DragComboOptions.en.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: DragCombo -order: 3 ---- - -- [Circle Combo](/en/examples/interaction/combo/#circle) -- [Rect Combo](/en/examples/interaction/combo/#rect) -- [Extend Circle Combo](/en/examples/interaction/combo#cCircle) -- [Extend Rect Combo](/en/examples/interaction/combo/#cRect) - -drag combo - - - - diff --git a/packages/site/docs/apis/behaviors/DragComboOptions.zh.md b/packages/site/docs/apis/behaviors/DragComboOptions.zh.md deleted file mode 100644 index 82c0241e395..00000000000 --- a/packages/site/docs/apis/behaviors/DragComboOptions.zh.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: DragCombo 拖拽 Combo -order: 3 ---- - -- [圆形 Combo](/examples/interaction/combo/#circle) -- [矩形 Combo](/examples/interaction/combo/#rect) -- [扩展圆形 Combo](/examples/interaction/combo#cCircle) -- [扩展矩形 Combo](/examples/interaction/combo/#cRect) - -drag combo - - diff --git a/packages/site/docs/apis/behaviors/DragNodeOptions.en.md b/packages/site/docs/apis/behaviors/DragNodeOptions.en.md deleted file mode 100644 index 787963ea15f..00000000000 --- a/packages/site/docs/apis/behaviors/DragNodeOptions.en.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragNode -order: 2 ---- - -- [Circle](/en/examples/item/defaultNodes/#circle) - -drag node - - - - diff --git a/packages/site/docs/apis/behaviors/DragNodeOptions.zh.md b/packages/site/docs/apis/behaviors/DragNodeOptions.zh.md deleted file mode 100644 index fe5309f63d6..00000000000 --- a/packages/site/docs/apis/behaviors/DragNodeOptions.zh.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: DragNode 拖拽节点 -order: 2 ---- - -- [圆形](/examples/item/defaultNodes/#circle) - -drag node - - diff --git a/packages/site/docs/apis/behaviors/HoverActivateOptions.en.md b/packages/site/docs/apis/behaviors/HoverActivateOptions.en.md deleted file mode 100644 index 08f2e0114b2..00000000000 --- a/packages/site/docs/apis/behaviors/HoverActivateOptions.en.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HoverActivateOptions -order: 7 ---- - -Activate on hover - -- [Update the Label](/en/examples/interaction/label/#update) - -hover activate - -## activateState - -**Type**: `string` - -**Default**: `'selected'` - -The state when activated - - - - - - - - - - diff --git a/packages/site/docs/apis/behaviors/HoverActivateOptions.zh.md b/packages/site/docs/apis/behaviors/HoverActivateOptions.zh.md deleted file mode 100644 index a9016997c55..00000000000 --- a/packages/site/docs/apis/behaviors/HoverActivateOptions.zh.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HoverActivate 指针悬停 -order: 7 ---- - -指针悬停激活 - -- [更新节点或边上的标签](/examples/interaction/label/#update) - -hover activate - -## activateState - -**类型**：`string` - -**默认值**：`'selected'` - -激活时的状态 - - - - - - - - diff --git a/packages/site/docs/apis/behaviors/LassoSelectOptions.en.md b/packages/site/docs/apis/behaviors/LassoSelectOptions.en.md deleted file mode 100644 index 89468afa384..00000000000 --- a/packages/site/docs/apis/behaviors/LassoSelectOptions.en.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: LassoSelect -order: 6 ---- - -Select a group of nodes by lasso. - -- [Lasso Select](/en/examples/interaction/select/#lasso) - -lasso select - - - - diff --git a/packages/site/docs/apis/behaviors/LassoSelectOptions.zh.md b/packages/site/docs/apis/behaviors/LassoSelectOptions.zh.md deleted file mode 100644 index f13c7bc6396..00000000000 --- a/packages/site/docs/apis/behaviors/LassoSelectOptions.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: LassoSelect 拉索选择 -order: 6 ---- - -通过拉索选择一组节点 - -- [拉索选择](/examples/interaction/select/#lasso) - -lasso select - - diff --git a/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.en.md b/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.en.md deleted file mode 100644 index 3e3292f3a39..00000000000 --- a/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.en.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: OrbitCanvas3D -order: 14 ---- - -Fixed focalPoint, change camera position - -> Unable to cross the north and south poles - -- [3D Graph Vis](/en/examples/feature/features/#webgl3d) - -orbit canvas - - - - - - - -## trigger - -**Type**: `'drag' | 'directionKeys'` - -**Default**: `'drag'` - -The way to trigger interaction - - diff --git a/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.zh.md b/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.zh.md deleted file mode 100644 index 9724d82532e..00000000000 --- a/packages/site/docs/apis/behaviors/OrbitCanvas3DOptions.zh.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: OrbitCanvas3D -order: 14 ---- - -固定视点，改变相机位置 - -> 无法跨越南北极 - -- [3D Graph Vis](/examples/feature/features/#webgl3d) - -orbit canvas - - - - - - - -## trigger - -**类型**：`'drag' | 'directionKeys'` - -**默认值**：`'drag'` - -触发交互的方式 diff --git a/packages/site/docs/apis/behaviors/Overview.en.md b/packages/site/docs/apis/behaviors/Overview.en.md deleted file mode 100644 index 7ba6a77beb2..00000000000 --- a/packages/site/docs/apis/behaviors/Overview.en.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Overview -order: -1 ---- - -## Behavior Development - -See [Custom Behavior](/en/manual/customize/behavior-extension) for development. - -## Behavior Registration and Use - -```ts -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; -import CustomBehavior from './path/to/custom-behavior'; - -const Graph = extend(BaseGraph, { - behaviors: { - 'custom-behavior': CustomBehavior, // Register custom behaviors - 'built-in-behavior': Extensions.ActivateRelations, // Register built-in behaviors, such as activate relations - }, -}); - -const graph = new Graph({ - // ... Other configurations - modes: { - default: [ - 'custom-behavior', // Use custom behaviors by default configuration items - { - type: 'built-in-behavior', - key: 'activate-relations', - // ... Behavior configuration items - }, - ], - }, -}); -``` diff --git a/packages/site/docs/apis/behaviors/Overview.zh.md b/packages/site/docs/apis/behaviors/Overview.zh.md deleted file mode 100644 index 931dcc997c2..00000000000 --- a/packages/site/docs/apis/behaviors/Overview.zh.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: 概述 -order: -1 ---- - -## 交互开发 - -参见 [自定义交互](/manual/customize/behavior-extension) 进行开发。 - -## 交互注册与使用 - -```ts -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; -import CustomBehavior from './path/to/custom-behavior'; - -const Graph = extend(BaseGraph, { - behaviors: { - 'custom-behavior': CustomBehavior, // 注册自定义交互 - 'built-in-behavior': Extensions.ActivateRelations, // 注册内置交互，例如 activate relations - }, -}); - -const graph = new Graph({ - // ... 其他配置项 - modes: { - default: [ - 'custom-behavior', // 使用自定义交互，使用默认配置项 - { - type: 'built-in-behavior', - key: 'activate-relations', - // ... 交互配置项 - }, - ], - }, -}); -``` diff --git a/packages/site/docs/apis/behaviors/ScrollCanvasOptions.en.md b/packages/site/docs/apis/behaviors/ScrollCanvasOptions.en.md deleted file mode 100644 index 8556d7f7cfb..00000000000 --- a/packages/site/docs/apis/behaviors/ScrollCanvasOptions.en.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: ScrollCanvas -order: 12 ---- - -- [Scroll Canvas](/examples/interaction/moveCanvas/#scrollBoth) -- [Scroll Canvas alone Y-asix](/examples/interaction/moveCanvas/#scrollY) - -## allowDragOnItem - -**Type**: `boolean | {node?: boolean; edge?: boolean; combo?: boolean}` - -**Default**: `false` - -Whether to scroll the canvas when dragging the node, edge or combo - - - - - - - -## zoomKey - -**Type**: `string | string[]` - -**Default**: `ctrl` - -The key to trigger zooming - -## zoomRatio - -**Type**: `number` - -**Default**: `0.05` - -The ratio of zooming diff --git a/packages/site/docs/apis/behaviors/ScrollCanvasOptions.zh.md b/packages/site/docs/apis/behaviors/ScrollCanvasOptions.zh.md deleted file mode 100644 index 51c99ffca48..00000000000 --- a/packages/site/docs/apis/behaviors/ScrollCanvasOptions.zh.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: ScrollCanvas 画布滚动 -order: 12 ---- - -- [双向滚动画布](/examples/interaction/moveCanvas/#scrollBoth) -- [Y 轴滚动画布](/examples/interaction/moveCanvas/#scrollY) - -## allowDragOnItem - -**类型**：`boolean | {node?: boolean; edge?: boolean; combo?: boolean}` - -**默认值**：`false` - -是否在节点/边/Combo 上触发画布滚动 - - - - - - - -## zoomKey - -**类型**：`string | string[]` - -**默认值**：`ctrl` - -触发缩放的按键 - -## zoomRatio - -**类型**：`number` - -**默认值**：`0.05` - -缩放比例 diff --git a/packages/site/docs/apis/behaviors/ShortcutsCallOptions.en.md b/packages/site/docs/apis/behaviors/ShortcutsCallOptions.en.md deleted file mode 100644 index 2a458b20dff..00000000000 --- a/packages/site/docs/apis/behaviors/ShortcutsCallOptions.en.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: ShortcutsCall -order: 11 ---- - -- [FitView by Shortcuts](/en/examples/interaction/shortcutsCall/#shortcuts-fitView) - -## combinedKey - -**Type**: `string` - -**Default**: `'1'` - -combined key - -## functionName - -**Type**: `string` - -**Default**: `'fitView'` - -function name - -## functionParams - -**Type**: `any[]` - -**Default**: `[]` - -function params - -## trigger - -**Type**: `'shift' | 'ctrl' | 'alt' | 'control'` - -**Default**: `'ctrl'` - -trigger key diff --git a/packages/site/docs/apis/behaviors/ShortcutsCallOptions.zh.md b/packages/site/docs/apis/behaviors/ShortcutsCallOptions.zh.md deleted file mode 100644 index 7e842c8c9f1..00000000000 --- a/packages/site/docs/apis/behaviors/ShortcutsCallOptions.zh.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: ShortcutsCall 快捷键 -order: 11 ---- - -- [快捷键自适应画布](/examples/interaction/shortcutsCall/#shortcuts-fitView) - -## combinedKey - -**类型**：`string` - -**默认值**：`'1'` - -组合键 - -## functionName - -**类型**：`string` - -**默认值**：`'fitView'` - -函数名 - -## functionParams - -**类型**：`any[]` - -**默认值**：`[]` - -函数参数 - -## trigger - -**类型**：`'shift' | 'ctrl' | 'alt' | 'control'` - -**默认值**：`'ctrl'` - -触发快捷键的按键 diff --git a/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.en.md b/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.en.md deleted file mode 100644 index d25e6e248c5..00000000000 --- a/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.en.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: TrackCanvas3D -order: 15 ---- - -Rotate the camera around the graph with a fixed camera position - -> The position of the focal point will change - -track canvas - - - - - - - -## trigger - -**Type**: `'drag' | 'directionKeys'` - -**Default**: `'drag'` - -The way to trigger interaction - - diff --git a/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.zh.md b/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.zh.md deleted file mode 100644 index 245f3f968d6..00000000000 --- a/packages/site/docs/apis/behaviors/TrackCanvas3DOptions.zh.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: TrackCanvas3D -order: 15 ---- - -固定相机位置绕图旋转 - -> 视点(focalPoint)位置会发生改变 - -track canvas - - - - - - - -## trigger - -**类型**：`'drag' | 'directionKeys'` - -**默认值**：`'drag'` - -触发交互的方式 diff --git a/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.en.md b/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.en.md deleted file mode 100644 index baa25894172..00000000000 --- a/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.en.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ZoomCanvas3D -order: 16 ---- - -Zoom canvas in 3D scene - -- [3D Graph Vis](/en/examples/feature/features/#webgl3d) - -3d zoom canvas - - - - diff --git a/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.zh.md b/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.zh.md deleted file mode 100644 index 1405ae137be..00000000000 --- a/packages/site/docs/apis/behaviors/ZoomCanvas3DOptions.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: ZoomCanvas3D 3D画布缩放 -order: 16 ---- - -3D 场景下缩放画布 - -- [3D Graph Vis](/examples/feature/features/#webgl3d) - -3d zoom canvas - - diff --git a/packages/site/docs/apis/behaviors/ZoomCanvasOptions.en.md b/packages/site/docs/apis/behaviors/ZoomCanvasOptions.en.md deleted file mode 100644 index 4778c7b50a4..00000000000 --- a/packages/site/docs/apis/behaviors/ZoomCanvasOptions.en.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ZoomCanvas -order: 0 ---- - -Zoom canvas - -- [Level of Details](/en/examples/feature/features/#lodLevels) - -zoom canvas - - - - - - - - diff --git a/packages/site/docs/apis/behaviors/ZoomCanvasOptions.zh.md b/packages/site/docs/apis/behaviors/ZoomCanvasOptions.zh.md deleted file mode 100644 index 103a63098f8..00000000000 --- a/packages/site/docs/apis/behaviors/ZoomCanvasOptions.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ZoomCanvas 画布缩放 -order: 0 ---- - -缩放画布 - -- [信息分层](/examples/feature/features/#lodLevels) - -zoom canvas - - - - - - diff --git a/packages/site/docs/apis/data/ComboDisplayModel.en.md b/packages/site/docs/apis/data/ComboDisplayModel.en.md deleted file mode 100644 index f51fc7c604e..00000000000 --- a/packages/site/docs/apis/data/ComboDisplayModel.en.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ComboDisplayModel -order: 11 ---- - -ComboDisplayModel is the rendering data of Combo, which is obtained by [ComboModel](./ComboModel.en.md) through [data mapping](./DataIntro.en.md#mappers). ComboDisplayModel can only be accessed by G6. - - - -## data Required - -The data in ComboDisplayModelData is the result of mapping the ComboModel data through the mapper configuration specified on the graph instance ([specification.combo](../graph/Specification.en.md#combo)). It should contain all the contents of ComboModel along with additional shape style configurations. - - - - - - - -### keyShape - -**Type**: `ShapeStyle` - -The style configuration of the key shape of the Combo - -> The key shape of `'circle-combo'` is ['circle'](/apis/shape/circle-style-props); the key shape of `'rect-combo'` is ['rect'](/apis/shape/rect-style-props). - - - - - - - - - - - - - -:::info -The following attributes are inherited from [ComboModel](./ComboModel.en.md) -::: - - diff --git a/packages/site/docs/apis/data/ComboDisplayModel.zh.md b/packages/site/docs/apis/data/ComboDisplayModel.zh.md deleted file mode 100644 index 1a005290c12..00000000000 --- a/packages/site/docs/apis/data/ComboDisplayModel.zh.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ComboDisplayModel 渲染数据 -order: 11 ---- - -ComboDisplayModel 为 Combo 的渲染数据，由 [ComboModel](./ComboModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 - - - -## data 必须 - -基于 [ComboModel](./ComboModel.zh.md) 的内容额外加上了图形样式配置。 - - - - - - - -### keyShape - -**类型**：`ShapeStyle` - -主图形的样式配置 - -> `'circle-combo'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'rect-combo'` 的主图形是 ['rect'](/apis/shape/rect-style-props) - - - - - - - - - - - - - -:::info{title=提示} -下列属性继承自 [ComboModel](./ComboModel.zh.md) -::: - - diff --git a/packages/site/docs/apis/data/ComboModel.en.md b/packages/site/docs/apis/data/ComboModel.en.md deleted file mode 100644 index 80218751a34..00000000000 --- a/packages/site/docs/apis/data/ComboModel.en.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ComboModel -order: 10 ---- - -ComboModel is the internal combo data, which is obtained by [ComboUserModel](./ComboUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). - - - - - -## data Required - - - - diff --git a/packages/site/docs/apis/data/ComboModel.zh.md b/packages/site/docs/apis/data/ComboModel.zh.md deleted file mode 100644 index 708da8602b5..00000000000 --- a/packages/site/docs/apis/data/ComboModel.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ComboModel 内部数据 -order: 10 ---- - -ComboModel 为内部流转的 combo 数据，由 [ComboUserModel](./ComboUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。 - - - - - -## data 必须 - - - - diff --git a/packages/site/docs/apis/data/ComboUserModel.en.md b/packages/site/docs/apis/data/ComboUserModel.en.md deleted file mode 100644 index 4e4be98d311..00000000000 --- a/packages/site/docs/apis/data/ComboUserModel.en.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ComboUserModel -order: 9 ---- - -The `combos` part of the user input data. - -An example of a data item: - -```json -{ "id": "combo-1", "data": {} } -``` - - - -## data Required - -The Combo data - - - - diff --git a/packages/site/docs/apis/data/ComboUserModel.zh.md b/packages/site/docs/apis/data/ComboUserModel.zh.md deleted file mode 100644 index b797a9f6864..00000000000 --- a/packages/site/docs/apis/data/ComboUserModel.zh.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ComboUserModel 输入数据 -order: 9 ---- - -用户输入数据中的 `combos` 部分内容。 - -下面是一个数据项实例： - -```json -{ "id": "combo-1", "data": {} } -``` - - - -## data 必须 - -Combo 数据 - - - - diff --git a/packages/site/docs/apis/data/CustomTransform.en.md b/packages/site/docs/apis/data/CustomTransform.en.md deleted file mode 100644 index c74fd3d008b..00000000000 --- a/packages/site/docs/apis/data/CustomTransform.en.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Custom Data Processor -order: 12 ---- - -> Before proceeding with a custom data processor, please ensure you are familiar with the G6 data flow and structure. Related content can be found in the [Data Introduction Document](./DataIntro.en.md). - -Custom data processing involves three main steps: definition, registration, and usage. [Custom Data Processor DEMO](/en/examples/feature/features/#themeSwitch). - -## Definition - -A custom data processor is essentially a function that is responsible for converting user data into a format that can be understood and processed by G6 (inner data). - -**Type**: `CustomDataTransformFn` - -```typescript -type CustomDataTransformFn = ( - data: GraphDataChanges, - options: Record, - graphCore?: GraphCore, -) => GraphDataChanges; -``` - -`GraphDataChanges` is defined as follows: - -G6 automatically divides data changes into three parts based on the operation type: data to be added (`dataAdded`), updated (`dataUpdated`), and removed (`dataRemoved`). - -```typescript -type GraphData = { - nodes?: NodeUserModel[]; - edges?: EdgeUserModel[]; - combos?: ComboUserModel[]; -}; - -type GraphDataChanges = { - dataAdded: GraphData; - dataUpdated: GraphData; - dataRemoved: GraphData; -}; -``` - -Input data types refer to [NodeUserModel](./NodeUserModel.en.md), [EdgeUserModel](./EdgeUserModel.en.md) and [ComboUserModel](./ComboUserModel.en.md). - -Ensure that the data returned by your processor strictly adheres to the `GraphDataChanges` type definition to ensure seamless integration into the G6 data processing flow. - -## Registration - -In G6, you need to register your custom data processor to an extension point. - -```typescript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -// Register to use in instance creation or subsequent API calls -const ExtGraph = extend(BaseGraph, { - transforms: { - 'my-custom-data-transform': myCustomDataTransformFn, - }, -}); -``` - -## Usage - -After registration, you can use the custom data processor in graph instantiation or API calls. - -**Type**: `TransformsConfig` - -```typescript -// Data lifecycle stages -type DataLifecycleType = 'read' | 'changeData' | 'updateData' | 'addData' | 'removeData'; -type TransformsConfig = - | string[] - | { - type: string; - /** - * Determines the timing of the transform function's effectiveness, defaulting to only initialization - * `'all'` indicates activation at all data lifecycle stages, or you can specify one or more stages - */ - activeLifecycle: 'all' | DataLifecycleType | DataLifecycleType[]; - [param: string]: unknown; - }[] - | TransformerFn[]; -``` - -## Complete Example - -```typescript -const myCustomDataTransformFn: CustomDataTransformFn = ( - dataAUR: GraphDataChanges, - options: Record, - graphCore?: GraphCor, -) => { - const { dataAdded, dataUpdated, dataRemoved } = dataAUR; - - const processHandler = (data: GraphData, options: Record, graphCore?: GraphCore) => { - // ... processing logic - }; - - return { - dataAdded: processHandler(dataAdded, options, graphCore), - dataUpdated: processHandler(dataUpdated, options, graphCore), - dataRemoved: processHandler(dataRemoved, options, graphCore), - }; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'map-node-size': Extensions.MapNodeSize, - 'my-custom-data-transform': myCustomDataTransformFn, - }, -}); - -const graph = new ExtGraph({ - // ... other configurations - transforms: [ - 'map-node-size', - { - type: 'my-custom-data-transform', - activeLifecycle: ['read', 'changeData'], - // ...options - }, - ], -}); -``` diff --git a/packages/site/docs/apis/data/CustomTransform.zh.md b/packages/site/docs/apis/data/CustomTransform.zh.md deleted file mode 100644 index 8b0755fdc08..00000000000 --- a/packages/site/docs/apis/data/CustomTransform.zh.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 自定义数据处理器 -order: 12 ---- - -> 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](./DataIntro.zh.md) - -自定义数据处理器涉及以下三个主要步骤：定义、注册和使用。[自定义数据处理器 DEMO](/zh/examples/feature/features/#themeSwitch) - -## 定义 - -自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data) - -**类型**：`CustomDataTransformFn` - -```typescript -type CustomDataTransformFn = ( - data: GraphDataChanges, - options: Record, - graphCore?: GraphCore, -) => GraphDataChanges; -``` - -其中 `GraphDataChanges` 定义如下： - -G6 会根据操作类型，将数据变更自动划分为三个部分：待添加（`dataAdded`）、更新（`dataUpdated`）和删除（`dataRemoved`）数据。 - -```typescript -type GraphData = { - nodes?: NodeUserModel[]; - edges?: EdgeUserModel[]; - combos?: ComboUserModel[]; -}; - -type GraphDataChanges = { - dataAdded: GraphData; - dataUpdated: GraphData; - dataRemoved: GraphData; -}; -``` - -其中，输入数据类型参考 [NodeUserModel 输入数据](./NodeUserModel.zh.md)，[EdgeUserModel 输入数据](./EdgeUserModel.zh.md) 和 [ComboUserModel 输入数据](./ComboUserModel.zh.md) - -请确保您的处理器返回的数据严格遵守 `GraphDataChanges` 类型定义，以保证处理器能顺利嵌入 G6 的数据处理流程中。 - -## 注册 - -在 G6 中，您需要将自定义的数据处理器注册到扩展点。 - -```typescript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -// 注册后方可在实例化或后续 API 调用中使用 -const ExtGraph = extend(BaseGraph, { - transforms: { - 'my-custom-data-transform': myCustomDataTransformFn, - }, -}); -``` - -## 使用 - -注册完成后，您可以在图形实例化或 API 调用中使用自定义数据处理器。 - -**类型**：`TransformsConfig` - -```typescript -// 数据生命周期阶段 -type DataLifecycleType = 'read' | 'changeData' | 'updateData' | 'addData' | 'removeData'; -type TransformsConfig = - | string[] - | { - type: string; - /** - * 决定 transform 函数生效时机，默认只在初始化数据时生效 - * `'all'` 表示在所有数据生命周期阶段激活，也可以指定在一个或多个生命周期阶段 - */ - activeLifecycle: 'all' | DataLifecycleType | DataLifecycleType[]; - [param: string]: unknown; - }[] - | TransformerFn[]; -``` - -## 完整示例 - -```typescript -const myCustomDataTransformFn: CustomDataTransformFn = ( - dataAUR: GraphDataChanges, - options: Record, - graphCore?: GraphCor, -) => { - const { dataAdded, dataUpdated, dataRemoved } = dataAUR; - - const processHandler = (data: GraphData, options: Record, graphCore?: GraphCore) => { - // ... 处理逻辑 - }; - - return { - dataAdded: processHandler(dataAdded, options, graphCore), - dataUpdated: processHandler(dataUpdated, options, graphCore), - dataRemoved: processHandler(dataRemoved, options, graphCore), - }; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'map-node-size': Extensions.MapNodeSize, - 'my-custom-data-transform': myCustomDataTransformFn, - }, -}); - -const graph = new ExtGraph({ - // ...其他配置 - transforms: [ - 'map-node-size', - { - type: 'my-custom-data-transform', - activeLifecycle: ['read', 'changeData'], - // ...options - }, - ], -}); -``` diff --git a/packages/site/docs/apis/data/DataIntro.en.md b/packages/site/docs/apis/data/DataIntro.en.md deleted file mode 100644 index f5cdea05ee0..00000000000 --- a/packages/site/docs/apis/data/DataIntro.en.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Data Introduction -order: 0 ---- - -In G6 5.0, in order to better isolate data and control data mapping, the new specification for data flow is as follows: - -data process - -### User Data - -The original data input by the user is a collection of nodes, edges, and combos, which can be graph data [GraphData](./GraphData.en.md) or tree data [TreeData](./TreeData.en.md). - -There are three ways to input data: - -1. **Passing configuration when instantiating the graph** - -The graph is automatically rendered after instantiation. - -```js -const data = { - nodes: [], // Node collection - edges: [], // Edge collection - combos: [], // Combo collection -}; -const graph = new Graph({ - // ... other configurations - data, -}); -``` - -2. **Calling API to input data** - -The graph reads and renders the data. - -```js -graph.read(data); -``` - -3. **Calling API to update data** - -- Updating the entire data [changeData](../graph/Graph.en.md#changedata) - -```js -graph.changeData(data); -``` - -- Adding data [addData](../graph/Graph.en.md#adddata) - -```js -graph.addData('node', [ - { id: 'node-1', data: {} }, - { id: 'node-2', data: {} }, -]); -graph.addData('edge', [{ id: 'edge-1', source: 'node-2', target: 'node-1', data: {} }]); -``` - -- Updating existing data [updateData](../graph//Graph.en.md#updatedata) - -```js -const nodes = [ - { id: 'node-1', data: { xx: 1 } }, - { id: 'node-2', data: { xx: 2 } }, -]; -// Update the above properties of 'node-1' and 'node-2' -graph.updateData('node', nodes); -``` - -- Removing partial data [removeData](../graph//Graph.en.md#removedata) - -```js -graph.removeData('node', ['node-1', 'node-2']); -``` - -### Transforms - -Transforms are used to transform and process user data, such as attribute field transformation, data filtering, data aggregation, etc. Transformers can be customized according to actual needs to convert input data into internal data formats suitable for subsequent processing. - -Use the `transforms` field in the graph configuration to configure the transformers. `transforms` accepts an array of transformers. When G6 reads user data, it will execute data transformation according to the order of transformers in `transforms`, and the result of the previous transformer will be used as the input of the next transformer. [Transforms DEMO](/en/examples/feature/features/#rendererSwitch). - -### Inner Data - -The inner data is the data obtained after **data transformation**, which is used as the input for subsequent data mapping, and is also used for other data processing and operations. - -:::warning -After G6 reads user data, subsequent users will get and modify the inner data. -::: - -### Mappers - -Mappers are used to map internal data to visual channels. They map internal data to specific node styles, edge styles, labels, and other visual properties according to predefined rules and configurations. Mappers support JSON format configuration as well as functional configuration. - -Users configure the node, edge, and combo mapping rules through the [node](../graph/Specification.en.md#node), [edge](../graph/Specification.en.md#edge), and [combo](../graph/Specification.en.md#combo) properties in the graph configuration. [Mappers DEMO](/en/examples/feature/features/#lodLevels) - -### Display Data - -The final data used for rendering generated by Mappers mapping, which contains the position of the node, the style of each shape, etc., is used for the final graph rendering and display. - -:::warning -Only G6 can access the rendering data, and users cannot directly get and modify the rendering data. -::: diff --git a/packages/site/docs/apis/data/DataIntro.zh.md b/packages/site/docs/apis/data/DataIntro.zh.md deleted file mode 100644 index fc4cee15f28..00000000000 --- a/packages/site/docs/apis/data/DataIntro.zh.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: 数据使用简介 -order: 0 ---- - -在 G6 5.0 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下： - -data process - -### User Data 用户输入数据 - -用户输入的原始数据，是节点、边、群组的集合，可以是图数据[GraphData](./GraphData.zh.md)或树数据[TreeData](./TreeData.zh.md)。 - -数据输入的方式有： - -1. **图实例化时传入** - -实例化完成后自动渲染图。 - -```js -const data = { - nodes: [], // 节点集 - edges: [], // 边集 - combos: [], // 群组集 -}; -const graph = new Graph({ - // ... 其他配置 - data, -}); -``` - -2. **调用 API 传入数据** - -图实例读取并渲染数据。 - -```js -graph.read(data); -``` - -3. **调用 API 更新数据** - -- 更新全量数据 [changeData](../graph//Graph.zh.md#changedata) - -```js -graph.changeData(data); -``` - -- 新增数据 [addData](../graph//Graph.zh.md#adddata) - -```js -graph.addData('node', [ - { id: 'node-1', data: {} }, - { id: 'node-2', data: {} }, -]); -graph.addData('edge', [{ id: 'edge-1', source: 'node-2', target: 'node-1', data: {} }]); -``` - -- 更新部分已有数据 [updateData](../graph/Graph.zh.md#updatedata) - -```js -const nodes = [ - { id: 'node-1', data: { xx: 1 } }, - { id: 'node-2', data: { xx: 2 } }, -]; -// 将更新已存在的 node-1 和 node-2 的上述属性 -graph.updateData('node', nodes); -``` - -- 删除部分数据 [removeData](../graph/Graph.zh.md#removedata) - -```js -graph.removeData('node', ['node-1', 'node-2']); -``` - -### Transforms 数据转换 - -对用户数据进行转换和处理，例如属性字段转换、数据过滤、数据聚合等。转换器可以根据实际需求进行自定义配置，以便将输入数据转换为适合后续处理的内部数据格式。 - -使用图配置中的 `transforms` 字段来配置转换器。`transforms` 接受转换器数组，G6 在读取用户数据时，将按照 `transforms` 中转换器的顺序执行数据转换，前一个转换器的结果将作为下一个转换器的输入。[Transforms DEMO](/examples/feature/features/#rendererSwitch). - -### Inner Data 内部数据 - -内部数据是在**数据转换**后得到的数据，用作后续数据映射的输入，也用于其他数据处理和操作。 - -:::warning{title=注意} -在 G6 读取用户数据后，后续用户获取和修改的都是内部数据 -::: - -### Mappers 数据映射 - -Mappers 用于将内部数据映射到视觉通道。它们根据预定义的规则和配置，将内部数据映射到特定的节点样式、边样式、标签等可视化属性上。Mappers 支持 JSON 格式的配置，也支持函数式的配置。 - -用户通过图配置中的 [node](../graph/Specification.zh.md#node)、[edge](../graph/Specification.zh.md#edge)、[combo](../graph/Specification.zh.md#combo) 属性来配置节点、边、群组的映射规则。[Mappers DEMO](/zh/examples/feature/features/#lodLevels) - -### Display Data 渲染数据 - -经过 Mappers 映射生成的最终用于渲染的数据，它包含了节点的位置、各个图形的样式等，用于最终的图形渲染和展示。 - -:::warning{title=注意} -只有 G6 可以访问渲染数据，用户无法直接获取和修改渲染数据 -::: diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.en.md b/packages/site/docs/apis/data/EdgeDisplayModel.en.md deleted file mode 100644 index 15a5f4146c7..00000000000 --- a/packages/site/docs/apis/data/EdgeDisplayModel.en.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: EdgeDisplayModel -order: 8 ---- - -EdgeDisplayModel is the rendering data of Edge, which is obtained by [EdgeModel](./EdgeModel.en.md) through [data mapping](./DataIntro.en.md#mappers). EdgeDisplayModel can only be accessed by G6. - - - -## source Required - -**Type**: `string | number` - -The ID of the source node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. - -## target Required - -**Type**: `string | number` - -The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. - -## data Required - -The data in EdgeDisplayModelData is the result of the EdgeModel being mapped through the mapper ([specification.edge](../graph/Specification.en.md#edge)) configured on the Graph instance. It should store all the contents of the EdgeModel, as well as many shape style configurations. - - - - - - - -### keyShape - -The style configuration of the key shape of the edge. The key shape of the edge is the overall path shape of the edge. - -**Type**: `ShapeStyle`, the shape style configuration of the key shape depends on the different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [LineStyleProps](/en/apis/shape/line-style-props); the key shape of `'cubic-edge'` is `'path'`, please refer to [PathStyleProps](/en/apis/shape/path-style-props). - - - - - - - - - - - -:::info -The following attributes are inherited from [EdgeModel](./EdgeModel.en.md) -::: - - diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md b/packages/site/docs/apis/data/EdgeDisplayModel.zh.md deleted file mode 100644 index 3cf15668829..00000000000 --- a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: EdgeDisplayModel 渲染数据 -order: 8 ---- - -EdgeDisplayModel 为边的渲染数据，由 [EdgeModel](./EdgeModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 - - - -## source 必须 - -边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -**类型**：`string | number` - -## target 必须 - -边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -**类型**：`string | number` - -## data 必须 - -基于 [EdgeModel](./EdgeModel.zh.md) 的内容额外加上了图形样式配置。 - - - - - - - -### keyShape - -**类型**：`ShapeStyle` - -> `'line-edge'` 的主图形是 ['line'](/apis/shape/line-style-props)；`'cubic-edge'` 的主图形是 ['path'](/apis/shape/path-style-props) - -边主图形的样式配置。边的主图形是边的路径图形 - - - - - - - - - - - -:::info{title=提示} -下列属性继承自 [EdgeModel](./EdgeModel.zh.md) -::: - - diff --git a/packages/site/docs/apis/data/EdgeModel.en.md b/packages/site/docs/apis/data/EdgeModel.en.md deleted file mode 100644 index efa66c9572b..00000000000 --- a/packages/site/docs/apis/data/EdgeModel.en.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: EdgeModel -order: 7 ---- - -EdgeModel is the internal edge data, which is obtained by [EdgeUserModel](./EdgeUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). - - - - - -## source Required - -**Type**: `string | number` - -The ID of the source node of the edge, which should correspond to an item in `nodes`. Otherwise, the edge data will not be added to the graph. - -## target Required - -**Type**: `string | number` - -The ID of the target node of the edge, which should correspond to an item in nodes. Otherwise, the edge data will not be added to the graph. - -## data Required - - - - diff --git a/packages/site/docs/apis/data/EdgeModel.zh.md b/packages/site/docs/apis/data/EdgeModel.zh.md deleted file mode 100644 index a5fd28c4953..00000000000 --- a/packages/site/docs/apis/data/EdgeModel.zh.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: EdgeModel 内部数据 -order: 7 ---- - -EdgeModel 为内部流转的边数据，由 [EdgeUserModel](./EdgeUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。 - - - - - -## source 必须 - -**类型**：`string | number` - -边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -## target 必须 - -**类型**：`string | number` - -边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -## data 必须 - - - - diff --git a/packages/site/docs/apis/data/EdgeUserModel.en.md b/packages/site/docs/apis/data/EdgeUserModel.en.md deleted file mode 100644 index 3862fc88011..00000000000 --- a/packages/site/docs/apis/data/EdgeUserModel.en.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: EdgeUserModel -order: 6 ---- - -The `edges` part of the user input data. - -An example of a data item: - -```json -{ - "id": "edge-1", - "source": "node-1", - "target": "node-2", - "data": {} -} -``` - - - -## source Required - -**Type**: `string | number` - -The ID of the source node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. - -## target Required - -**Type**: `string | number` - -The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. - -## data Required - -The edge data. - - - - diff --git a/packages/site/docs/apis/data/EdgeUserModel.zh.md b/packages/site/docs/apis/data/EdgeUserModel.zh.md deleted file mode 100644 index 7df7fb8879f..00000000000 --- a/packages/site/docs/apis/data/EdgeUserModel.zh.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: EdgeUserModel 输入数据 -order: 6 ---- - -用户输入数据中的 `edges` 部分内容。 - -下面是一个数据项实例： - -```json -{ - "id": "edge-1", - "source": "node-1", - "target": "node-2", - "data": {} -} -``` - - - -## source 必须 - -边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -**类型**：`string | number` - -## target 必须 - -边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 - -**类型**：`string | number` - -## data 必须 - -边数据 - - - - diff --git a/packages/site/docs/apis/data/GraphData.en.md b/packages/site/docs/apis/data/GraphData.en.md deleted file mode 100644 index dd607e9e9fe..00000000000 --- a/packages/site/docs/apis/data/GraphData.en.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: GraphData -order: 1 ---- - -Graph data (GraphData) is one of the data types received by Graph, which contains a collection of nodes, edges, and combos. - -An example of a graph data is as follows: - -```json -{ - "nodes": [ - { "id": "node-1", "data": { "parentId": "combo-1" } }, - { "id": "node-2", "data": { "parentId": "combo-1" } } - ], - "edges": [{ "id": "edge-1", "source": "node-1", "target": "node-2" }], - "combos": [{ "id": "combo-1", "data": {} }] -} -``` - -## Properties - -### nodes Required - -**Type**: `NodeUserModel[]` - -- [NodeUserModel](./NodeUserModel.en.md) - -Nodes collection - -### edges Required - -**Type**: `EdgeUserModel` - -- [EdgeUserModel](./EdgeUserModel.en.md) - -Edges collection - -### combos - -**Type**: `ComboUserModel` - -- [ComboUserModel](./ComboUserModel.en.md) - -Combos collection diff --git a/packages/site/docs/apis/data/GraphData.zh.md b/packages/site/docs/apis/data/GraphData.zh.md deleted file mode 100644 index 1a73dafd6c3..00000000000 --- a/packages/site/docs/apis/data/GraphData.zh.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: GraphData -order: 1 ---- - -图数据（GraphData）是 Graph 接收的数据类型之一，包含节点、边、群组 的集合。 - -一个图数据的示例如下： - -```json -{ - "nodes": [ - { "id": "node-1", "data": { "parentId": "combo-1" } }, - { "id": "node-2", "data": { "parentId": "combo-1" } } - ], - "edges": [{ "id": "edge-1", "source": "node-1", "target": "node-2" }], - "combos": [{ "id": "combo-1", "data": {} }] -} -``` - -## 属性 - -### nodes 必须 - -**类型**：`NodeUserModel` - -- [NodeUserModel](./NodeUserModel.zh.md) - -节点集 - -### edges 必须 - -**类型**：`EdgeUserModel` - -- [EdgeUserModel](./EdgeUserModel.zh.md) - -边集 - -### combos - -**类型**：`ComboUserModel` - -- [ComboUserModel](./ComboUserModel.zh.md) - -群组集 diff --git a/packages/site/docs/apis/data/NodeDisplayModel.en.md b/packages/site/docs/apis/data/NodeDisplayModel.en.md deleted file mode 100644 index 3b76504d9b7..00000000000 --- a/packages/site/docs/apis/data/NodeDisplayModel.en.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: NodeDisplayModel -order: 5 ---- - -NodeDisplayModel is the rendering data of Node, which is obtained by [NodeModel](./NodeModel.en.md) through [data mapping](./DataIntro.en.md#mappers). NodeDisplayModel can only be accessed by G6. - - - -## data Required - -NodeDisplayModelData adds graphic style configuration on the basis of [NodeModel](./NodeModel.en.md). - - - - - - - -### keyShape - -**Type**: `ShapeStyle` - -> Which varies depending on the main shape. For example, the main shape of `'circle-node'` is `'circle'`, refer to [Circle Graphic Style](/en/apis/shape/circle-style-props); the main shape of `'image-node'` is `'image'`, refer to [Image Graphic Style](/en/apis/shape/image-style-props). - -Configuration of the main shape style of the node. The main shape of a node represents the primary shape of the node and is also used to calculate the position where edges connect. - - - - - - - - - - - - - - - -:::info -The following attributes are inherited from [NodeModel](./NodeModel.en.md) -::: - - diff --git a/packages/site/docs/apis/data/NodeDisplayModel.zh.md b/packages/site/docs/apis/data/NodeDisplayModel.zh.md deleted file mode 100644 index fab89a6d5bc..00000000000 --- a/packages/site/docs/apis/data/NodeDisplayModel.zh.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: NodeDisplayModel 渲染数据 -order: 5 ---- - -NodeDisplayModel（节点的渲染数据）是 [NodeModel](./NodeModel.zh.md) 经过[数据映射](./DataIntro.zh.md#transforms-数据转换)后的结果，该数据仅能被 G6 访问。 - - - -## data 必须 - -基于 [NodeModel](./NodeModel.zh.md) 的内容额外加上了图形样式配置。 - - - - - - - -### keyShape - -**类型**：`ShapeStyleProps` - -> `'circle-node'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'image-node'` 的主图形是 ['image'](/apis/shape/image-style-props) - -节点主图形的样式配置。节点的主图形表达了节点的主要形状。还用于计算边的连入位置。 - - - - - - - - - - - - - - - -:::info{title=提示} -下列属性继承自 [NodeModel](./NodeModel.zh.md) -::: - - diff --git a/packages/site/docs/apis/data/NodeModel.en.md b/packages/site/docs/apis/data/NodeModel.en.md deleted file mode 100644 index 0cdf3cee0b4..00000000000 --- a/packages/site/docs/apis/data/NodeModel.en.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: NodeModel -order: 4 ---- - -NodeModel is the node data that flows internally, which is obtained by [NodeUserModel](./NodeUserModel.en.md) through [data transforms](./DataIntro.en.md#transforms). - - - - - -## data Required - - - - diff --git a/packages/site/docs/apis/data/NodeModel.zh.md b/packages/site/docs/apis/data/NodeModel.zh.md deleted file mode 100644 index 798230dbe24..00000000000 --- a/packages/site/docs/apis/data/NodeModel.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: NodeModel 内部数据 -order: 4 ---- - -NodeModel 为内部流转的节点数据，由 [NodeUserModel](./NodeUserModel.zh.md) 经过[数据转换](/apis/data/data-intro#transforms-数据转换)后得到。 - - - - - -## data 必须 - - - - diff --git a/packages/site/docs/apis/data/NodeUserModel.en.md b/packages/site/docs/apis/data/NodeUserModel.en.md deleted file mode 100644 index de040e6b5d0..00000000000 --- a/packages/site/docs/apis/data/NodeUserModel.en.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: NodeUserModel -order: 3 ---- - -The `nodes` part of the user input data. - -An example of a data items: - -```json -[ - { "id": "node-1", "data": {} }, - { "id": "node-2", "data": {} } -] -``` - - - -## data Required - -The data of the node - - - - diff --git a/packages/site/docs/apis/data/NodeUserModel.zh.md b/packages/site/docs/apis/data/NodeUserModel.zh.md deleted file mode 100644 index 609433d1d6b..00000000000 --- a/packages/site/docs/apis/data/NodeUserModel.zh.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: NodeUserModel 输入数据 -order: 3 ---- - -用户输入数据中的 `nodes` 部分内容。 - -下面是数据实例： - -```json -[ - { "id": "node-1", "data": {} }, - { "id": "node-2", "data": {} } -] -``` - - - -## data 必须 - -节点数据 - - - - diff --git a/packages/site/docs/apis/data/TreeData.en.md b/packages/site/docs/apis/data/TreeData.en.md deleted file mode 100644 index 06898d90c1f..00000000000 --- a/packages/site/docs/apis/data/TreeData.en.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: TreeData -order: 2 ---- - -A tree is a special graph, that is, a graph without a cycle. Tree data (TreeData) does not explicitly define edges, but implicitly represents edges through nested `children`, that is, there is an edge between parent and child nodes. - -An example of a tree data is as follows: - -```json -{ - "id": "root", - "data": {}, - "children": [ - { - "id": "node-1", - "data": {}, - "children": [ - { - "id": "node-1-1", - "data": {}, - "children": [ - { - "id": "node-1-1-1", - "data": {}, - "children": [] - } - ] - } - ] - } - ] -} -``` - -G6 5.0 can read `TreeData`, `TreeData[]`, that is, **tree** and **forest**. - -## Properties - - - -### data Required - -**Type**: [NodeUserModelData](./NodeUserModelData.en.md); - -The data of the node - -### children - -**Type**: `TreeData` - -The array of child nodes of the current node diff --git a/packages/site/docs/apis/data/TreeData.zh.md b/packages/site/docs/apis/data/TreeData.zh.md deleted file mode 100644 index 89552e5b5af..00000000000 --- a/packages/site/docs/apis/data/TreeData.zh.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: TreeData -order: 2 ---- - -树是一种特殊的图，即不存在环的图。树数据（TreeData）不显式定义边，而是通过嵌套的 `children` 隐式表示边，即父子节点之间存在一条边。 - -一个树数据的示例如下： - -```json -{ - "id": "root", - "data": {}, - "children": [ - { - "id": "node-1", - "data": {}, - "children": [ - { - "id": "node-1-1", - "data": {}, - "children": [ - { - "id": "node-1-1-1", - "data": {}, - "children": [] - } - ] - } - ] - } - ] -} -``` - -G6 5.0 可以读取 `TreeData`、`TreeData[]`，即**树**和**森林**。 - -## 属性 - - - -### data 必须 - -**类型**：[NodeUserModelData](./NodeUserModel.zh.md#nodeusermodeldatatype) - -节点数据 - -### children - -**类型**：`TreeData` - -当前节点的子节点数组 diff --git a/packages/site/docs/apis/data/node.en.md b/packages/site/docs/apis/data/node.en.md new file mode 100644 index 00000000000..d2338051586 --- /dev/null +++ b/packages/site/docs/apis/data/node.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)NodeData +--- \ No newline at end of file diff --git a/packages/site/docs/apis/data/node.zh.md b/packages/site/docs/apis/data/node.zh.md new file mode 100644 index 00000000000..be7ef267770 --- /dev/null +++ b/packages/site/docs/apis/data/node.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)NodeData 节点数据 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/combo/default.en.md b/packages/site/docs/apis/element/combo/default.en.md new file mode 100644 index 00000000000..95d8bccd515 --- /dev/null +++ b/packages/site/docs/apis/element/combo/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Combo +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/combo/default.zh.md b/packages/site/docs/apis/element/combo/default.zh.md new file mode 100644 index 00000000000..f3f79947293 --- /dev/null +++ b/packages/site/docs/apis/element/combo/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)组合 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/edge/default.en.md b/packages/site/docs/apis/element/edge/default.en.md new file mode 100644 index 00000000000..cc36d0c6b32 --- /dev/null +++ b/packages/site/docs/apis/element/edge/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Edge +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/edge/default.zh.md b/packages/site/docs/apis/element/edge/default.zh.md new file mode 100644 index 00000000000..4789e803b77 --- /dev/null +++ b/packages/site/docs/apis/element/edge/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)边 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/node/default.en.md b/packages/site/docs/apis/element/node/default.en.md new file mode 100644 index 00000000000..39fe98876dd --- /dev/null +++ b/packages/site/docs/apis/element/node/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Node +--- \ No newline at end of file diff --git a/packages/site/docs/apis/element/node/default.zh.md b/packages/site/docs/apis/element/node/default.zh.md new file mode 100644 index 00000000000..234adb2da3c --- /dev/null +++ b/packages/site/docs/apis/element/node/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)节点 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/export/default.en.md b/packages/site/docs/apis/export/default.en.md new file mode 100644 index 00000000000..5f08758342c --- /dev/null +++ b/packages/site/docs/apis/export/default.en.md @@ -0,0 +1,3 @@ +--- +title: register +--- \ No newline at end of file diff --git a/packages/site/docs/apis/export/default.zh.md b/packages/site/docs/apis/export/default.zh.md new file mode 100644 index 00000000000..5f08758342c --- /dev/null +++ b/packages/site/docs/apis/export/default.zh.md @@ -0,0 +1,3 @@ +--- +title: register +--- \ No newline at end of file diff --git a/packages/site/docs/apis/extension/3d.en.md b/packages/site/docs/apis/extension/3d.en.md new file mode 100644 index 00000000000..6edad13044b --- /dev/null +++ b/packages/site/docs/apis/extension/3d.en.md @@ -0,0 +1,3 @@ +--- +title: g6-extension-3d +--- \ No newline at end of file diff --git a/packages/site/docs/apis/extension/3d.zh.md b/packages/site/docs/apis/extension/3d.zh.md new file mode 100644 index 00000000000..6edad13044b --- /dev/null +++ b/packages/site/docs/apis/extension/3d.zh.md @@ -0,0 +1,3 @@ +--- +title: g6-extension-3d +--- \ No newline at end of file diff --git a/packages/site/docs/apis/extension/react.en.md b/packages/site/docs/apis/extension/react.en.md new file mode 100644 index 00000000000..a9c422c30b9 --- /dev/null +++ b/packages/site/docs/apis/extension/react.en.md @@ -0,0 +1,3 @@ +--- +title: g6-extension-react +--- \ No newline at end of file diff --git a/packages/site/docs/apis/extension/react.zh.md b/packages/site/docs/apis/extension/react.zh.md new file mode 100644 index 00000000000..a9c422c30b9 --- /dev/null +++ b/packages/site/docs/apis/extension/react.zh.md @@ -0,0 +1,3 @@ +--- +title: g6-extension-react +--- \ No newline at end of file diff --git a/packages/site/docs/apis/function/function.en.md b/packages/site/docs/apis/function/function.en.md new file mode 100644 index 00000000000..4cb8661a795 --- /dev/null +++ b/packages/site/docs/apis/function/function.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Function +--- \ No newline at end of file diff --git a/packages/site/docs/apis/function/function.zh.md b/packages/site/docs/apis/function/function.zh.md new file mode 100644 index 00000000000..02a65f1f237 --- /dev/null +++ b/packages/site/docs/apis/function/function.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)函数 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/graph/Graph.en.md b/packages/site/docs/apis/graph/Graph.en.md deleted file mode 100644 index fa96e158be7..00000000000 --- a/packages/site/docs/apis/graph/Graph.en.md +++ /dev/null @@ -1,856 +0,0 @@ ---- -title: Graph Methods -order: 1 ---- - -## Graph Configurations (Specification) - -### getSpecification - -**Type**: `() => Specification` - -- [Specification](Specification.en.md) - -Get a copy of the current graph configuration spec - -### updateSpecification - -**Type**: `(spec: Specification) => Specification` - -- [Specification](Specification.en.md) - -Update the current graph configuration spec - -### updateTheme - -**Type**: `(theme: ThemeOptionsOf) => void` - -Update the theme section in the current graph configuration spec - -### updateMapper - -**Type**: `(type: ITEM_TYPE, mapper: NodeMapper | EdgeMapper | ComboMapper) => void` - -Update the mapper for nodes/edges/combos and re-render the related items - -### updateStateConfig - -**Type**: `UpdateStateConfig` - -
- - UpdateStateConfig - - -```ts -type UpdateStateConfig = ( - /** The type of items to update */ - itemType: ITEM_TYPE, - /** The updated state style configuration */ - stateConfig: - | { [stateName: string]: (data: NodeModel) => NodeDisplayModel | NodeShapesEncode } - | { [stateName: string]: (data: EdgeModel) => EdgeDisplayModel | EdgeShapesEncode } - | { [stateName: string]: (data: ComboModel) => ComboDisplayModel | ComboShapesEncode }, - /** 'replace' means replacing directly, 'mergeReplace' means merging with the original mapper and then replacing */ - updateType?: 'replace' | 'mergeReplace', -) => void; -``` - -
- -Update the state style configuration for nodes/edges/combos and re-render the items in the corresponding states - -## Data - -### read - -**Type**: `(data: GraphData) => void` - -- [GraphData](GraphData.en.md) - -Read and render the data for the first time - -### addData - -**Type**: `AddData` - -
- - AddData - - -```typescript -type AddData = ( - /** The type of items to add. This means that only one type of item can be added at a time. It is recommended to add nodes first and then add edges to avoid adding edges when the corresponding nodes do not exist */ - itemType: ITEM_TYPE, - /** The user data to add, which can be a single data or an array */ - model: NodeUserModel | EdgeUserModel | ComboUserModel | NodeUserModel[] | EdgeUserModel[] | ComboUserModel[], -) => /** The added data */ -NodeModel | EdgeModel | ComboModel | NodeModel[] | EdgeModel[] | ComboModel[]; -``` - -
- -Add data of a specific type - -### changeData - -**Type**: `(data: GraphData, type: 'replace' | 'mergeReplace') => void` - -Replace the data completely - -- `'replace'`: completely discarding the original data and using the new data - -- `'mergeReplace'`: if the new data contains nodes/edges/combos with certain ids that already exist in the canvas, the original data will be merged with the corresponding data and then replaced by the new data - -### updateData - -**Type**: `UpdateData` - -
- - UpdateData - - -```typescript -type UpdateData = ( - /** The type of items to update. Only one type of item can be updated at a time */ - itemType: ITEM_TYPE, - /** The data to update. It can be a single item or an array */ - model: - | Partial - | Partial - | Partial[] | Partial[] | Partial[]>, -) => /** The updated data */ -NodeModel | EdgeModel | ComboModel | NodeModel[] | EdgeModel[] | ComboModel[]; -``` - -
- -- [NodeModel](../data/NodeModel.en.md) - -- [NodeUserModel](../data/NodeUserModel.en.md) - -- [EdgeModel](../data/EdgeModel.en.md) - -- [EdgeUserModel](../data/EdgeUserModel.en.md) - -- [ComboModel](../data/ComboModel.en.md) - -- [ComboUserModel](../data/ComboUserModel.en.md) - -Update partial data of a specific type - -### removeData - -**Type**: `(itemType: ITEM_TYPE, id: ID | ID[]) => void` - -Remove one or more items of the same type - -### getAllNodesData - -**Type**: `() => NodeModel[]` - -- [NodeModel](../data/NodeModel.en.md) - -Get all node data (inner model) - -### getAllEdgesData - -**Type**: `() => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.en.md) - -Get all edge data (inner model) - -### getAllCombosData - -**Type**: `() => ComboModel[]` - -- [ComboModel](../data/ComboModel.en.md) - -Get all combo data (inner model) - -### getNodeData - -**Type**: `(condition: Function | ID) => NodeModel` - -- [NodeModel](../data/NodeModel.en.md) - -Get node data (inner model) with the specified id or condition - -### getEdgeData - -**Type**: `(condition: Function | ID) => EdgeModel` - -- [EdgeModel](../data/EdgeModel.en.md) - -Get edge data (inner model) with the specified id or condition - -### getComboData - -**Type**: `(condition: Function | ID) => ComboModel` - -- [ComboModel](../data/ComboModel.en.md) - -Get combo data (inner model) with the specified id or condition - -### getNeighborNodesData - -**Type**: `(nodeId: ID, direction?: 'both' | 'in' | 'out') => NodeModel[]` - -- [NodeModel](../data/NodeModel.en.md) - -Get the one-hop neighbor node data (inner model) of the specified node - -### getRelatedEdgesData - -**Type**: `(nodeId: ID, direction?: 'both' | 'in' | 'out') => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.en.md) - -Get the one-hop neighbor edge data (inner model) of the specified node - -### getNearEdgesData - -**Type**: `(nodeId: ID) => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.en.md) - -Get the edge data (inner model) related to the specified node - -### updateNodePosition - -**Type**: `UpdateNodePosition` - -
- - UpdateNodePosition - - -```ts -type UpdateNodePosition = ( - /** The configuration options for updating, each data contains the node id and data, including x and y information */ - models: Partial | Partial[], - /** Whether to update ancestor combo at the same time */ - upsertAncestors?: boolean, - /** Whether to disable animation */ - disableAnimate?: boolean, - /** Callback function after the position update is complete. The rendering of position update may be asynchronous, and this callback can be used for post-update logic */ - callback?: (model: NodeModel, canceled?: boolean) => void, -) => NodeModel | NodeModel[]; -``` - -
- -- [NodeModel](../data/NodeModel.en.md) - -- [NodeUserModel](../data/NodeUserModel.en.md) - -Update the position of a single or multiple nodes. This API does not update other styles passed in, in order to achieve better performance in position updates - -### clear - -**Type**: `() => void` - -Clear the graph content. - -## Renderer - -### changeRenderer - -**Type**: `(type: 'canvas' | 'webgl' | 'svg' | 'webgl-3d') => void` - -Switch the renderer at runtime. - -## Item - -### findIdByState - -**Type**: `(itemType: ITEM_TYPE, state: string, value?: string | boolean, additionalFilter?: (model: NodeModel | EdgeModel | ComboModel) => boolean) => ID[]` - -- [NodeModel](../data/NodeModel.en.md) - -- [EdgeModel](../data/EdgeModel.en.md) - -- [ComboModel](../data/ComboModel.en.md) - -Get a list of item IDs with the specified state and type - -### getItemAllStates - -**Type**: `(id: ID) => string[]` - -Get all the state names with a value of `true` for the specified item - -### getItemState - -**Type**: `(id: ID, state: string) => string | boolean` - -Get the value of a specified state for a specified item - -### setItemState - -**Type**: `(ids: ID | ID[], state: string, value: boolean) => void` - -Set the state of a single or multiple items - -### clearItemState - -**Type**: `(ids: ID | ID[], states?: string[]) => void` - -Clear the state of specified single or multiple items - -### showItem - -**Type**: `(ids: ID | ID[], disableAnimate?: boolean) => void` - -Show a single or multiple items. Corresponds to [hideItem](#hideitem) - -### hideItem - -**Type**: `(ids: ID | ID[], disableAnimate?: boolean) => void` - -Hide a single or multiple items. Corresponds to [showItem](#showitem) - -### getItemVisible - -**Type**: `(id: ID) => boolean` - -Get the visibility of a specified item - -### frontItem - -**Type**: `(ids: ID | ID[]) => void` - -Move the specified single or multiple items to the front layer. Note that the layer of nodes is always higher than that of edges - -### backItem - -**Type**: `(ids: ID | ID[]) => void` - -Move the specified single or multiple items to the back layer. Note that the layer of nodes is always higher than that of edges - -## Combo - -### addCombo - -**Type**: `(model: ComboUserModel, childrenIds: ID[]) => ComboModel` - -- [ComboModel](../data/ComboModel.en.md) - -- [ComboUserModel](../data/ComboUserModel.en.md) - -Add a new combo and update the specified child nodes by moving them from the original parent combo to the new combo - -Essentially, it is addData, but with some adjustments to the Combo hierarchy tree based on the added combo data - -### collapseCombo - -**Type**: `(comboIds: ID | ID[]) => void` - -Collapse the specified single or multiple combos. Corresponds to [expandCombo](#expandCombo) - -### expandCombo - -**Type**: `(comboIds: ID | ID[]) => void` - -Expand the specified single or multiple combos. Corresponds to [collapseCombo](#collapseCombo) - -### moveCombo - -**Type**: `MoveCombo` - -
- - MoveCombo - - -```ts -type MoveCombo = ( - /** The ID or IDs of the combos to be updated */ - ids: ID[], - /** The relative distance to move on the x-axis */ - dx: number, - /** The relative distance to move on the y-axis */ - dy: number, - /** Whether to update the ancestor combos as well */ - upsertAncestors?: boolean, - /** Callback function after the update is complete */ - callback?: (model: ComboModel, canceled?: boolean) => void, -) => /** The updated Combo data (inner model) */ -ComboModel[]; -``` - -
- -- [ComboModel](../data/ComboModel.en.md) - -Move a single or multiple combos by a relative distance (dx, dy). - -This API will not update other styles to improve the performance of updating the position. In fact, since the position of a combo is determined by the distribution and position of its internal child items, this API actually updates the position of the successor items of the specified combo to affect the combo and achieve the purpose of moving the combo, rather than directly updating the position of the combo - -### updateComboPosition - -**Type**: `UpdateComboPosition` - -
- - UpdateComboPosition - - -```ts -type UpdateComboPosition = ( - /** The configuration options for updating, each data contains the combo id and data, including x and y information */ - models: Partial[]>, - /** Whether to update ancestor combo at the same time */ - upsertAncestors?: boolean, - /** Whether to disable animation */ - disableAnimate?: boolean, - /** Callback function after the position update is complete. */ - callback?: (model: ComboModel) => void, -) => /** The updated Combo data (inner model) */ -ComboModel | ComboModel[]; -``` - -
- -- [ComboModel](../data/ComboModel.en.md) - -- [ComboUserModel](../data/ComboUserModel.en.md) - -Update the position of a single or multiple combos to the specified position (x, y). Similar to the corresponding API [updateNodePosition](#updatenodeposition) for nodes - -### getComboChildrenData - -**Type**: `(comboId: ID) => ComboModel[]` - -- [ComboModel](../data/ComboModel.en.md) - -Gets the data of the child items (nodes/combos) of a Combo (inner model) - -## Layout - -### layout - -**Type**: `(options?: LayoutOptions, disableAnimate?: boolean) => Promise` - -Performs layout - -- If no parameters are passed, the layout is re-executed according to the layout configuration in the spec of the graph instance. - -- If parameters are passed, the layout configuration of the graph is updated and the layout is re-executed - -### stopLayout - -**Type**: `() => void` - -Stops the layout - -It is suitable for layouts with iterative animations, such as `'force'`, which stops the iteration of force-directed layout. It is generally used to manually stop iterative animations when the layout iteration time is too long, for example, by calling it in the click event listener of the canvas/node - -## Interactions and Events - -### on - -**Type**: `(eventName: string, listener: (event: IG6GraphEvent) => void) => void` - - - -Listens to an event - -### once - -**Type**: `(eventName: string, listener: (event: IG6GraphEvent) => void) => void` - - - -Listens to an event only once, and once it is completed, it is destroyed - -### off - -**Type**: `(eventName: string, listener?: (event: IG6GraphEvent) => void) => void` - -Cancels a listener or all listeners under an event name - -### emit - -**Type**: `(eventName, param: any) => void` - -Triggers an event - -### getMode - -**Type**: `() => string` - -Get the current [interaction](/en/manual/tutorial/behavior) mode - -### setMode - -**Type**: `(mode: string) => void` - -Set the current [interaction](/en/manual/tutorial/behavior) mode - -### addBehaviors - -**Type**: `(behaviors: BehaviorOptionsOf | BehaviorOptionsOf[], modes: string | string[]) => void` - -Adds one or more interactions to the specified mode (default mode by default) - -### removeBehaviors - -**Type**: `(behaviorKeys: string[], modes: string | string[]) => void` - -Removes an interaction from the specified mode (default mode by `default`) - -### updateBehavior - -**Type**: `(behavior: BehaviorOptionsOf, mode?: string) => void` - -Updates the configuration of an interaction - -### drawTransient - -**Type**: `(type: ITEM_TYPE | SHAPE_TYPE, id: ID, config: any, canvas?: Canvas) => DisplayObject` - -Draws a temporary shape, typically used to update temporary shapes during interactions to avoid unnecessary performance overhead of updating shapes in the main graph layer - -The principle of using a temporary canvas to improve interaction performance is as follows: - - - -## View - -### zoom - -**Type**: `Zoom` - -
- - Zoom - - -```ts -type Zoom = ( - /** The relative zoom ratio */ - ratio: number, - /** The zoom center */ - center?: Point, - /** Animation configuration. If an empty object is specified, the default animation parameters will be used. If not specified, no animation will be performed */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -Zooms the graph by a **relative** zoom ratio and a zoom center - -### zoomTo - -**Type**: `(toRatio: number, center?: Point, effectTiming?: Partial>) => Promise` - -
- - ZoomTo - - -```ts -type ZoomTo = ( - /** The absolute zoom ratio */ - toRatio: number, - /** The zoom center */ - center?: Point, - /** Animation configuration. If an empty object is specified, the default animation parameters will be used. If not specified, no animation will be performed */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -Zooms the graph to a **absolute** zoom ratio and a zoom center - -### getZoom - -**Type**: `() => number` - -Gets the current zoom ratio of the graph - -### translate - -**Type**: `Translate` - -
- - Translate - - -```ts -type Translate = ( - /** Relative distance of movement */ - distance: Partial<{ dx: number; dy: number; dz: number }>, - /** Animation configuration. Specify an empty object to use default parameters. If not specified, no animation is performed */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -Move canvas in the x and y directions by the specified distance - -### translateTo - -**Type**: `TranslateTo` - -
- - TranslateTo - - -```ts -type TranslateTo = ( - /** Absolute target position */ - point: PointLike, - /** Animation configuration. Specify an empty object to use default parameters. If not specified, no animation is performed */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -Move the canvas to the specified **absolute** target position (x, y) - -### fitCenter - -**Type**: `FitCenter` - -
- - FitCenter - - -```ts -type FitCenter = ( - /** Animation configuration. Specify an empty object to use default parameters. If not specified, no animation is performed */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -Moves the content to align the center of the content with the center of the current viewport. No scaling is performed - -### fitView - -**Type**: `FitView` - -
- - FitView - - -```ts -type FitView = ( - options?: { - /** Padding of viewport */ - padding: Padding; - /** Rules for fitting the viewport, see below for the types */ - rules: FitViewRules; - }, - effectTiming?: Partial>, -) => Promise; - -type FitViewRules = { - /** Only performs fitting if the content is out of the viewport */ - onlyOutOfViewport?: boolean; - /** Only performs fitting if the content is larger than the viewport */ - onlyZoomAtLargerThanViewport?: boolean; - /** Restricts the scaling direction during fitting. Default is 'both' */ - direction?: 'x' | 'y' | 'both'; - /** Determines whether to scale based on the larger or smaller ratio in the horizontal and vertical directions */ - ratioRule?: 'max' | 'min'; - /** Fits based on rendered bounding boxes or layout positions. Default is 'render', 'layout' is used when layout calculations are completed but rendering updates */ - boundsType?: 'render' | 'layout'; -}; -``` - -
- -Moves and scales the content to fit the current viewport size - -### focusItem - -**Type**: `FocusItem` - -
- - FocusItem - - -```ts -type FocusItem = ( - id: ID | ID[], - effectTiming?: Partial>, -) => Promise; -``` - -
- -Translate the canvas to align the specified single or multiple items (average center) to the center of the current viewport - -### stopTransformTransition - -**Type**: `() => void` - -Stops all translation and scale-related animations - -### getSize - -**Type**: `() => [number, number]` - -Get the current size of the canvas container - -### setSize - -**Type**: `(size: [number, number]) => void` - -Set the size of the current canvas container - -### getViewportCenter - -**Type**: `() => { x: number, y: number }` - -Get the coordinates of the center point of the current viewport. For example, for a 500 \* 500 container, it will return the center value { x: 250, y: 250 } - -### getCanvasByClient - -**Type**: `(ClientPoint: Point) => Point` - -Convert the given browser coordinates to drawing coordinates on the canvas - -### getCanvasByViewport - -**Type**: `(viewportPoint: Point) => Point` - -Convert the given viewport DOM coordinates to drawing coordinates on the canvas - -### getClientByCanvas - -**Type**: `(canvasPoint: Point) => Point` - -Convert the drawing coordinates on the canvas to browser coordinates - -### getViewportByCanvas - -**Type**: `(canvasPoint: Point) => Point` - -Convert the drawing coordinates on the canvas to viewport DOM coordinates - -### getRenderBBox - -**Type**: `(id: ID, onlyKeyShape?: boolean, isTransient?: boolean) => false | AABB` - -
- - GetRenderBBox - - -```ts -type GetRenderBBox = ( - /** ID of the specified element to get the bounding box. If no element is specified, it represents the overall bounding box of all the currently rendered content */ - id: ID, - /** Whether to only calculate the bounding box of the main keyShape */ - onlyKeyShape?: boolean, - /** Calculate the bounding box of transient shapes */ - isTransient?: boolean, -) => /** Returns false if there is no corresponding element */ -false | AABB; -``` - -
- -Get the bounding box of the specified element - -## Tree Operations - -### collapse - -**Type**: `(ids: ID | ID[], disableAnimate?: boolean) => void` - -Collapse one or multiple subtrees - -### expand - -**Type**: `(ids: ID | ID[], disableAnimate?: boolean) => void` - -Expand one or multiple subtrees - -## Free Plugins - -### addPlugins - -**Type**: `AddPlugins` - -
- - AddPlugins - - -```ts -type AddPlugins = (pluginCfgs: { [cfgName: string]: unknown; key: string; type: string }[]) => void; -``` - -
- -Add free plugins to the graph instance - -### removePlugins - -**Type**: `(pluginKeys: string[]) => void` - -Remove plugins from the graph instance. If you want to remove or update a plugin, you should configure a unique key for the plugin to facilitate retrieval during deletion or modification. - -### updatePlugin - -**Type**: `(pluginCfg: { [cfgName: string]: unknown; key: string ; type: string }) => void` - -Update a specific plugin. If you want to remove or update a plugin, you should configure a unique key for the plugin to facilitate retrieval during deletion or modification. - -## Download - -### downloadFullImage - -**Type**: `(name?: string, type: DataURLType = 'image/png', imageConfig: { padding: number | number[] }) => void` - -Download an image that contains all the graph content - -### downloadImage - -**Type**: `(name?: string, type: DataURLType = 'image/png') => void` - -Download the contents in the window as an image - -### toFullDataURL - -**Type**: `(type: DataURLType = 'image/png', imageConfig: { padding: number | number[] }) => Promise` - -Generate the URL of an image that contains all the graph content - -### toDataURL - -**Type**: `(type: DataURLType = 'image/png') => Promise` - -Generate the URL of the current window content as an image - -## Graph Instance - -### setCursor - -**Type**: `(cursor: Cursor) => void` - -Set the cursor style. However, the cursor style on the element has a higher priority - -### destroy - -**Type**: `(callback?: Function) => void` - -Destroy the current graph instance diff --git a/packages/site/docs/apis/graph/Graph.zh.md b/packages/site/docs/apis/graph/Graph.zh.md deleted file mode 100644 index 50264ccbcc4..00000000000 --- a/packages/site/docs/apis/graph/Graph.zh.md +++ /dev/null @@ -1,860 +0,0 @@ ---- -title: Graph 实例方法 -order: 1 ---- - -## 配置项操作 Specification - -### getSpecification - -**类型**：`() => Specification` - -- [Specification](Specification.zh.md) - -获取当前图配置 Spec 的复制 - -### updateSpecification - -**类型**：`(spec: Specification) => Specification` - -- [Specification](Specification.zh.md) - -**参数**：需要更新的增量部分配置。 - -更新当前图配置 Spec - -### updateTheme - -**类型**：`(theme: ThemeOptionsOf) => void` - -**参数**：需要更新的主题配置。 - -更新当前图配置 spec 中的主题部分 - -### updateMapper - -**类型**：`(type: ITEM_TYPE, mapper: NodeMapper | EdgeMapper | ComboMapper) => void` - -更新节点/边/ Combo 的映射器(mapper)，并重新渲染相关元素 - -### updateStateConfig - -**类型**：`UpdateStateConfig` - -
- - UpdateStateConfig - - -```ts -type UpdateStateConfig = ( - /** 需要更新的元素类型 */ - itemType: ITEM_TYPE, - /** 更新的状态样式配置 */ - stateConfig: - | { [stateName: string]: (data: NodeModel) => NodeDisplayModel | NodeShapesEncode } - | { [stateName: string]: (data: EdgeModel) => EdgeDisplayModel | EdgeShapesEncode } - | { [stateName: string]: (data: ComboModel) => ComboDisplayModel | ComboShapesEncode }, - /** 更新类型，'replace' 表示直接替换，'mergeReplace' 表示融合到原 mapper 上后替换 */ - updateType?: 'replace' | 'mergeReplace', -) => void; -``` - -
- -更新节点/边/ Combo 的状态样式配置，并重新渲染相关状态下的元素 - -## 数据 - -### read - -**类型**：`(data: GraphData) => void` - -- [GraphData](GraphData.zh.md) - -初次读取并渲染数据 - -### addData - -**类型**：`AddData` - -
- - AddData - - -```typescript -type AddData = ( - /** 需要新增的元素类型，意味着一次调用只能新增一类元素，建议先增加节点再增加边，避免新增边时新增节点不存在 */ - itemType: ITEM_TYPE, - /** 新增的用户数据，可以是单条数据，也可以是数组 */ - model: NodeUserModel | EdgeUserModel | ComboUserModel | NodeUserModel[] | EdgeUserModel[] | ComboUserModel[], -) => /** 新增的数据 */ -NodeModel | EdgeModel | ComboModel | NodeModel[] | EdgeModel[] | ComboModel[]; -``` - -
- -新增一个类型的数据 - -### changeData - -**类型**：`(data: GraphData, type: 'replace' | 'mergeReplace') => void` - -- [GraphData](GraphData.zh.md) - -全量更换数据。 - -- `'replace'`: 完全抛弃原有的数据，使用新数据 - -- `'mergeReplace'`: 若新数据中有某些 id 的节点 / 边 / Combo 已经存在于画布中，则与对应的原数据进行融合后替换原始数据 - -### updateData - -**类型**：`UpdateData` - -
- - UpdateData - - -```typescript -type UpdateData = ( - /** 需要更新的元素类型，意味着一次调用只能更新一类元素 */ - itemType: ITEM_TYPE, - /** 需要更新的数据，可以是单条数据，也可以是数组 */ - model: - | Partial - | Partial - | Partial[] | Partial[] | Partial[]>, -) => /** 更新后的数据 */ -NodeModel | EdgeModel | ComboModel | NodeModel[] | EdgeModel[] | ComboModel[]; -``` - -
- -- [NodeModel](../data/NodeModel.zh.md) - -- [NodeUserModel](../data/NodeUserModel.zh.md) - -- [EdgeModel](../data/EdgeModel.zh.md) - -- [EdgeUserModel](../data/EdgeUserModel.zh.md) - -- [ComboModel](../data/ComboModel.zh.md) - -- [ComboUserModel](../data/ComboUserModel.zh.md) - -一次更新一个类型的部分数据 - -### removeData - -**类型**：`(itemType: ITEM_TYPE, id: ID | ID[]) => void` - -删除一条或多条同一类型的数据 - -### getAllNodesData - -**类型**：`() => NodeModel[]` - -- [NodeModel](../data/NodeModel.zh.md) - -获取所有的节点数据（内部流转数据） - -### getAllEdgesData - -**类型**：`() => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.zh.md) - -获取所有的边数据（内部流转数据） - -### getAllCombosData - -**类型**：`() => ComboModel[]` - -- [ComboModel](../data/ComboModel.zh.md) - -获取所有的 Combo 数据（内部流转数据） - -### getNodeData - -**类型**：`(condition: Function | ID) => NodeModel` - -- [NodeModel](../data/NodeModel.zh.md) - -获得指定 id 或条件的节点数据（内部流转数据） - -### getEdgeData - -**类型**：`(condition: Function | ID) => EdgeModel` - -- [EdgeModel](../data/EdgeModel.zh.md) - -获得指定 id 或条件的边数据（内部流转数据） - -### getComboData - -**类型**：`(condition: Function | ID) => ComboModel` - -- [ComboModel](../data/ComboModel.zh.md) - -获得指定 id 或条件的边数据（内部流转数据） - -### getNeighborNodesData - -**类型**：`(nodeId: ID, direction?: 'both' | 'in' | 'out') => NodeModel[]` - -- [NodeModel](../data/NodeModel.zh.md) - -获取指定节点的一跳邻居节点数据（内部流转数据） - -### getRelatedEdgesData - -**类型**：`(nodeId: ID, direction?: 'both' | 'in' | 'out') => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.zh.md) - -获取指定节点相关的边数据（内部流转数据） - -### getNearEdgesData - -**类型**：`(nodeId: ID) => EdgeModel[]` - -- [EdgeModel](../data/EdgeModel.zh.md) - -使用四叉树检测获取指定节点周围的相关边 - -### updateNodePosition - -**类型**：`UpdateNodePosition` - -
- - UpdateNodePosition - - -```ts -type UpdateNodePosition = ( - /** 更新的配置项，每条数据包含节点 id 和 data，data 中包括 x y 信息 */ - models: Partial | Partial[], - /** 是否同时更新祖先 Combo */ - upsertAncestors?: boolean, - /** 是否禁用动画 */ - disableAnimate?: boolean, - /** 位置更新完成后的回调函数。位置更新的渲染可能是异步的，可通过该回调进行更新完成后的逻辑 */ - callback?: (model: NodeModel, canceled?: boolean) => void, -) => NodeModel | NodeModel[]; -``` - -
- -- [NodeModel](../data/NodeModel.zh.md) - -- [NodeUserModel](../data/NodeUserModel.zh.md) - -更新单个/多个节点位置。此 API 不更新传入的其他样式，以达到更好的位置更新性能 - -### clear - -**类型**：`() => void` - -清空图内容，即移除所有的元素 - -## 渲染器 - -### changeRenderer - -**类型**：`(type: 'canvas' | 'webgl' | 'svg' | 'webgl-3d') => void` - -运行时切换渲染器 - -## 元素 - -### findIdByState - -**类型**：`(itemType: ITEM_TYPE, state: string, value?: string | boolean, additionalFilter?: (model: NodeModel | EdgeModel | ComboModel) => boolean) => ID[]` - -- [NodeModel](../data/NodeModel.zh.md) - -- [EdgeModel](../data/EdgeModel.zh.md) - -- [ComboModel](../data/ComboModel.zh.md) - -获取指定状态和类型的元素 id 列表 - -### getItemAllStates - -**类型**：`(id: ID) => string[]` - -获取指定元素的所有 `true` 的状态名 - -### getItemState - -**类型**：`(id: ID, state: string) => string | boolean` - -获取指定元素、指定状态的状态值 - -### setItemState - -**类型**：`(ids: ID | ID[], state: string, value: boolean) => void` - -设置单个/多个元素状态 - -### clearItemState - -**类型**：`(ids: ID | ID[], states?: string[]) => void` - -清除指定单个/多个元素的状态 - -### showItem - -**类型**：`(ids: ID | ID[], disableAnimate?: boolean) => void` - -显示单个或多个元素。和 [hideItem](#hideitem) 对应 - -### hideItem - -**类型**：`(ids: ID | ID[], disableAnimate?: boolean) => void` - -隐藏单个或多个元素。和 [showItem](#showitem) 对应 - -### getItemVisible - -**类型**：`(id: ID) => boolean` - -获取指定元素的可见性 - -### frontItem - -**类型**：`(ids: ID | ID[]) => void` - -将指定单个/多个元素层级放到最前。需要注意的是，节点的层级永远高于边 - -### backItem - -**类型**：`(ids: ID | ID[]) => void` - -将指定单个/多个元素层级放到最后。需要注意的是，节点的层级永远高于边 - -## Combo - -### addCombo - -**类型**：`(model: ComboUserModel, childrenIds: ID[]) => ComboModel` - -- [ComboModel](../data/ComboModel.zh.md) - -- [ComboUserModel](../data/ComboUserModel.zh.md) - -新增 combo，同时更新指定的子节点，从原父 combo 中移动到新 combo 中 - -本质上是 addData，但在增加 combo 数据的基础上做一些 Combo 层级嵌套树的调整 - -### collapseCombo - -**类型**：`(comboIds: ID | ID[]) => void` - -收起指定的单个/多个 Combo，与 [expandCombo](#expandCombo) 对应 - -### expandCombo - -**类型**：`(comboIds: ID | ID[]) => void` - -展开指定的单个/多个 Combo，与 [collapseCombo](#collapseCombo) 对应 - -### moveCombo - -**类型**：`MoveCombo` - -
- - MoveCombo - - -```ts -type MoveCombo = ( - /** 需要被更新的 Combo id */ - ids: ID[], - /** 移动的 x 轴相对距离 */ - dx: number, - /** 移动的 y 轴相对距离 */ - dy: number, - /** 是否同时更新祖先 Combo */ - upsertAncestors?: boolean, - /** 更新完成后的回调函数 */ - callback?: (model: ComboModel, canceled?: boolean) => void, -) => /** 更新后的 Combo 数据（内部流转数据） */ -ComboModel[]; -``` - -
- -移动单个/多个 Combo 一个相对的距离（dx，dy） - -该 API 将不更新其他样式以提升更新位置的性能。事实上，由于 Combo 的位置取决的内部子元素的分布和位置，因此该 API 实际上是在更新指定 Combo 的后继元素的位置，以影响该 Combo 以达到移动该 Combo 的目的，而不是直接更新该 Combo 的位置 - -### updateComboPosition - -**类型**：`UpdateComboPosition` - -
- - UpdateComboPosition - - -```ts -type UpdateComboPosition = ( - /** 每条数据带有需要更新的 Combo id 以及 data，data 中包含新的 `x` `y` 信息 */ - models: Partial[]>, - /** 是否同时更新祖先 Combo */ - upsertAncestors?: boolean, - /** 是否禁用动画 */ - disableAnimate?: boolean, - /** 更新完成的回调函数 */ - callback?: (model: ComboModel) => void, -) => /** 更新后的 Combo 数据（内部流转数据） */ -ComboModel | ComboModel[]; -``` - -
- -- [ComboModel](../data/ComboModel.zh.md) - -- [ComboUserModel](../data/ComboUserModel.zh.md) - -更新单个或多个 Combo 的位置到指定位置（x，y）上。类似节点的对应 API [updateNodePosition](#updatenodeposition) - -### getComboChildrenData - -**类型**：`(comboId: ID) => ComboModel[]` - -- [ComboModel](../data/ComboModel.zh.md) - -获取 Combo 子元素（节点/ Combo）数据（内部流转数据） - -## 布局 - -### layout - -**类型**：`(options?: LayoutOptions, disableAnimate?: boolean) => Promise` - -执行布局 - -- 不传参，则按照图实例化配置的 spec 中的 layout 配置重新执行布局 - -- 若传参，则更新图的布局配置的同时，重新执行布局 - -### stopLayout - -**类型**：`() => void` - -停止布局 - -适用于带有迭代动画的布局，目前有 `'force'` 属于此类布局，即停止力导布局的迭代，一般用于布局迭代时间过长情况下的手动停止迭代动画，例如在点击画布/节点的监听中调用 - -## 交互与事件 - -### on - -**类型**：`(eventName: string, listener: (event: IG6GraphEvent) => void) => void` - - - -监听一个事件 - -### once - -**类型**：`(eventName: string, listener: (event: IG6GraphEvent) => void) => void` - - - -监听一个事件，仅监听一次，一旦完成后便销毁 - -### off - -**类型**：`(eventName: string, listener?: (event: IG6GraphEvent) => void) => void` - -取消一个监听，或一个事件名称下的所有监听 - -### emit - -**类型**：`(eventName, param: any) => void` - -触发一个事件 - -### getMode - -**类型**：`() => string` - -获取当前的[交互](/manual/tutorial/behavior)模式 - -### setMode - -**类型**：`(mode: string) => void` - -设置当前的[交互](/manual/tutorial/behavior)模式 - -### addBehaviors - -**类型**：`(behaviors: BehaviorOptionsOf | BehaviorOptionsOf[], modes: string | string[]) => void` - -为指定的模式（默认为 default 模式）中新增一个或多个交互 - -### removeBehaviors - -**类型**：`(behaviorKeys: string[], modes: string | string[]) => void` - -从指定的模式（默认为 default 模式）中移除一个交互 - -### updateBehavior - -**类型**：`(behavior: BehaviorOptionsOf, mode?: string) => void` - -更新一个交互的配置 - -### drawTransient - -**类型**：`(type: ITEM_TYPE | SHAPE_TYPE, id: ID, config: any, canvas?: Canvas) => DisplayObject` - -绘制一个临时图形，一般用于配合交互过程中更新临时图形以表达交互，从而避免更新主图层中的图形造成不必要的性能开销 - -采用临时层画布提升交互性能原理如下： - - - -## 视图 - -### zoom - -**类型**：`Zoom` - -
- - Zoom - - -```ts -type Zoom = ( - /** 相对的缩放比例 */ - ratio: number, - /** 缩放中心 */ - center?: Point, - /** 动画配置，配置空对象，则使用默认的动画参数。不指定该参数，则无动画 */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -给出**相对的**缩放比例，以及缩放中心，进行图的缩放 - -### zoomTo - -**类型**：`ZoomTo` - -
- - ZoomTo - - -```ts -type ZoomTo = ( - /** 绝对的缩放比例 */ - toRatio: number, - /** 缩放中心 */ - center?: Point, - /** 动画配置，配置空对象，则使用默认的动画参数。不指定该参数，则无动画 */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -给出**绝对的**缩放比例值，以及缩放中心，将图缩放到指定的比例上 - -### getZoom - -**类型**：`() => number` - -获取当前图的缩放比例 - -### translate - -**类型**：`Translate` - -
- - Translate - - -```ts -type Translate = ( - /** 相对的平移距离 */ - distance: Partial<{ dx: number; dy: number; dz: number }>, - /** 动画配置，配置空对象，则使用默认的动画参数。不指定该参数，则无动画 */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -将画布在 x 轴和 y 轴上平移指定的距离 - -### translateTo - -**类型**：`TranslateTo` - -
- - TranslateTo - - -```ts -type TranslateTo = ( - /** 绝对的目标位置 */ - point: PointLike, - /** 动画配置，配置空对象，则使用默认的动画参数。不指定该参数，则无动画 */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -将画布在 x 轴和 y 轴上平移到指定的位置 - -### fitCenter - -**类型**：`FitCenter` - -
- - FitCenter - - -```ts -type FitCenter = ( - /** 动画配置，配置空对象，则使用默认的动画参数。不指定该参数，则无动画 */ - effectTiming?: Partial>, -) => Promise; -``` - -
- -将图内容平移，使图内容的中心对齐当前视窗的中心点。不进行缩放 - -### fitView - -**类型**：`FitView` - -
- - FitView - - -```ts -type FitView = ( - options?: { - /** 视窗内边距 */ - padding: Padding; - /** 适配视窗的规则 */ - rules: FitViewRules; - }, - effectTiming?: Partial>, -) => Promise; - -type FitViewRules = { - /** 是否仅当图内容超出视窗时，进行适配 */ - onlyOutOfViewport?: boolean; - /** 是否仅当图内容大于视窗时，进行适配 */ - onlyZoomAtLargerThanViewport?: boolean; - /** 适配时限制缩放的方向，默认为 'both' */ - direction?: 'x' | 'y' | 'both'; - /** 缩放比例应当根据横、纵方向上的较大者还是较小者 */ - ratioRule?: 'max' | 'min'; - /** 根据渲染的包围盒进行适配，还是根据节点布局的位置进行适配。默认为 'render'，'layout' 适用于初次渲染时，完成了布局计算，但未完成渲染层面的更新时使用 */ - boundsType?: 'render' | 'layout'; -}; -``` - -
- -将图内容平移和缩放，使图内容适配当前视窗大小 - -### focusItem - -**类型**：`FocusItem` - -
- - FocusItem - - -```ts -type FocusItem = ( - id: ID | ID[], - effectTiming?: Partial>, -) => Promise; -``` - -
- -平移画布以使指定的单个或多个元素（平均中心）对齐到当前视窗的中心 - -### stopTransformTransition - -**类型**：`() => void` - -停止所有平移、缩放相关的动画 - -### getSize - -**类型**：`() => [number, number]` - -获取当前图容器的大小 - -### setSize - -**类型**：`(size: [number, number]) => void` - -设置当前图容器的大小 - -### getViewportCenter - -**类型**：`() => { x: number, y: number }` - -获取当前视窗的中心点坐标。例如 500 \* 500 的容器，将返回中心值 { x: 250, y: 250 } - -### getCanvasByClient - -**类型**：`(ClientPoint: Point) => Point` - -给定的浏览器坐标，转换为画布上的绘制坐标 - -### getCanvasByViewport - -**类型**：`(viewportPoint: Point) => Point` - -给定的视窗 DOM 坐标，转换为画布上的绘制坐标 - -### getClientByCanvas - -**类型**：`(canvasPoint: Point) => Point` - -给定画布上的绘制坐标，转换为浏览器坐标 - -### getViewportByCanvas - -**类型**：`(canvasPoint: Point) => Point` - -给定画布上的绘制坐标，转换为视窗 DOM 的坐标 - -### getRenderBBox - -**类型**：`(id: ID, onlyKeyShape?: boolean, isTransient?: boolean) => false | AABB` - -
- - GetRenderBBox - - -```ts -type GetRenderBBox = ( - /** 指定元素获取包围盒。若不指定元素，则表示获取当前渲染的图所有内容的整体包围盒 */ - id: ID, - /** 是否仅计算主图形 keyShape 的包围盒 */ - onlyKeyShape?: boolean, - /** 是否计算的是临时图形的包围盒 */ - isTransient?: boolean, -) => /** 若不存在对应元素则返回 false */ -false | AABB; -``` - -
- -获取指定元素的包围盒 - -## 树图 - -### collapse - -**类型**：`(ids: ID | ID[], disableAnimate?: boolean) => void` - -收起一个或多个子树 - -### expand - -**类型**：`(ids: ID | ID[], disableAnimate?: boolean) => void` - -展开一个或多个子树 - -## 自由插件 - -### addPlugins - -**类型**：`AddPlugins` - -
- - AddPlugins - - -```ts -type AddPlugins = (pluginCfgs: { [cfgName: string]: unknown; key: string; type: string }[]) => void; -``` - -
- -为图实例增加自由插件 - -### removePlugins - -**类型**：`(pluginKeys: string[]) => void` - -为图实例删除插件。若有删除和更新插件的目的，应当在配置插件或新增插件时，为插件配置唯一的 key 以方便删改时的检索 - -### updatePlugin - -**类型**：`(pluginCfg: { [cfgName: string]: unknown; key: string ; type: string }) => void` - -更新某一个插件。若有删除和更新插件的目的，应当在配置插件或新增插件时，为插件配置唯一的 key 以方便删改时的检索 - -## 下载 - -### downloadFullImage - -**类型**：`(name?: string, type: DataURLType = 'image/png', imageConfig: { padding: number | number[] }) => void` - -下载包含所有图内容的图片 - -### downloadImage - -**类型**：`(name?: string, type: DataURLType = 'image/png') => void` - -下载在窗口内的内容为图片 - -### toFullDataURL - -**类型**：`(type: DataURLType = 'image/png', imageConfig: { padding: number | number[] }) => Promise` - -生成所有图内容的图片 URL - -### toDataURL - -**类型**：`(type: DataURLType = 'image/png') => Promise` - -生成当前窗口内容的图片 URL - -## 图实例 - -### setCursor - -**类型**：`(cursor: Cursor) => void` - -设置和当前的鼠标样式。但元素上的鼠标样式拥有更高的优先级 - -### destroy - -**类型**：`(callback?: Function) => void` - -销毁当前图实例 diff --git a/packages/site/docs/apis/graph/GraphProperties.en.md b/packages/site/docs/apis/graph/GraphProperties.en.md deleted file mode 100644 index 3945de2dd71..00000000000 --- a/packages/site/docs/apis/graph/GraphProperties.en.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Graph Properties -order: 2 ---- - -The following properties are read-only. - -### canvas - -Stores the main canvas object of the current graph. You generally do not need to use this. - -• **Type**: `Canvas` - -### container - -Stores the DOM container of the graph canvas. - -• **Type**: `HTMLElement` - -### destroyed - -Indicates whether the current graph instance has been destroyed. - -• **Type**: `boolean` - -### rendererType - -The current renderer name of the graph. - -• **Type**: `'canvas' | 'webgl' | 'svg' | 'webgl-3d'` diff --git a/packages/site/docs/apis/graph/GraphProperties.zh.md b/packages/site/docs/apis/graph/GraphProperties.zh.md deleted file mode 100644 index 617f93e3594..00000000000 --- a/packages/site/docs/apis/graph/GraphProperties.zh.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Graph 属性 -order: 2 ---- - -以下属性均只读。 - -### canvas - -存储当前图的主画布对象。您一般不需要使用。 - -• **类型**: `Canvas` - -### container - -存储图画布的 DOM 容器。 - -• **类型**: `HTMLElement` - -### destroyed - -当前图实例是否已经被销毁。 - -• **类型**: `boolean` - -### rendererType - -图当前的渲染器名称。 - -• **类型**: `'canvas' | 'webgl' | 'svg' | 'webgl-3d'` diff --git a/packages/site/docs/apis/graph/Specification.en.md b/packages/site/docs/apis/graph/Specification.en.md deleted file mode 100644 index 86c32b67cd4..00000000000 --- a/packages/site/docs/apis/graph/Specification.en.md +++ /dev/null @@ -1,499 +0,0 @@ ---- -title: Graph Specification -order: 0 ---- - -## container Required - -The DOM of the graph container, which can be the id of an existing DOM element or a DOM object. - -**Type**: `string | HTMLElement` - -## height - -The height of the canvas DOM. If not specified, it will adapt to the container. - -**Type**: `number` - -## width - -The width of the canvas DOM. If not specified, it will adapt to the container. - -**Type**: `number` - -## renderer - -The name of the renderer type, default is `'canvas'`. For large-scale data, it is recommended to use` 'webgl'`. If `'webgl-3d'` is used, it should be combined with 3D interactive and element types. - -**Type**: `RendererCfg` - -
- - RendererCfg - - -```typescript -type RendererCfg = - | RendererName - | { - // The name of the renderer - type: RendererName; - // Whether to use headless browser, default is false. true is suitable for node-side rendering - headless?: boolean; - // Pixel ratio, if not specified, it will automatically get the current device pixel ratio. Generally between 1-3. Set a larger value when rendering is blurred - pixelRatio?: number; - }; -type RendererName = 'canvas' | 'webgl' | 'svg' | 'webgl-3d'; -``` - -
- -## data - -The data of the graph. It can be provided in this configuration or written to the graph through the Graph API, see [graph.read](./Graph.zh.md#read). - -**Type**: `GraphData | InlineGraphDataConfig | InlineTreeDataConfig` - -
- - InlineGraphDataConfig - - -```typescript -type InlineGraphDataConfig = { - type: 'graphData'; - value: GraphData; -}; -``` - -
- -
- - InlineTreeDataConfig - - -```typescript -type InlineTreeDataConfig = { - type: 'treeData'; - value: TreeData; -}; -``` - -
- -- [GraphData](../data/GraphData.en.md) - -- [TreeData](../data/TreeData.en.md) - -## transforms - -**Type**: `TransformsConfig` - -
- - TransformsConfig - - -```typescript -type TransformsConfig = - | string[] - | { - type: string; - activeLifecycle: 'all' | DataLifecycleType | DataLifecycleType[]; - [param: string]: unknown; - }[] - | TransformerFn[]; -type DataLifecycleType = 'read' | 'changeData' | 'updateData' | 'addData' | 'removeData'; -``` - -
- -Data transformers. Multiple built-in or custom data transformers can be configured. When the graph reads user data, the data transformers will be executed linearly in the order of the configured array. That is, the result of the previous data processor will be input into the next data processor. After all data processors are completed, the data required for G6's internal flow will be generated. See [Data Introduction](../data/DataIntro.en.md) for details. Custom method see [Custom Data Transformer](../data/CustomTransform.en.md). - -## node - -**Type**: `NodeEncode | (data: NodeModel) => NodeDisplayModel` - -- [NodeModel](../data//NodeModel.en.md) - -- [NodeDisplayModel](../data/NodeDisplayModel.en.md) - -Node mapper, can be a JSON configuration or a function. The result of the mapper should be the rendering data required for rendering the node style, etc. This mapper converts the internal flow data into rendering data each time a node is rendered, see [Data Introduction](../data/DataIntro.en.md) for details. - -## edge - -**Type**: `EdgeEncode | (data: EdgeModel) => EdgeDisplayModel` - -- [EdgeModel](../data/EdgeModel.en.md) - -- [EdgeDisplayModel](../data/EdgeDisplayModel.en.md) - -Edge mapper, can be a JSON configuration or a function. The result of the mapper should be the rendering data required for rendering the edge style, etc. This mapper converts the internal flow data into rendering data each time an edge is rendered, see [Data Introduction](../data/DataIntro.en.md) for details. - -## combo - -**Type**: `ComboEncode | (data: ComboModel) => ComboDisplayModel` - -- [ComboModel](../data/ComboModel.en.md) - -- [ComboDisplayModel](../data/ComboDisplayModel.en.md) - -Combo mapper, can be a JSON configuration or a function. The result of the mapper should be the rendering data required for rendering the combo style, etc. This mapper converts the internal flow data into rendering data each time a combo is rendered, see [Data Introduction](../data/DataIntro.en.md) for details. - -## nodeState - -Node state style configuration. The built-in theme has provided the styles of `'selected'`, `'active'`, `'highlight'`, `'inactive'`, `'disable'` states. If you need to modify or set styles for custom state names, you can configure them here. - -**Type**: `NodeStateStyles` - -
- - NodeStateStyles - - -```typescript -{ - // The key is the state name, such as 'selected' - - [stateName: string]: { - // The key is the shape name, and the value represents the style of the shape under - [shapeId]: ShapStyle - } -} -``` - -
- -## edgeState - -**Type**: `EdgeStateStyles` - -
- - EdgeStateStyles - - -```typescript -type EdgeStateStyles = { - // The key is the state name, e.g., 'selected' - [stateName: string]: { - // The key is the shape name, and the value represents the style of the shape under this state - [shapeId]: ShapStyle; - }; -}; -``` - -
- -Edge state style configuration. The built-in theme already provides styles for `'selected'`, `'active'`, `'highlight'`, `'inactive'`, `'disable'` states. If you need to modify or set styles for custom state names, you can configure them here. - -## comboState - -**Type**: `ComboStateStyles` - -
- - ComboStateStyles - - -```typescript -{ - // The key is the state name, e.g., 'selected' - [stateName: string]: { - // The key is the shape name, and the value represents the style of the shape under this state - [shapeId]: ShapStyle - } -} -``` - -
- -Combo state style configuration. The built-in theme already provides styles for `'selected'`, `'active'`, `'highlight'`, `'inactive'`, `'disable'` states. If you need to modify or set styles for custom state names, you can configure them here. - -## theme - -**Type**: `ThemeCfg` - -
- - ThemeCfg - - -```typescript -type ThemeCfg = { - type: 'spec'; - // The built-in theme that the custom theme is based on. The default value is 'light' - base: 'light' | 'dark'; - specification: { - [itemType: ITEM_TYPE]: { - // The data type field of the node/edge/combo. For example, if the nodes are classified based on the 'cluster' field, you can specify dataTypeField: 'cluster', and the color will be taken from the color palette based on this classification - dataTypeField: string; - // The color palette - palette: Palette; - // The style of the shapes under the custom color palette - getStyleSets: (palette: Palette) => { - default: { - [shapeId: string]: ShapeStyle; - }; - [stateName: string]: { - [shapeId: string]: ShapeStyle; - }; - }; - }; - canvas: { - // The background color of the canvas. If not specified, it will follow the default color of the base theme - backgroundColor: string; - }; - }; -}; -// The type of the color palette, which can be an array of hexadecimal color strings or an object with data type names as keys and hexadecimal colors as values -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -``` - -
- -
- - Example - - -```javascript -const data = { - nodes: [ - { id: 'node1', data: { cluster: '1' } }, - { id: 'node2', data: { cluster: '1' } }, - { id: 'node3', data: { cluster: '2' } }, - ], -}; -const graph = new Graph({ - // ... Other configurations - theme: { - type: 'spec', - base: 'light', - specification: { - canvas: { - backgroundColor: '#f3faff', - }, - node: { - dataTypeField: 'cluster', - palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], - }, - }, - }, -}); -``` - -
- -Theme configuration. The default theme is the light theme. - -## layout - -**Type**: `LayoutOptions` - -
- - LayoutOptions - - -```typescript -type LayoutOptions = StandardLayoutOptions - | ImmediatelyInvokedLayoutOptions; - -type PureLayoutOptions = CircularLayout | RandomLayout | ...; // Configurations for various layouts, see the documentation for layout configurations for details - -type StandardLayoutOptions = PureLayoutOptions & { - type: string; - // Pre-layout to improve the quality and convergence speed of force-directed layout - presetLayout?: StandardLayoutOptions; - // Whether to enable iterative animation, suitable for force-directed layout - animated: boolean; - // Whether to enable web worker to avoid blocking the page during calculation - workerEnabled: boolean; -}; -``` - -
- -Layout configuration. If not configured and the nodes in the data have `x` and `y` positions, the graph will be rendered based on the position information in the data. If not configured and the data does not have position information, the graph will be rendered using the 'grid' grid layout. See the [Layout Overview](../layout/LayoutOverview.en.md) for configurations for different layouts. - -## modes - -**Type**: `ModesCfg` - -
- - ModesCfg - - -```typescript -type ModesCfg = { - default: BehaviorCfg[]; - [mode: string]: BehaviorCfg[]; -}; -type BehaviorCfg = - | string // You can specify only the type name string - | { - // If you need to modify or delete it later, you need to specify a unique key for retrieval - key: string; - type: string; - // ...Other configurations, different interactions are different - } - | BehaviorClass; -``` - -
- -Interaction mode configuration. G6 provides different interaction mode configurations for the graph, which can be understood as groups of interactions. Different modes have different interaction configurations, allowing for quick switching between different interaction groups. For example, in read-only mode, you can only drag and zoom the canvas. In edit mode, you can create edges, etc. Here, you can configure the interaction groups on the graph. You can dynamically switch modes and switch interaction modes through the Graph API [`setMode`](#setmode), and get the current interaction mode through [`getMode`](#getmode). - -## zoom - -**Type**: `number` - -The absolute zoom ratio value for the initial rendering. - -## autoFit - -**Type**: `AutoFitType` - -
- - AutoFitType - - -```ts -type AutoFitType = - | 'center' - | 'view' - | { - effectTiming?: Partial>; - padding?: Padding; - rules?: FitViewRules; - type: 'view'; - } - | { effectTiming?: Partial>; type: 'center' } - | { - alignment?: GraphAlignment; - effectTiming?: Partial>; - position: Point; - type: 'position'; - }; - -type FitViewRules = { - onlyOutOfViewport?: boolean; - onlyZoomAtLargerThanViewport?: boolean; - direction?: 'x' | 'y' | 'both'; - ratioRule?: 'max' | 'min'; - boundsType?: 'render' | 'layout'; -}; - -type GraphAlignment = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'center' | [number, number]; -``` - -
- -Whether to auto-fit the container and the way to auto-fit. `'view'` means zooming and panning to fit the container. `'center'` means only panning without zooming to align the center of the graph content with the center of the container. - -## animate - -**Type**: `AnimateCfg` - -
- - AnimateCfg - - -```typescript -type AnimateCfg = { - /** - * The duration (in ms) of each animation. - */ - duration?: number; - /** - * The easing function of the animation. - */ - easing?: string; - /** - * The delay (in ms) before the animation starts. - */ - delay?: number; - /** - * The number of times the animation will be performed, with Infinity indicating infinite looping. - */ - iterations?: number | typeof Infinity; - /** - * The callback function when the animation ends. - */ - callback?: () => void; - /** - * The callback function when the animation is paused. - */ - pauseCallback?: () => void; - /** - * The callback function when the animation is resumed. - */ - resumeCallback?: () => void; -}; -``` - -
- -Whether to enable global animation, with lower priority than the animation specified by each API. - -## plugins - -**Type**: `PluginsCfg` - -
- - PluginsCfg - - -```typescript -type PluginsCfg = ( - | string - | { - // If you need to modify or delete it later, you need to specify a unique key for retrieval - key: string; - type: string; - // ... Other configurations, different plugins have different configurations - } - | PluginClass -)[]; -``` - -
- -Free plugins' configurations. - -**TODO**: 链接各个插件的配置文档 - -## optimize - -**Type**: `OptimizeCfg` - -
- - OptimizeCfg - - -```typescript -{ - /** Whether to enable tile-based rendering for the initial screen. If specified as a number, it indicates the maximum number of elements for tile-based rendering. */ - tileFirstRender?: boolean | number; - /** The number of elements included in a single tile or frame of rendering. */ - tileFirstRenderSize?: number; - /** Whether to enable tile-based rendering during the show/hide animation of drag-canvas and zoom-canvas. If specified as a number, it indicates the maximum number of elements for tile-based rendering. However, the `enableOptimize` option in each interaction has a higher priority. */ - tileBehavior?: boolean | number; - /** The number of elements included in a single tile or frame of rendering during interactions. However, the `enableOptimize` option in each interaction has a higher priority. */ - tileBehaviorSize?: number; - /** The number of elements included in a single tile or frame of rendering during the layer rendering. */ - tileLodSize?: number; -} -``` - -
- -Configuration options for performance optimization in a graph instance. This includes controlling first screen tile rendering, tile interaction limits, and other performance-related configurations. diff --git a/packages/site/docs/apis/graph/Specification.zh.md b/packages/site/docs/apis/graph/Specification.zh.md deleted file mode 100644 index 1e2b7aba1ed..00000000000 --- a/packages/site/docs/apis/graph/Specification.zh.md +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: Specification 图配置项 -order: 0 ---- - -## container 必须 - -**类型**：`string | HTMLElement` - -图的容器 DOM，可以是已经存在的 DOM id，也可以是 DOM 对象。 - -## height - -**类型**：`number` - -画布标签 DOM 的高度。未指定，则自适应容器。 - -## width - -**类型**：`number` - -画布标签 DOM 的宽度。未指定，则自适应容器。 - -## renderer - -**类型**：`RendererCfg` - -
- - RendererCfg - - -```typescript -type RendererCfg = - | RendererName - | { - // 渲染器名称 - type: RendererName; - // 是否使用无头浏览器，默认为 false。true 适用于 node 端渲染 - headless?: boolean; - // 像素比，不指定将自动获取当前设备自动像素比。一般在 1-3 之间。可在渲染模糊的情况下，设置较大的值 - pixelRatio?: number; - }; - -type RendererName = 'canvas' | 'webgl' | 'svg' | 'webgl-3d'; -``` - -
- -渲染器类型名称，默认为 `'canvas'`。大规模数据建议使用 `'webgl'`。若使用 `'webgl-3d'` 应当配合 3D 相关的交互和元素类型。 - -## data - -**类型**：`GraphData | InlineGraphDataConfig | InlineTreeDataConfig` - -
- - InlineGraphDataConfig - - -```typescript -type InlineGraphDataConfig = { - type: 'graphData'; - value: GraphData; -}; -``` - -
- -
- - InlineTreeDataConfig - - -```typescript -type InlineTreeDataConfig = { - type: 'treeData'; - value: TreeData; -}; -``` - -
- -- [GraphData](../data/GraphData.zh.md) - -- [TreeData](../data/TreeData.zh.md) - -图数据。可以在此配置项中给出，也可以通过 Graph 的 API 写入，见 [graph.read](./Graph.zh.md#read)。 - -## transforms - -**类型**：`TransformsConfig` - -
- - TransformsConfig - - -```typescript -type TransformsConfig = - | string[] - | { - type: string; - /** - * 决定 transform 函数生效时机，默认只在初始化数据时生效 - * `'all'` 表示在所有数据生命周期阶段激活，也可以指定在一个或多个生命周期阶段 - */ - activeLifecycle: 'all' | DataLifecycleType | DataLifecycleType[]; - [param: string]: unknown; - }[] - | TransformerFn[]; -type DataLifecycleType = 'read' | 'changeData' | 'updateData' | 'addData' | 'removeData'; -``` - -
- -数据转换器。可配置多个内置的或自定义的数据转换器，图读取用户数据时，将按照配置的数组顺序，线性执行数据转换器。即前一个数据处理器的结果将输入到下一个数据处理器中。所有数据处理器完成后，生成 G6 内部流转的数据。详见[数据介绍文档](../data/DataIntro.zh.md)。自定义方式见[自定义数据处理器文档](../data/CustomTransform.zh.md)。 - -## node - -**类型**：`NodeEncode | (data: NodeModel) => NodeDisplayModel` - -- [NodeModel](../data//NodeModel.zh.md) - -- [NodeDisplayModel](../data/NodeDisplayModel.zh.md) - -节点映射器（mapper），可以是 JSON 配置，也可以函数映射。映射器的生成结果应当是渲染所需的图形样式等。这一映射器在每次渲染节点时，将内部流转数据转换为渲染数据，详见[数据介绍文档](../data/DataIntro.zh.md)。 - -## edge - -**类型**：`EdgeEncode | (data: EdgeModel) => EdgeDisplayModel` - -- [EdgeModel](../data/EdgeModel.zh.md) - -- [EdgeDisplayModel](../data/EdgeDisplayModel.zh.md) - -边映射器（mapper），可以是 JSON 配置，也可以函数映射。映射器的生成结果应当是渲染所需的图形样式等。这一映射器在每次渲染边时，将内部流转数据转换为渲染数据，详见[数据介绍文档](../data/DataIntro.zh.md)。 - -## combo - -**类型**：`ComboEncode | (data: ComboModel) => ComboDisplayModel` - -- [ComboModel](../data/ComboModel.zh.md) - -- [ComboDisplayModel](../data/ComboDisplayModel.zh.md) - -Combo 映射器（mapper），可以是 JSON 配置，也可以函数映射。映射器的生成结果应当是渲染所需的图形样式等。这一映射器在每次渲染 Combo 时，将内部流转数据转换为渲染数据，详见[数据介绍文档](../data/DataIntro.zh.md)。 - -## nodeState - -**类型**：`NodeStateStyles` - -
- - NodeStateStyles - - -```typescript -{ - // key 为状态名称，例如 selected - [stateName: string]: { - // key 为图形名称，值表示该状态下该图形的样式 - [shapeId]: ShapStyle - } -} -``` - -
- -节点的状态样式配置。内置主题中已经提供了 `'selected'`、`'active'`、`'highlight'`、`'inactive'`、`'disable'` 的状态样式。如果需要修改或为自定义状态名设置样式，可在此处配置。 - -## edgeState - -**类型**：`EdgeStateStyles` - -
- - EdgeStateStyles - - -```typescript -type EdgeStateStyles = { - // key 为状态名称，例如 selected - [stateName: string]: { - // key 为图形名称，值表示该状态下该图形的样式 - [shapeId]: ShapStyle; - }; -}; -``` - -
- -边的状态样式配置。内置主题中已经提供了 `'selected'`、`'active'`、`'highlight'`、`'inactive'`、`'disable'` 的状态样式。如果需要修改或为自定义状态名设置样式，可在此处配置。 - -## comboState - -**类型**：`ComboStateStyles` - -
- - ComboStateStyles - - -```typescript -{ - // key 为状态名称，例如 selected - [stateName: string]: { - // key 为图形名称，值表示该状态下该图形的样式 - [shapeId]: ShapStyle - } -} -``` - -
- -Combo 的状态样式配置。内置主题中已经提供了 `'selected'`、`'active'`、`'highlight'`、`'inactive'`、`'disable'` 的状态样式。如果需要修改或为自定义状态名设置样式，可在此处配置。 - -## theme - -**类型**：`ThemeCfg` - -
- - ThemeCfg - - -```typescript -type ThemeCfg = { - type: 'spec'; - // 自定义主题基于的内置主题，默认为 'light' - base: 'light' | 'dark'; - specification: { - [itemType: ITEM_TYPE]: { - // 节点/边/ combo 的数据类型字段，例如节点根据 'cluster' 字段分类，则可指定 dataTypeField: 'cluster'，后续将根据此分类从色板中取色 - dataTypeField: string; - // 色板 - palette: Palette; - // 自定义色板对应图形的样式 - getStyleSets: (palette: Palette) => { - default: { - [shapeId: string]: ShapeStyle; - }; - [stateName: string]: { - [shapeId: string]: ShapeStyle; - }; - }; - }; - canvas: { - // 画布背景色的配置，不配置则跟随 base 的默认色 - backgroundColor: string; - }; - }; -}; -// 色板的类型，可以是十六进制颜色字符串数组，也可以是对象形式 key 为数据类型名，value 为十六进制颜色值 -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -``` - -
- -
- - 示例 - - -```javascript -const data = { - nodes: [ - { id: 'node1', data: { cluster: '1' } }, - { id: 'node2', data: { cluster: '1' } }, - { id: 'node3', data: { cluster: '2' } }, - ], -}; -const graph = new Graph({ - // ... 其他配置 - theme: { - type: 'spec', - base: 'light', - specification: { - canvas: { - backgroundColor: '#f3faff', - }, - node: { - dataTypeField: 'cluster', - palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], - }, - }, - }, -}); -``` - -
- -主题配置，默认使用亮色主题。 - -## layout - -**类型**：`LayoutOptions` - -
- - LayoutOptions - - -```typescript -type LayoutOptions = StandardLayoutOptions - | ImmediatelyInvokedLayoutOptions; - -type PureLayoutOptions = CircularLayout | RandomLayout | ...; // 各个布局配置，详见布局配置文档 - -type StandardLayoutOptions = PureLayoutOptions & { - type: string; - // 预布局，以提升力导向布局的质量和收敛速度 - presetLayout?: StandardLayoutOptions; - // 是否启用迭代动画，适用于力导向布局 - animated: boolean; - // 是否启用 webworker，避免计算过程阻塞页面 - workerEnabled: boolean; -}; -``` - -
- -布局的配置。若不配置，且节点数据中存在 `x` `y`，则使用数据中的位置信息进行绘制。若不配置，且数据中无位置信息，则使用 `'grid'` 网格布局进行计算和绘制。各个布局的详细配置见[布局总览](../layout/LayoutOverview.zh.md)下的各个子文档。 - -## modes - -**类型**：`ModesCfg` - -
- - ModesCfg - - -```typescript -type ModesCfg = { - default: BehaviorCfg[]; - [mode: string]: BehaviorCfg[]; -}; -type BehaviorCfg = - | string // 可只指定 type 类型名称字符串 - | { - // 若后续需要删改，需要指定唯一 key 用以检索 - key: string; - type: string; - // ...其他配置，各个交互不相同 - } - | BehaviorClass; -``` - -
- -交互模式配置。G6 图提供不同的交互模式配置，可以理解为交互的分组。不同模式下配置不同交互，以便快速切换不同的交互分组。例如只读模式下，只能拖拽和缩放画布。编辑模式下，可以创建边等。此处可配置图上的交互分组，后续需要动态切换和通过 Graph 的 API [`setMode`](#setmode) 切换交互模式，[`getMode`](#getmode) 获取当前的交互模式。 - -## zoom - -**类型**：`number` - -初次渲染的绝对缩放比例值。 - -## autoFit - -**类型**：`AutoFitType` - -
- - AutoFitType - - -```ts -type AutoFitType = - | 'center' - | 'view' - | { - effectTiming?: Partial>; - padding?: Padding; - rules?: FitViewRules; - type: 'view'; - } - | { effectTiming?: Partial>; type: 'center' } - | { - alignment?: GraphAlignment; - effectTiming?: Partial>; - position: Point; - type: 'position'; - }; - -type FitViewRules = { - onlyOutOfViewport?: boolean; - onlyZoomAtLargerThanViewport?: boolean; - direction?: 'x' | 'y' | 'both'; - ratioRule?: 'max' | 'min'; - boundsType?: 'render' | 'layout'; -}; - -type GraphAlignment = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'center' | [number, number]; -``` - -
- -是否自适应容器，以及自适应的方式。`'view'` 表示缩放并平移以适配容器。`'center'` 表示仅平移不缩放以时图内容中心对齐容器中心。 - -## animate - -**类型**：`AnimateCfg` - -
- - AnimateCfg - - -```typescript -type AnimateCfg = { - /** - * 一次动画执行的时长（ms）。 - */ - duration?: number; - /** - * 动画的缓动函数。 - */ - easing?: string; - /** - * 动画开始前的延迟时长（ms）。 - */ - delay?: number; - /** - * 动画执行的次数，Infinity 表示循环。 - */ - iterations?: number | typeof Infinity; - /** - * 动画结束时的回调函数。 - */ - callback?: () => void; - /** - * 动画暂停时的回调函数。 - */ - pauseCallback?: () => void; - /** - * 动画恢复时的回调函数。 - */ - resumeCallback?: () => void; -}; -``` - -
- -是否开启全局动画，优先级低于各 API 指定的动画。 - -## plugins - -**类型**：`PluginsCfg` - -
- - PluginsCfg - - -```typescript -type PluginsCfg = ( - | string - | { - // 若后续需要删改，需要指定唯一 key 用以检索 - key: string; - type: string; - // ... 其他配置，不同的插件配置不哦那个 - } - | PluginClass -)[]; -``` - -
- -配置自由插件。 - -**TODO**: 链接各个插件的配置文档 - -## optimize - -**类型**：`OptimizeCfg` - -
- - OptimizeCfg - - -```typescript -{ - /** 是否开启首屏的分片渲染。若指定 number，则表示开启分片渲染的元素数量上限*/ - tileFirstRender?: boolean | number; - /** 单片/一帧渲染包含的元素数量。*/ - tileFirstRenderSize?: number; - /** 是否在 drag-canvas, zoom-canvas 的现实隐藏图形过程中，启用分片渲染。若指定 number，则表示开启分片渲染的元素数量上限。但各个交互中的 enableOptimize 拥有更高的优先级。*/ - tileBehavior?: boolean | number; - /** 交互的分片渲染单片/一帧渲染的元素数量。但各个交互中的 enableOptimize 拥有更高的优先级。*/ - tileBehaviorSize?: number; - /** 信息分层分片渲染的单片/一帧渲染的元素数量。*/ - tileLodSize?: number; -} -``` - -
- -图实例性能优化配置项。控制首屏分片渲染、分片交互等。包括单片的元素数量和开启分片渲染的上限。后续可能继续添加与性能优化有关的配置内容。 diff --git a/packages/site/docs/apis/graph/method.en.md b/packages/site/docs/apis/graph/method.en.md new file mode 100644 index 00000000000..d72f0ed86b1 --- /dev/null +++ b/packages/site/docs/apis/graph/method.en.md @@ -0,0 +1,4 @@ +--- +title: API Methods +order: 1 +--- diff --git a/packages/site/docs/apis/graph/method.zh.md b/packages/site/docs/apis/graph/method.zh.md new file mode 100644 index 00000000000..efba8a5e8d2 --- /dev/null +++ b/packages/site/docs/apis/graph/method.zh.md @@ -0,0 +1,4 @@ +--- +title: API 方法 +order: 1 +--- diff --git a/packages/site/docs/apis/graph/option.en.md b/packages/site/docs/apis/graph/option.en.md new file mode 100644 index 00000000000..47e2121a991 --- /dev/null +++ b/packages/site/docs/apis/graph/option.en.md @@ -0,0 +1,4 @@ +--- +title: Options +order: 0 +--- diff --git a/packages/site/docs/apis/graph/option.zh.md b/packages/site/docs/apis/graph/option.zh.md new file mode 100644 index 00000000000..3de2a86cf14 --- /dev/null +++ b/packages/site/docs/apis/graph/option.zh.md @@ -0,0 +1,4 @@ +--- +title: Options 配置项 +order: 0 +--- diff --git a/packages/site/docs/apis/graph/property.en.md b/packages/site/docs/apis/graph/property.en.md new file mode 100644 index 00000000000..44aa01bc8ac --- /dev/null +++ b/packages/site/docs/apis/graph/property.en.md @@ -0,0 +1,4 @@ +--- +title: Properties +order: 2 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/graph/property.zh.md b/packages/site/docs/apis/graph/property.zh.md new file mode 100644 index 00000000000..846ecf2025b --- /dev/null +++ b/packages/site/docs/apis/graph/property.zh.md @@ -0,0 +1,4 @@ +--- +title: Properties 属性 +order: 2 +--- diff --git a/packages/site/docs/apis/item/combo/CircleCombo.en.md b/packages/site/docs/apis/item/combo/CircleCombo.en.md deleted file mode 100644 index 772cb0fe135..00000000000 --- a/packages/site/docs/apis/item/combo/CircleCombo.en.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Circle Combo -order: 1 ---- - -This article demonstrates the configuration options for Circle Combo. [Circle Combo DEMO](/en/examples/item/defaultCombos/#circle). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** Radius of the circle */ - r: number; -}; -``` - -The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "r": 16 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/combo/CircleCombo.zh.md b/packages/site/docs/apis/item/combo/CircleCombo.zh.md deleted file mode 100644 index 9a0ddc6d5e2..00000000000 --- a/packages/site/docs/apis/item/combo/CircleCombo.zh.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Circle Combo -order: 1 ---- - -本文展示圆形 Combo 配置项。[圆形 Combo DEMO](/zh/examples/item/defaultCombos/#circle)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** 圆的半径 */ - r: number; -}; -``` - -其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "r": 16 -} -``` - -
- -关键图形 - - diff --git a/packages/site/docs/apis/item/combo/ComboIntro.en.md b/packages/site/docs/apis/item/combo/ComboIntro.en.md deleted file mode 100644 index dfab6ed1929..00000000000 --- a/packages/site/docs/apis/item/combo/ComboIntro.en.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Overview -order: 0 ---- - -Combo is a special type of node in G6, which can contain multiple nodes and edges, and can be used to represent a complex node. - -## Composition of Combo - -In G6, a Combo is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `badgeShapes`, and `otherShapes`. - -- `keyShape`: The main shape of the Combo, usually used to represent the main shape of the Combo, and also used to calculate the incoming position of the Combo. - -- `labelShape`: The text label shape of the Combo, usually used to display the name or description of the Combo. - -- `labelBackgroundShape`: The text label background shape of the Combo, usually used to provide a background color for the text label. - -- `iconShape`: The icon shape of the Combo, usually used to display the icon of the Combo. - -- `badgeShapes`: The badge shape of the Combo, usually used to display the badge of the Combo. - -- `otherShapes`: Other shapes of the Combo, usually used to display other information or status of the Combo. - -Taking the circular Combo as an example, its main shape is a [circle](/en/apis/shape/circle-style-props): - -node sketch - -## Registration and Usage of Combos - -This directory lists all the built-in Combos in G6. G6 registers `circle-combo` and `rect-combo` by default. Additionally, to use a custom Combo, it needs to be registered: - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - combos: { - 'custom-combo': CustomCombo, - }, -}); - -/** - * After registration, it can be used in instantiation or subsequent API calls - */ -const graph = new Graph({ - /** - * ...other configuration items - */ - combo: { - /** - * The type is consistent with the key name used during registration - */ - type: 'custom-combo', - /** - * ... other configuration items of the combo - */ - }, -}); -``` - -## 导航 - -- [Circle Combo](./CircleCombo.en.md): Circle Combo； -- [Rect Combo](./RectCombo.en.md): Rect Combo； -- [Custom Combo](./CustomCombo.en.md): Custom Combo diff --git a/packages/site/docs/apis/item/combo/ComboIntro.zh.md b/packages/site/docs/apis/item/combo/ComboIntro.zh.md deleted file mode 100644 index 8ddb34be65e..00000000000 --- a/packages/site/docs/apis/item/combo/ComboIntro.zh.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 概述 -order: 0 ---- - -Combo 是 G6 中的一种特殊的节点，它可以包含多个节点和边，可以用来表示一个复杂的节点。 - -## Combo 构成 - -在 G6 中，Combo 通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`badgeShapes` 和 `otherShapes` 构成。 - -- `keyShape`：Combo 的主图形，通常用于表示 Combo 的主要形状，同时也用于计算 Combo 的入射位置。 - -- `labelShape`：Combo 的文本标签形状，通常用于展示 Combo 的名称或描述。 - -- `labelBackgroundShape`：Combo 的文本标签背景形状，通常用于为文本标签提供背景色。 - -- `iconShape`：Combo 的图标形状，通常用于展示 Combo 的图标。 - -- `badgeShapes`：Combo 的徽标形状，通常用于展示 Combo 的徽标。 - -- `otherShapes`：Combo 的其他形状，通常用于展示 Combo 的其他信息或状态。 - -下面以圆形 Combo 为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： - -node sketch - -## Combo 的注册和使用 - -本目录列举了 G6 内置的所有 Combo。G6 默认注册了 `circle-combo` 和 `rect-combo`。此外，自定义 Combo 需注册： - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - combos: { - 'custom-combo': CustomCombo, - }, -}); - -/** - * 注册后方可在实例化或后续 API 调用中使用 - */ -const graph = new Graph({ - /** - * ...其他配置项 - */ - combo: { - /** - * type 与注册时命名的 key 一致 - */ - type: 'custom-combo', - /** - * ... 节点的其他配置项 - */ - }, -}); -``` - -## 导航 - -- [Circle Combo](./CircleCombo.zh.md)：圆形 Combo； -- [Rect Combo](./RectCombo.zh.md)：矩形 Combo； -- [Custom Combo](./CustomCombo.zh.md)：自定义 Combo diff --git a/packages/site/docs/apis/item/combo/CustomCombo.en.md b/packages/site/docs/apis/item/combo/CustomCombo.en.md deleted file mode 100644 index e51fd7915f5..00000000000 --- a/packages/site/docs/apis/item/combo/CustomCombo.en.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Custom Combo -order: 3 ---- - -In G6, if a built-in Combo does not meet a specific need, you can create a custom Combo by extending an existing Combo Type. This allows you to take advantage of G6's powerful built-in functionality while adding your own logic and style to Combo. [Custom Circle example DEMO](/zh/examples/item/customCombo#cCircle)。 - -Custom Combo can be created by inheriting from built-in Combo such as CircleCombo. See [ComboType](/en/manual/customize/extension-cats#3-combos) for a graphical representation of what can be inherited. - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; - -// Create custom edges, inheriting from CircleCombo -class CustomCombo extends Extensions.CircleCombo { - // Override member method to customize the drawing logic. -} - -// Extend the Graph class with the extend method to register the custom edge. -const ExtGraph = extend(Graph, { - combos: { - 'custom-combo': CustomCombo, - }, -}); - -// Create a graph instance using the extended Graph class, specifying ComboType as a custom Combo -const graph = new ExtGraph({ - // Other configuration items - combo: { - type: 'custom-combo', //Specify custom Combo - }, -}); -``` - -## Override methods - - - -## Member Methods - -`BaseNode` and its subclasses provide some member properties and methods for easily adding or updating shapes. - - - - diff --git a/packages/site/docs/apis/item/combo/CustomCombo.zh.md b/packages/site/docs/apis/item/combo/CustomCombo.zh.md deleted file mode 100644 index 644d8046592..00000000000 --- a/packages/site/docs/apis/item/combo/CustomCombo.zh.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 自定义 Combo -order: 3 ---- - -在 G6 中，如果内置 Combo 不能满足特定需求，可以通过扩展已有的 Combo 类型来创建自定义 Combo。这允许您利用 G6 强大的内置功能的同时，为 Combo 添加特有的逻辑和样式。[带有 Marker 的 Circle DEMO](/zh/examples/item/customCombo#cCircle)。 - -可以通过继承内置的 Combo （例如 CircleCombo），来创建自定义 Combo 。可继承图形参见： [Combo 类型](/manual/customize/extension-cats#3-combo-类型-combos) - -## 示例 - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; - -// 自定义节点类型，继承一个已有的 Combo 类型或节点基类 Extensions.BaseNode -class CustomCombo extends Extensions.CircleCombo { - // 覆写方法，可覆写的类方法见下文 -} - -const ExtGraph = extend(Graph, { - // 注册自定义节点 - combos: { - 'custom-combo': CustomCombo, - }, -}); - -const graph = new ExtGraph({ - // ... 其他配置 - combo: { - type: 'custom-combo', // 使用注册的 Combo - }, -}); -``` - -## 覆写方法 - -> ⚠️ 注意：`Combo` 的实现继承自基类 `BaseNode`，可以看作是一个 “特殊” 的节点。 - - - -## 成员属性及方法 - -`BaseNode` 及其子类提供了一些成员属性和方法，用于方便地新增或更新图形。 - - - - diff --git a/packages/site/docs/apis/item/combo/RectCombo.en.md b/packages/site/docs/apis/item/combo/RectCombo.en.md deleted file mode 100644 index 5d65eb97372..00000000000 --- a/packages/site/docs/apis/item/combo/RectCombo.en.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Rect Combo -order: 2 ---- - -This article demonstrates the configuration options for Rect Combo. [Rect Combo DEMO](/en/examples/item/defaultCombos/#rect). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * width - */ - width: number; - /** - * height - */ - height: number; -}; - -``` - - -The related rect style can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "width": "32", - "height": "32" -} - -``` -
- - - - diff --git a/packages/site/docs/apis/item/combo/RectCombo.zh.md b/packages/site/docs/apis/item/combo/RectCombo.zh.md deleted file mode 100644 index 11d2b48d6a7..00000000000 --- a/packages/site/docs/apis/item/combo/RectCombo.zh.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Rect Combo -order: 2 ---- - -本文展示矩形 Combo 配置项。[矩形 Combo DEMO](/zh/examples/item/defaultCombos/#rect)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & - { - /** - * 矩形的宽度 - */ - width: number, - /** - * 矩形的高度 - */ - height: number, - }; - -``` - - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "width": "32", - "height": "32" -} - -``` -
- - - - diff --git a/packages/site/docs/apis/item/edge/CubicEdge.en.md b/packages/site/docs/apis/item/edge/CubicEdge.en.md deleted file mode 100644 index 1f39405fdea..00000000000 --- a/packages/site/docs/apis/item/edge/CubicEdge.en.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Cubic -order: 4 ---- - -This article presents the general configuration options for drawing a Cubic third-order Bézier curve. [Cubic Third-Order Bézier Curve DEMO](/en/examples/item/defaultEdges#cubic)。 - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * Array of control points. Note that drawing a Cubic requires specifying two or more valid control points. If not specified or only one control point is specified, the corresponding control points will be calculated using `curveOffset` and `curvePosition`. - */ - controlPoints?: Point[]; - /** - * The distance of the control points from the line connecting the two endpoints, which can be understood as the degree of curvature of the control edge. - */ - curveOffset?: number | number[]; - /** - * The relative position of the control points on the line connecting the two endpoints, ranging from `0-1`. - */ - curvePosition?: number; - }; -``` - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/CubicEdge.zh.md b/packages/site/docs/apis/item/edge/CubicEdge.zh.md deleted file mode 100644 index 31b80c2b11e..00000000000 --- a/packages/site/docs/apis/item/edge/CubicEdge.zh.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Cubic 三阶贝塞尔曲线 -order: 4 ---- - -本文展示一般的 Cubic 三阶贝塞尔曲线绘制配置项。[Cubic 三阶贝塞尔曲线 DEMO](/zh/examples/item/defaultEdges#cubic)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 控制点数组。注意，绘制 Cubic 需要指定两个或两个以上有效的控制点。若不指定或者只有一个控制点时，将会通过 `curveOffset` 和 `curvePosition` 计算得到对应的控制点 - */ - controlPoints?: Point[]; - /** - * 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 - */ - curveOffset?: number | number[]; - /** - * 控制点在两端点连线上的相对位置，范围 `0-1` - */ - curvePosition?: number; - }; -``` - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md deleted file mode 100644 index fd780eb2d9b..00000000000 --- a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Cubic Horizontal -order: 5 ---- - -This article presents the configuration options for drawing a Cubic Horizontal Bézier curve. [Cubic Horizontal Bézier Curve DEMO](/en/examples/item/defaultEdges#horizontalCubic). It is important to note that when calculating control points, the focus is mainly on the distance along the x-axis, disregarding changes along the y-axis. - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * Array of control points. Note that drawing a Cubic requires specifying two or more valid control points. If not specified or only one control point is specified, the corresponding control points will be calculated using `curveOffset` and `curvePosition`. - */ - controlPoints?: Point[]; - /** - * The distance of the control points from the line connecting the two endpoints, which can be understood as the degree of curvature of the control edge. - */ - curveOffset?: number | number[]; - /** - * The relative position of the control points on the line connecting the two endpoints, ranging from `0-1`. - */ - curvePosition?: number; - }; -``` - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - - -- [PathStyleProps](../../shape/PathStyleProps.en.md) diff --git a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md deleted file mode 100644 index 0c2b92a11c4..00000000000 --- a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Cubic Horizontal 水平贝塞尔曲线 -order: 5 ---- - -本文展示 Cubic Horizontal 水平贝塞尔曲线绘制配置项。[Cubic Horizontal 水平贝塞尔曲线 DEMO](/zh/examples/item/defaultEdges#horizontalCubic)。特别注意，计算控制点时主要考虑 x 轴上的距离，忽略 y 轴的变化。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 控制点数组。注意，绘制 Cubic 需要指定两个或两个以上有效的控制点。若不指定或者只有一个控制点时，将会通过 `curveOffset` 和 `curvePosition` 计算得到对应的控制点 - */ - controlPoints?: Point[]; - /** - * 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 - */ - curveOffset?: number | number[]; - /** - * 控制点在两端点连线上的相对位置，范围 `0-1` - */ - curvePosition?: number; - }; -``` - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md b/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md deleted file mode 100644 index 7383605253d..00000000000 --- a/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Cubic Vertical -order: 6 ---- - -This article presents the configuration options for drawing a Cubic Vertical Bézier curve. [Cubic Vertical Bézier Curve DEMO](/en/examples/item/defaultEdges/#verticalCubic). It is important to note that when calculating control points, the focus is mainly on the distance along the y-axis, disregarding changes along the x-axis. - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * Array of control points. Note that drawing a Cubic requires specifying two or more valid control points. If not specified or only one control point is specified, the corresponding control points will be calculated using `curveOffset` and `curvePosition`. - */ - controlPoints?: Point[]; - /** - * The distance of the control points from the line connecting the two endpoints, which can be understood as the degree of curvature of the control edge. - */ - curveOffset?: number | number[]; - /** - * The relative position of the control points on the line connecting the two endpoints, ranging from `0-1`. - */ - curvePosition?: number; - }; -``` - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - - -- [PathStyleProps](../../shape/PathStyleProps.en.md) diff --git a/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md b/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md deleted file mode 100644 index a41e879300a..00000000000 --- a/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Cubic Vertical 垂直贝塞尔曲线 -order: 6 ---- - -本文展示 Cubic Vertical 垂直贝塞尔曲线配置项。[Cubic Vertical 垂直贝塞尔曲线 DEMO](/zh/examples/item/defaultEdges/#verticalCubic)。特别注意，计算控制点时主要考虑 y 轴上的距离，忽略 x 轴的变化。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type Point = { - x: number; - y: number; - z?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 控制点数组。注意，绘制 Cubic 需要指定两个或两个以上有效的控制点。若不指定或者只有一个控制点时，将会通过 `curveOffset` 和 `curvePosition` 计算得到对应的控制点 - */ - controlPoints?: Point[]; - /** - * 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 - */ - curveOffset?: number | number[]; - /** - * 控制点在两端点连线上的相对位置，范围 `0-1` - */ - curvePosition?: number; - }; -``` - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "curveOffset": 20, - "curvePosition": 0.5 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/CustomEdge.en.md b/packages/site/docs/apis/item/edge/CustomEdge.en.md deleted file mode 100644 index 09d2a48d18d..00000000000 --- a/packages/site/docs/apis/item/edge/CustomEdge.en.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Custom Edge -order: 8 ---- - -In G6, if a built-in edge does not meet a specific need, you can create a custom edge by extending an existing edge Type. This allows you to leverage the powerful built-in functionality of G6 while adding unique logic and style to the edge. - -Custom edges can be created by inheriting from built-in edges, such as LineEdge. For inheritable graphics, see: [Edge Type](/en/manual/customize/extension-cats#2-边Typeedges). - -## Example - -```js -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; - -// Custom edge type, inherit an existing edge type or edge base class Extensions.BaseEdge -class CustomNode extends Extensions.LineEdge { - // Override methods, see the following section for methods that can be overridden -} - -const Graph = extend(BaseGraph, { - // Register custom edge - edges: { - 'custom-edge': CustomEdge, - }, -}); - -const graph = new Graph({ - // ... Other configurations - edge: { - type: 'custom-edge', // Use the registered edge - }, -}); -``` - -## Override method - -### draw - -:::info -In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section. -::: - -**Type**: `draw` - -
- -draw - -```typescript -type draw = ( - model: EdgeDisplayModel, - sourcePoint: Point, - targetPoint: Point, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes. - -The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`. - -Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) method of the `line-edge` type edge for overriding. - -### afterDraw - -**Type**: `afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: EdgeDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types. - -### drawKeyShape - -**Type**: `drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = ( - model: EdgeDisplayModel, - sourcePoint: Point, - targetPoint: Point, - shapeMap: EdgeShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draw the main shape (`keyShape`), which is required. - -### drawLabelShape - -**Type**: `drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draw the text shape (`labelShape`) - -Refer to [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194) for overriding. - -### drawLabelBackgroundShape - -**Type**: `drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draw the background shape of the text shape (`labelBackgroundShape`) - -Refer to [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311) for overriding. - -### drawIconShape - -**Type**: `drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draw the icon shape of the edge. - -### drawHaloShape - -**Type**: `drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states. - -Refer to [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464) for overriding. - -### drawOtherShapes - -**Type**: `drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [id: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Draws other shapes of the edge. Other shapes in a custom edge should be defined and configured in `otherShapes`. - -### getMergedStyles - -**Type**: `getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -将 display model 数据中定义的样式与边的默认和主题样式合并 - -## Member properties and methods - -`BaseEdge` and its subclasses provide some member properties and methods that can be used when customizing edges. - -### getControlPoints - -**Type**: `getControlPoints` - -
- -getControlPoints - -The `getControlPoints` type of `Extensions.PolylineEdge` is: - -```typescript -( - /** Edge rendering data */ - model: EdgeDisplayModel, - /** Edge start point */ - sourcePoint: Point, - /** Edge end point */ - targetPoint: Point, -) => -/** Calculated control points */ -{ - x: number; - y: number; - z?: number; -}[] -``` - -The `getControlPoints` type of `Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` is: - -```typescript -( - /** Edge start point */ - startPoint: Point, - /** Edge end point */ - endPoint: Point, - /** Percentage of the projection of the control point on the line connecting the two end points, ranging from 0 to 1 */ - percent: number, - /** Control point configuration in data */ - controlPoints: Point[], - /** Arc distance */ - offset: number, -) => -/** Calculated control points */ -{ - x: number; - y: number; - z?: number; -}[]; -``` - -
- -Get the control points, usually used to calculate the path. For example, the control points of the polyline edge are the turning points, and the control points of the curved edge are the control points of the curve. - -When inheriting `Extensions.PolylineEdge`, `Extensions.QuadraticEdge`, `Extensions.CubicEdge`, `Extensions.CubicHorizontalEdge`, `Extensions.CubicVerticalEdge`, you can override `getControlPoints` to modify the logic of the control points. - -### getPath - -**Type**: `getPath` - -
- -getPath - -```typescript -( - /** Edge rendering data */ - model: EdgeDisplayModel, - /** Edge start point */ - points: Point[], - /** Radius of the polyline turning point */ - radius: number, - /** Edge end point */ - routeCfg?: RouterCfg, - /** Whether to use the A* algorithm */ - auto?: boolean, -) => - /** Path */ - string; -``` - -
-RouterCfg - -```ts -type RouterCfg = { - name: 'orth' | 'er'; - /** Spacing between lines and points */ - offset?: number; - /** Grid size */ - gridSize?: number; - /** Maximum allowable rotation angle (radian) */ - maxAllowedDirectionChange?: number; - /** Allowed edge directions */ - directions?: any[]; - /** Penalties */ - penalties?: {}; - /** Determine if use simple router for polyline when no obstacles */ - simple?: boolean; - /** Function to calculate the distance between two points */ - distFunc?: (p1: PolyPoint, p2: PolyPoint) => number; - /** Simplified function to find path */ - fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[]; - /** Maximum loops */ - maximumLoops?: number; - /** - * Whether to automatically avoid other nodes (obstacles) on the path - * Defaults to false. - */ - enableObstacleAvoidance?: boolean; -}; -``` - -
- -
- -The member method of `Extensions.PolylineEdge` can only be overridden when inheriting it to implement a custom edge. Because the automatic path-finding algorithm of the polyline is more complicated, this function is extracted separately. Also because of the complexity of the algorithm, the performance of the polyline edge is slightly worse. If there is a certain rule for drawing the polyline edge, you can inherit the built-in polyline edge and customize the `getPath` method to override the automatic path-finding logic. - - - - - -### upsertArrow - -**Type**: `upsertArrow` - -
- -upsertArrow - -```typescript -type upsertArrow = ( - position: 'start' | 'end', - arrowConfig: boolean | ArrowStyle, - bodyStyle: ShapeStyle, - model: EdgeDisplayModel, - resultStyle: ShapeStyle, -) => void; -``` - -For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md). - -
- -Add or update an arrow marker at the specified position on the edge. diff --git a/packages/site/docs/apis/item/edge/CustomEdge.zh.md b/packages/site/docs/apis/item/edge/CustomEdge.zh.md deleted file mode 100644 index 66a629b17e6..00000000000 --- a/packages/site/docs/apis/item/edge/CustomEdge.zh.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -title: 自定义边 -order: 8 ---- - -在 G6 中，如果内置边不能满足特定需求，可以通过扩展已有的边类型来创建自定义边。这允许您利用 G6 强大的内置功能的同时，为边添加特有的逻辑和样式。 - -可以通过继承内置的边（例如 LineEdge），来创建自定义边。可继承图形参见： [边类型](/manual/customize/extension-cats#2-边类型edges) - -## 示例 - -```js -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; - -// 自定义边类型，继承一个已有的边类型或边基类 Extensions.BaseEdge -class CustomNode extends Extensions.LineEdge { - // 覆写方法，可覆写的类方法见下文 -} - -const Graph = extend(BaseGraph, { - // 注册自定义边 - edges: { - 'custom-edge': CustomEdge, - }, -}); - -const graph = new Graph({ - // ... 其他配置 - edge: { - type: 'custom-edge', // 使用注册的节点 - }, -}); -``` - -## 覆写方法 - -### draw - -:::info{title=提示} -大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。 -::: - -**类型**：`draw` - -
- -draw - -```typescript -type draw = ( - model: EdgeDisplayModel, - sourcePoint: Point, - targetPoint: Point, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要复写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。 - -draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制边各部分。 - -你可以参考 `line-edge` 类型边的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) 方法进行覆写。 - -### afterDraw - -**类型**：`afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: EdgeDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -在 `draw` 函数完成之后执行的逻辑，也可以用于绘制更多的图形，返回值和 `draw` 方法一致。在内置的节点类型中，没有对它进行实现。 - -### drawKeyShape - -**类型**：`drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = ( - model: EdgeDisplayModel, - sourcePoint: Point, - targetPoint: Point, - shapeMap: EdgeShapeMap, -) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制主图形(`keyShape`)，该图形是必须的，例如直线边的主图形是一条直线(`line`) 以及首尾箭头(`arrow`)，曲线边的主图形则将直线换成了曲线路径(`path`)。 - -### drawLabelShape - -**类型**：`drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制文本图形（`labelShape`） - -若需要覆写，则可以参考 [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194) - -### drawLabelBackgroundShape - -**类型**：`drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制文本图形的背景框图形（`labelBackgroundShape`） - -若需要覆写，则可以参考 [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311) - -### drawIconShape - -**类型**：`drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制边的图标图形 - -### drawHaloShape - -**类型**：`drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制主图形轮廓图形(`haloShape`)，通常在 `selected`, `active` 状态下显示。 - -若需要覆写，则可以参考 [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464) - -### drawOtherShapes - -**类型**：`drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [id: string]: DisplayObject }; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 - -### getMergedStyles - -**类型**：`getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -将 display model 数据中定义的样式与边的默认和主题样式合并 - -## 成员属性及方法 - -继承的图形提供下列方法调用 - -### getControlPoints - -**类型**：`getControlPoints` - -
- -getControlPoints - -`Extensions.PolylineEdge` 的 `getControlPoints` 类型为： - -```typescript - ( - /** 边的渲染数据 */ - model: EdgeDisplayModel, - /** 边的起点 */ - sourcePoint: Point, - /** 边的终点 */ - targetPoint: Point, -) => /** 计算后的控制点 */ -{ - x: number; - y: number; - z?: number; -}[]; -``` - -`Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` 的 `getControlPoints` 类型为： - -```typescript -( - /** 边的起点 */ - startPoint: Point, - /** 边的终点 */ - endPoint: Point, - /** 控制点的投影在两端点连线上的百分比，范围 0 到 1 */ - percent: number, - /** 数据中控制点配置 */ - controlPoints: Point[], - /** 弧度距离 */ - offset: number, -) => -/** 计算后的控制点 */ -{ - x: number; - y: number; - z?: number; -}[]; -``` - -
- -获取控制点，通常用于计算路径。例如折线边的控制点是拐点，曲线边的控制点是曲线的控制点。 - -当继承 Extensions.PolylineEdge、Extensions.QuadraticEdge、Extensions.CubicEdge、Extensions.CubicHorizontalEdge、Extensions.CubicVerticalEdge 时，可以通过复写 `getControlPoints` 来修改控制点的逻辑。 - -### getPath - -**类型**：`getPath` - -
- -draw - -```typescript -( - /** 边的渲染数据 */ - model: EdgeDisplayModel, - /** 起点和终点 */ - points: Point[], - /** 折线拐点的弧度 */ - radius: number, - /** 折线弯折的配置 */ - routeCfg?: RouterCfg, - /** 是否使用 A* 算法 */ - auto?: boolean, -) => - /** 路径 */ - string; -``` - -
- -RouterCfg - -```ts -type RouterCfg = { - name: 'orth' | 'er'; - /** 线与点之间的间距 */ - offset?: number; - /** 网格大小 */ - gridSize?: number; - /** 最大旋转角度（弧度） */ - maxAllowedDirectionChange?: number; - /** 允许的边的方向 */ - directions?: any[]; - /** 起点和终点的权重 */ - penalties?: {}; - /** 是否使用简单的折线拐点寻径算法 */ - simple?: boolean; - /** 计算两点之间距离的函数 */ - distFunc?: (p1: PolyPoint, p2: PolyPoint) => number; - /** 简化的寻径函数 */ - fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[]; - /** 最大循环次数 */ - maximumLoops?: number; - /** 是否自动避开障碍物，默认为 false */ - enableObstacleAvoidance?: boolean; -}; -``` - -
- -
- -`Extensions.PolylineEdge` 的成员方法，仅在继承它来实现自定义边时可复写。由于折线的自动寻径算法比较复杂，因此单独抽出了这个函数。也由于算法复杂性，折线边的性能稍差。如果有确定的折线边绘制规则，可以通过继承内置折线边，自定义 `getPath` 方法覆盖自动寻径的逻辑。 - - - - - -### upsertArrow - -**类型**：`upsertArrow` - -
- -upsertArrow - -```typescript -type upsertArrow = ( - position: 'start' | 'end', - arrowConfig: boolean | ArrowStyle, - bodyStyle: ShapeStyle, - model: EdgeDisplayModel, - resultStyle: ShapeStyle, -) => void; -``` - -其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 - -
- -在边的指定位置添加或更新箭头标记 diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.en.md b/packages/site/docs/apis/item/edge/EdgeIntro.en.md deleted file mode 100644 index 5eee3e98e3a..00000000000 --- a/packages/site/docs/apis/item/edge/EdgeIntro.en.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Overview -order: 0 ---- - -## Composition of Edge - -In G6, an edge is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, and `otherShapes`. - -- `keyShape`: The main shape of the edge, usually used to represent the main shape of the edge, and also used to calculate the incoming position of the edge. - -- `labelShape`: The text label shape of the edge, usually used to display the name or description of the edge. - -- `labelBackgroundShape`: The text label background shape of the edge, usually used to provide a background color for the text label. - -- `iconShape`: The icon shape of the edge, usually used to display the icon of the edge. - -- `otherShapes`: Other shapes of the edge, usually used to display other information or status of the edge. - -Taking the polyline edge as an example, its main shape is a [polyline](/en/apis/shape/polyline-style-props): - -node sketch - -## Registration and Use of Edges - -This directory lists all the built-in edges in G6. To reduce the package size, G6 5.0 only registers `line-edge` and `loop-edge` by default. **Therefore, before using these built-in edges, you also need to register them in G6.** Similarly, custom edges should be registered as follows: - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - nodes: { - 'cubic-edge': Extensions.CubicEdge, - }, -}); - -/** - * Registration is required before use in instantiation or subsequent API calls - */ -const graph = new Graph({ - /** - * ...other configuration options - */ - edge: { - type: 'cubic-edge', - /** - * type corresponds to the key named at registration - */ - /** - * ... see specific edge configurations for other edge options - */ - }, -}); -``` - -## Navigation - -- [Line Edge](./LineEdge.en.md): A straight line edge connecting two nodes. -- [Polyline Edge](./PolylineEdge.en.md): A polyline that draws a connection line with one or more bends between two nodes. -- [Quadratic Edge](./QuadraticEdge.en.md): A quadratic Bézier curve formed through a control point. -- [Cubic Edge](./CubicEdge.en.md): A cubic Bézier curve with two or more control points for more complex curve shapes. -- [Cubic Horizontal Edge](./CubicHorizontalEdge.en.md): Specifically for horizontal cubic Bézier curves. -- [Cubic Vertical Edge](./CubicVerticalEdge.en.md): Specifically for vertical cubic Bézier curves. -- [Loop Edge](./LoopEdge.en.md): Used to draw self-loop edges on nodes, where the edge's start and end points are the same node. -- [Custom Edge](./CustomEdge.en.md): If the built-in edges do not meet specific needs, G6 offers the ability to customize edges, allowing users to create edges with unique behaviors and styles. diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md deleted file mode 100644 index 7e140f64b6b..00000000000 --- a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 概述 -order: 0 ---- - -## 边构成 - -在 G6 中，边通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`otherShapes` 构成。 - -- `keyShape`：边的主图形，通常用于表示边的主要形状，同时也用于计算边的入射位置。 - -- `labelShape`：边的文本标签形状，通常用于展示边的名称或描述。 - -- `labelBackgroundShape`：边的文本标签背景形状，通常用于为文本标签提供背景色。 - -- `iconShape`：边的图标形状，通常用于展示边的图标。 - -- `otherShapes`：边的其他形状，通常用于展示边的其他信息或状态。 - -以折线边为例，其主图形为一个[折线](/apis/shape/polyline-style-props)： - -node sketch - -## 边的注册和使用 - -本目录列举了 G6 内置的所有边。G6 5.0 为了减少包体积，仅默认注册了 `line-edge` 和 `loop-edge`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - nodes: { - 'cubic-edge': Extensions.CubicEdge, - }, -}); - -/** - * 注册后方可在实例化或后续 API 调用中使用 - */ -const graph = new Graph({ - /** - * ...其他配置项 - */ - edge: { - type: 'cubic-edge', - /** - * type 与注册时命名的 key 一致 - */ - /** - * ... 边的其他配置项详见具体边配置 - */ - }, -}); -``` - -## 导航 - -- [Line Edge](./LineEdge.zh.md)：直线边，连接两个节点。 -- [Polyline Edge](./PolylineEdge.zh.md)：折线，在两个节点间绘制含有一个或多个折点的连接线。 -- [Quadratic Edge](./QuadraticEdge.zh.md)：二次贝塞尔曲线，通过一个控制点来形成曲线。 -- [Cubic Edge](./CubicEdge.zh.md)：三次贝塞尔曲线，有两个或两个以上的控制点提供更复杂的曲线形状。 -- [Cubic Horizontal Edge](./CubicHorizontalEdge.zh.md)：特别针对水平方向的三次贝塞尔曲线。 -- [Cubic Vertical Edge](./CubicVerticalEdge.zh.md)：特别针对垂直方向的三次贝塞尔曲线。 -- [Loop Edge](./LoopEdge.zh.md)：用于绘制节点自环边，即边的起点和终点是同一个节点。 -- [Custom Edge](./CustomEdge.zh.md)：如果内置边不能满足特定需求，G6 提供了自定义边的能力，用户可以创建具有独特行为和样式的边。 diff --git a/packages/site/docs/apis/item/edge/LineEdge.en.md b/packages/site/docs/apis/item/edge/LineEdge.en.md deleted file mode 100644 index c2011d169dc..00000000000 --- a/packages/site/docs/apis/item/edge/LineEdge.en.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Line -order: 1 ---- - -This article presents the configuration options for Line edges. [Line Edge DEMO](/en/examples/item/defaultEdges/#line). - - - -## keyShape - -**Type**: `LineStyleProps & ArrowProps` - - - -For more detailed style configuration, refer to [Line Graphic Style](../shape/LineStyleProps.en.md). - -**Default**: undefined - - diff --git a/packages/site/docs/apis/item/edge/LineEdge.zh.md b/packages/site/docs/apis/item/edge/LineEdge.zh.md deleted file mode 100644 index 6899ff33930..00000000000 --- a/packages/site/docs/apis/item/edge/LineEdge.zh.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Line 直线 -order: 1 ---- - -本文展示 Line 直线边配置项。[Line 直线边 DEMO](/zh/examples/item/defaultEdges/#line)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = LineStyleProps & ArrowProps; -``` - -其中，相关的图形样式参考 [Line 图形样式](../shape/LineStyleProps.zh.md)。 - - - -
- -**默认值**：undefined - -关键图形 - - diff --git a/packages/site/docs/apis/item/edge/LoopEdge.en.md b/packages/site/docs/apis/item/edge/LoopEdge.en.md deleted file mode 100644 index a393363be9b..00000000000 --- a/packages/site/docs/apis/item/edge/LoopEdge.en.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Loop -order: 7 ---- - -This article presents the configuration options for Loop self-loop edges. [Loop Self-Loop Edge DEMO](/en/examples/item/defaultEdges#loop). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type LoopPosition = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'; - -type LoopCfg = { - /** - * Specifies the relative position of the self-loop to the node. - */ - position?: LoopPosition; - /** - * The distance from the edge of the node's keyShape to the topmost point of the self-loop. - * Used to specify the curvature of the self-loop. - **/ - dist?: number; - /** - * Specifies whether to draw the loop in a clockwise direction. - */ - clockwise?: boolean; - /** - * For non-circular nodes, it specifies the offset of the connection point from the node center coordinates - * (top-right, bottom-right, top-left, bottom-left are special cases - * referring to the coordinates of the four corners) in the x or y direction. - **/ - pointPadding?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - loopCfg?: LoopCfg; - }; -``` - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "loopCfg": { - "position": "top", - "dist": "[2 * node width and height]", - "clockwise": true, - "pointPadding": "[1/4 * the minimum of node width and height]" - } -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/LoopEdge.zh.md b/packages/site/docs/apis/item/edge/LoopEdge.zh.md deleted file mode 100644 index 3fd44bbf814..00000000000 --- a/packages/site/docs/apis/item/edge/LoopEdge.zh.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Loop 自环边 -order: 7 ---- - -本文展示 Loop 自环边配置项。[Loop 自环边 DEMO](/zh/examples/item/defaultEdges#loop)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type LoopPosition = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'; - -type LoopCfg = { - /** - * 指定自环与节点的相对位置 - */ - position?: LoopPosition; - /** - * 从节点 keyShape 的边缘到自环最顶端的位置，用于指定自环的曲度 - */ - dist?: number; - /** - * 指定是否顺时针画环 - */ - clockwise?: boolean; - /** - * 对于非圆形节点设置的连接点与节点中心坐标（top-right，bottom-right,top-left,bottom-left 较特殊，为四个角坐标）在 x 轴或 y 轴方向的偏移量 - */ - pointPadding?: number; -}; - -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 自环边配置 - */ - loopCfg?: LoopCfg; - }; -``` - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "loopCfg": { - "position": "top", - "dist": "[节点宽高中最大值的2倍]", - "clockwise": true, - "pointPadding": "[节点宽高中最小值的1/4]" - } -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/PolylineEdge.en.md b/packages/site/docs/apis/item/edge/PolylineEdge.en.md deleted file mode 100644 index d44ff73f1a2..00000000000 --- a/packages/site/docs/apis/item/edge/PolylineEdge.en.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Polyline -order: 2 ---- - -This article presents the configuration options for Polyline edges. [Polyline Edge DEMO](/en/examples/item/defaultEdges/#polyline1). [Polyline obstacle avoidance DEMO](/en/examples/item/defaultEdges#polyline3). - - - - - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * The radius of the corners at turns. Default is right angles. - */ - radius?: number; - /** - * The minimum distance from the node at the turn. - */ - offset?: number; - /** - * Array of control points. - */ - controlPoints?: Point[]; - /** - * 路由参数,在数据中不存在 controlPoints 时生效，此时 polyline 将自动计算路径 - */ - routeCfg?: RouteCfg; - }; -``` - -`RouteCfg` 如下: - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "offset": 2 -} -``` - -
- -| Props | Type | Default | Required | Description | -| ------------------------- | ------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | `'orth'` \| `'er'` | `'orth'` | No | Currently, two built-in routing methods `orth` and `er` are supported | -| offset | `number` | undefined | No | The minimum distance from the node at the turn | -| gridSize | `number` | `10` | No | The grid size for calculating the polyline, smaller values lead to higher performance consumption | -| maxAllowedDirectionChange | `number` | undefined | No | The maximum allowed angle of direction change, in radians. For example, `Math.PI / 2` for orthogonal routing `orth`, and `Math.PI / 4` for metro routing `er` | -| enableObstacleAvoidance | `boolean` | `false` | No | Whether to enable automatic obstacle avoidance | - -Note that, if not specified `controlPoints`, polyline control points are automatically generated based on the [A\* algorithm](https://www.yuque.com/antv/blog/eyi70n). If specified, the polyline will bend at the locations specified by `controlPoints`. - - diff --git a/packages/site/docs/apis/item/edge/PolylineEdge.zh.md b/packages/site/docs/apis/item/edge/PolylineEdge.zh.md deleted file mode 100644 index 9a4fe46a5a7..00000000000 --- a/packages/site/docs/apis/item/edge/PolylineEdge.zh.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Polyline 折线 -order: 2 ---- - -本文展示 Polyline 折线配置项。[Polyline 折线边 DEMO](/zh/examples/item/defaultEdges/#polyline1)。[Polyline 自动避障 DEMO](/zh/examples/item/defaultEdges#polyline3) - - - - - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 拐弯处的圆角弧度，默认为直角 - */ - radius?: number; - /** - * 拐弯处距离节点最小距离 - */ - offset?: number; - /** - * 控制点数组 - */ - controlPoints?: Point[]; - /** - * 路由参数,在数据中不存在 controlPoints 时生效，此时 polyline 将自动计算路径 - */ - routeCfg?: RouteCfg; - }; -``` - -`RouteCfg` 定义如下： - -| 属性 | 类型 | 默认值 | 是否必须 | 说明 | -| ------------------------- | ------------------ | --------- | -------- | -------------------------------------------------------------------------------------------------- | -| name | `'orth'` \| `'er'` | `'orth'` | 否 | 目前内置两种路由方式 `orth` 和 `er` | -| offset | `number` | undefined | 否 | 拐弯处距离节点最小距离 | -| gridSize | `number` | `10` | 否 | 计算折线的网格大小，值越小性能消耗越高 | -| maxAllowedDirectionChange | `number` | undefined | 否 | 允许的最大转角角度，弧度制。例如，正交路由 `orth` 为 `Math.PI / 2`, 地铁路由 `er` 为 `Math.PI / 4` | -| enableObstacleAvoidance | `boolean` | `false` | 否 | 是否开启自动避障 | - -特别说明，`controlPoints` 不指定时根据 [A\* 算法](https://www.yuque.com/antv/blog/eyi70n)自动生成折线。若指定了，则按照 `controlPoints` 指定的位置进行弯折 - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "offset": 2 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/edge/QuadraticEdge.en.md b/packages/site/docs/apis/item/edge/QuadraticEdge.en.md deleted file mode 100644 index b509d268e3e..00000000000 --- a/packages/site/docs/apis/item/edge/QuadraticEdge.en.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Quadratic -order: 3 ---- - -This article presents the configuration options for Quadratic second-order Bézier curves. [Quadratic Second-Order Bézier Curve Edge DEMO](/en/examples/item/defaultEdges#quadratic). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * Array of control points. If not specified, the corresponding control points will be calculated using `curveOffset` and `curvePosition`. - */ - controlPoints?: Point[]; - /** - * The distance of the control points from the line connecting the two endpoints, which can be understood as the degree of curvature of the control edge. - */ - curveOffset?: number | number[]; - /** - * The relative position of the control points on the line connecting the two endpoints, ranging from `0-1`. - */ - curvePosition?: number | number[]; - }; -``` - - - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "curveOffset": 30, - "curvePosition": 0.5 -} -``` - -
- -- **Required**: 否 - - diff --git a/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md b/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md deleted file mode 100644 index 4148774584a..00000000000 --- a/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Quadratic 二阶贝塞尔曲线 -order: 3 ---- - -本文展示 Quadratic 二阶贝塞尔曲线配置项。[Quadratic 二阶贝塞尔曲线边 DEMO](/zh/examples/item/defaultEdges#quadratic)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = PathStyleProps & - ArrowProps & { - /** - * 控制点数组。不指定时将会通过 `curveOffset` 和 `curvePosition` 计算出相应的控制点 - */ - controlPoints?: Point[]; - /** - * 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 - */ - curveOffset?: number | number[]; - /** - * 控制点在两端点连线上的相对位置，范围 `0-1` - */ - curvePosition?: number | number[]; - }; -``` - - - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "curveOffset": 30, - "curvePosition": 0.5 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/CircleNode.en.md b/packages/site/docs/apis/item/node/CircleNode.en.md deleted file mode 100644 index 26735a9bf39..00000000000 --- a/packages/site/docs/apis/item/node/CircleNode.en.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Circle -order: 1 ---- - -This section details all the configuration options for Circle-shaped nodes. [Circle DEMO](/en/examples/item/defaultNodes/#circle)。 - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** radius of circle */ - r: number; -}; -``` - -For more detailed style configuration, refer to [Circle](../shape/CircleStyleProps.en.md)。 - -
- -**Default**:`object` - -
- -object - -```json -{ - "r": 16 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/CircleNode.zh.md b/packages/site/docs/apis/item/node/CircleNode.zh.md deleted file mode 100644 index 136ccc24f4b..00000000000 --- a/packages/site/docs/apis/item/node/CircleNode.zh.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Circle 圆形 -order: 1 ---- - -本文展示所有 Circle 圆形节点配置项。[Circle 圆形节点 DEMO](/zh/examples/item/defaultNodes/#circle)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** 圆的半径 */ - r: number; -}; - -``` - - -其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "r": 16 -} - -``` -
- - - - diff --git a/packages/site/docs/apis/item/node/CubeNode.en.md b/packages/site/docs/apis/item/node/CubeNode.en.md deleted file mode 100644 index 9399fd293b4..00000000000 --- a/packages/site/docs/apis/item/node/CubeNode.en.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Cube -order: 11 ---- - -The following section details the configuration options for Cube (立方体) nodes, as demonstrated in the [Cube DEMO](/en/examples/item/defaultNodes/#3d-node). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = { - /** - * The width of the cube - */ - width?: number; - /** - * The height of the cube - */ - height?: number; - /** - * The depth of the cube - */ - depth?: number; - /** - * The number of segments along the width of the cube. This value affects the details and procedural generation effects of the cube. - */ - widthSegments?: number; - /** - * The number of segments along the height of the cube. Similarly, this affects the cube's details and procedural generation effects. - */ - heightSegments?: number; - /** - * The number of segments along the depth of the cube. It influences the details and procedural generation effects of the cube. - */ - depthSegments?: number; -}; -``` - -
- -**Default**:`object` - -
- -object - -```json -{ - "width": 10, - "height": 10, - "depth": 10, - "widthSegments": 1, - "heightSegments": 1, - "depthSegments": 1 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/CubeNode.zh.md b/packages/site/docs/apis/item/node/CubeNode.zh.md deleted file mode 100644 index 584134dd379..00000000000 --- a/packages/site/docs/apis/item/node/CubeNode.zh.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Cube 立方体 -order: 11 ---- - -本文展示所有 Cube 立方体节点配置项。[Cube 立方体节点 DEMO](/zh/examples/item/defaultNodes/#3d-node)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = { - /** - * 立方体的宽度 - */ - width?: number; - /** - * 立方体的高度 - */ - height?: number; - /** - * 立方体的深度 - */ - depth?: number; - /** - * 立方体宽度方向上的分段数量。这个数值影响立方体的细节和程序化生成的效果 - */ - widthSegments?: number; - /** - * 立方体高度方向上的分段数量。同样影响立方体的细节和程序化生成的效果 - */ - heightSegments?: number; - /** - * 立方体深度方向上的分段数量。影响立方体的细节和程序化生成的效果 - */ - depthSegments?: number; -}; -``` - -
- -**默认值**：`object` - -
- -object - -```json -{ - "width": 10, - "height": 10, - "depth": 10, - "widthSegments": 1, - "heightSegments": 1, - "depthSegments": 1 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/CustomNode.en.md b/packages/site/docs/apis/item/node/CustomNode.en.md deleted file mode 100644 index d46d023073e..00000000000 --- a/packages/site/docs/apis/item/node/CustomNode.en.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Custom node -order: 13 ---- - -In G6, if a built-in node does not meet a specific need, you can create a custom node by extending an existing node Type. This allows you to take advantage of G6's powerful built-in functionality while adding your own logic and style to the node. - -Custom nodes can be created by inheriting from built-in nodes such as CircleNode. See [NodeType](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes) for a graphical representation of what can be inherited. - -## Example - -```js -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; - -// Custom node type, inherit an existing node type or node base class Extensions.BaseNode -class CustomNode extends Extensions.CircleNode { - // Override methods, see the following section for methods that can be overridden -} - -const Graph = extend(BaseGraph, { - // Register custom node - nodes: { - 'custom-node': CustomNode, - }, -}); - -const graph = new Graph({ - // ... Other configurations - node: { - type: 'custom-node', // Use the registered node - }, -}); -``` - -## Override methods - - - -## Member Methods - -`BaseNode` and its subclasses provide some member properties and methods for easily adding or updating shapes. - - - - diff --git a/packages/site/docs/apis/item/node/CustomNode.zh.md b/packages/site/docs/apis/item/node/CustomNode.zh.md deleted file mode 100644 index 23ce97f45b6..00000000000 --- a/packages/site/docs/apis/item/node/CustomNode.zh.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 自定义节点 -order: 13 ---- - -在 G6 中，如果内置节点不能满足特定需求，可以通过扩展已有的节点类型来创建自定义节点。这允许您利用 G6 强大的内置功能的同时，为节点添加特有的逻辑和样式。 - -可以通过继承内置的节点（例如 CircleNode），来创建自定义节点。可继承图形参见： [节点类型](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes) - -## 示例 - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; - -// 自定义节点类型，继承一个已有的节点类型或节点基类 Extensions.BaseNode -class CustomNode extends Extensions.CircleNode { - // 覆写方法，可覆写的类方法见下文 -} - -const ExtGraph = extend(Graph, { - // 注册自定义节点 - nodes: { - 'custom-node': CustomNode, - }, -}); - -const graph = new ExtGraph({ - // ... 其他配置 - node: { - type: 'custom-node', // 使用注册的节点 - }, -}); -``` - -## 覆写方法 - - - -## 成员属性及方法 - -`BaseNode` 及其子类提供了一些成员属性和方法，用于方便地新增或更新图形。 - - - - diff --git a/packages/site/docs/apis/item/node/CustomNode3D.en.md b/packages/site/docs/apis/item/node/CustomNode3D.en.md deleted file mode 100644 index 341d418824f..00000000000 --- a/packages/site/docs/apis/item/node/CustomNode3D.en.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Custom 3D node -order: 14 ---- - -In G6, if a built-in 3D node does not meet a specific need, you can create a custom node by extending an existing node Type. This allows you to take advantage of G6's powerful built-in functionality while adding your own logic and style to the node. - -Custom nodes can be created by inheriting from built-in nodes such as SphereNode. See [3D NodeType](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes) for a graphical representation of what can be inherited. - -```ts -import { Graph, Extensions, extend } from '@antv/g6'; - -/** - * Create custom edges, inheriting from CircleNode - */ -class CustomNode extends Extensions.SphereNode { - /** - * Override member method to customize the drawing logic. - */ -} - -/** - * Extend the Graph class with the extend method to register the custom edge. - */ -const ExtGraph = extend(Graph, { - nodes: { - 'custom-node': CustomNode, - }, -}); - -/** - * Create a graph instance using the extended Graph class, specifying the nodeType as a custom node - */ -const graph = new ExtGraph({ - /** - * ... Other configuration items - */ - node: { - type: 'custom-node', - /** - * Specify custom node - */ - /** - * ... See node-specific configuration for additional configuration items - */ - }, -}); -``` - -## Override methods - -### draw - -**Type**: `draw` - -
- -draw - -```typescript -type draw = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw all shapes associated with a node. - -### drawKeyShape - -**Type**: `drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the key shape - -### drawLabelShape - -**Type**: `drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the label shape of the node. - -### drawLabelBackgroundShape - -**Type**: `drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the label background shape of the node. - -### drawIconShape - -**Type**: `drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the icon shape of the node. - -### drawHaloShape - -**Type**: `drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the halo shape of the node. - -### drawAnchorShapes - -**Type**: `drawAnchorShapes` - -
- -drawAnchorShapes - -```typescript -type drawAnchorShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the anchors shape of the node. - -### drawBadgeShapes - -**Type**: `drawBadgeShapes` - -
- -drawBadgeShapes - -```typescript -type drawBadgeShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the badges shape of the node. - -### drawOtherShapes - -**Type**: `drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { [id: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw other shapes(such as preRect,stateIcon) of the node. - -### afterDraw - -**Type**: `afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: EdgeDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Perform additional drawing operations or add custom shapes after drawing node. - -### getMergedStyles - -**Type**: `getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Merge style. - -## Member Methods - -Inherited shapes provide the following method calls - -### upsertShape - -**Type**: `upsertShape` - -
- -upsertShape - -```typescript -type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group'; - -type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane'; - -type upsertShape = ( - type: SHAPE_TYPE | SHAPE_TYPE_3D, - id: string, - style: ShapeStyle, - shapeMap: NodeShapeMap | ComboShapeMap, - model: NodeDisplayModel | ComboDisplayModel, -) => DisplayObject; -``` - -
- -Create (if not existing in shapeMap) or update a shape based on configuration. diff --git a/packages/site/docs/apis/item/node/CustomNode3D.zh.md b/packages/site/docs/apis/item/node/CustomNode3D.zh.md deleted file mode 100644 index 9f182b7c5fe..00000000000 --- a/packages/site/docs/apis/item/node/CustomNode3D.zh.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: 自定义 3D 节点 -order: 14 ---- - -在 G6 中，如果内置 3D 节点不能满足特定需求，可以通过扩展已有的节点类型来创建自定义节点。这允许您利用 G6 强大的内置功能的同时，为节点添加特有的逻辑和样式。 - -可以通过继承内置的节点（例如 SphereNode），来创建自定义 3D 节点。可继承图形参见： [节点类型](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes) - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; - -/** - * 创建自定义边，继承自 CircleNode - */ -class CustomNode extends Extensions.SphereNode { - /** - * 重载成员方法，自定义绘制逻辑 - */ -} - -/** - * 使用 extend 方法扩展 Graph 类，注册自定义边 - */ -const ExtGraph = extend(Graph, { - nodes: { - 'custom-node': CustomNode, - }, -}); - -/** - * 使用扩展后的 Graph 类创建图实例，指定节点类型为自定义节点 - */ -const graph = new ExtGraph({ - /** - * ...其他配置项 - */ - node: { - /** - * 指定自定义节点 - */ - type: 'custom-node', - /** - * ...其他配置项详见具体节点配置 - */ - }, -}); -``` - -## 覆写方法 - -### draw - -**类型**：`draw` - -
- -draw - -```typescript -type draw = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -
- -用于绘制与节点相关的所有图形 - -### drawKeyShape - -**类型**：`drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; -``` - -
- -用于绘制关键图形 - -### drawLabelShape - -**类型**：`drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -
- -绘制节点的文本标签图形 - -### drawLabelBackgroundShape - -**类型**：`drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -
- -绘制节点的文本的背景图形 - -### drawIconShape - -**类型**：`drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -
- -绘制节点的图标图形 - -### drawHaloShape - -**类型**：`drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -
- -绘制节点的光晕图形 - -### drawAnchorShapes - -**类型**：`drawAnchorShapes` - -
- -drawAnchorShapes - -```typescript -type drawAnchorShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -
- -绘制节点的锚点图形 - -### drawBadgeShapes - -**类型**：`drawBadgeShapes` - -
- -drawBadgeShapes - -```typescript -type drawBadgeShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -
- -绘制节点的徽标图形 - -### drawOtherShapes - -**类型**：`drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { [id: string]: DisplayObject }; -``` - -
- -绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 - -### afterDraw - -**类型**：`afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: EdgeDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -
- -绘制后执行其他绘图操作或添加自定义形状 - -### getMergedStyles - -**类型**：`getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; -``` - -
- -将 display model 数据中定义的样式与默认样式和主题样式合并 - -## 成员方法 - -继承的图形提供下列方法调用 - -### upsertShape - -**类型**：`upsertShape` - -
- -upsertShape - -```typescript -type upsertShape = ( - type: SHAPE_TYPE | SHAPE_TYPE_3D, - id: string, - style: ShapeStyle, - shapeMap: NodeShapeMap | ComboShapeMap, - model: NodeDisplayModel | ComboDisplayModel, -) => DisplayObject; -``` - -
- -根据配置创建（如果在 shapeMap 中不存在）或更新形状 diff --git a/packages/site/docs/apis/item/node/DiamondNode.en.md b/packages/site/docs/apis/item/node/DiamondNode.en.md deleted file mode 100644 index 2c20cc951e0..00000000000 --- a/packages/site/docs/apis/item/node/DiamondNode.en.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Diamond -order: 5 ---- - -This section details the configuration options for the keyShape of Diamond (菱形) nodes, as showcased in the [Diamond Node DEMO](/en/examples/item/defaultNodes/#diamond). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The width and height of the diamond. If `size` is a single number, the width and height are the same. - */ - size?: number | [number, number]; -}; -``` - -For more detailed style configuration, refer to [Path](../shape/PathStyleProps.en.md)。 - -
- -**Default**:`object` - -
- -object - -```json -{ - "size": [32, 32] -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/DiamondNode.zh.md b/packages/site/docs/apis/item/node/DiamondNode.zh.md deleted file mode 100644 index 31db88335db..00000000000 --- a/packages/site/docs/apis/item/node/DiamondNode.zh.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Diamond 菱形 -order: 5 ---- - -本文展示所有 Diamond 菱形节点 `keyShape` 配置项。[Diamond 菱形节点 DEMO](/zh/examples/item/defaultNodes/#diamond)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 菱形的宽高。`size` 为一个数值时，宽高相同 - */ - size?: number | [number, number]; -}; -``` - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "size": [32, 32] -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/DonutNode.en.md b/packages/site/docs/apis/item/node/DonutNode.en.md deleted file mode 100644 index f699413158b..00000000000 --- a/packages/site/docs/apis/item/node/DonutNode.en.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Donut -order: 3 ---- - -This article shows all Donut donut configuration items。[Donut DEMO](/en/examples/item/defaultNodes/#donut)。 - - - -## DonutShapesStyle - -**类型**：`DonutShapesStyle` - -
- -DonutShapesStyle - -```typescript -type DonutShapesStyle = CircleStyleProps & { - /** - * donut innerRadius. - */ - innerRadius?: number; - /** - * donut cfg. - */ - donuts: Round[]; -}; -``` - -Among them, the related graph configuration reference [Circle](../shape/CircleStyleProps.zh.md)。 - -
- -default: `object` - -
- -object - -```json -{ - "innerRadius": 0.5, - "donuts": [], -} -``` - -**type**：`Round` - -
- -Round - -```typescript -type Round = { - /** - * 数值，用于计算比例 - * - * Numerical value used to calculate the scale. - */ - value?: number; - /** - * 颜色 - * - * Color. - */ - color?: string; - /** - * 其他圆弧(path)样式配置 - * - * Other arc style configurations. - */ - [key: string]: any; -}; -``` diff --git a/packages/site/docs/apis/item/node/DonutNode.zh.md b/packages/site/docs/apis/item/node/DonutNode.zh.md deleted file mode 100644 index d4ab7665a16..00000000000 --- a/packages/site/docs/apis/item/node/DonutNode.zh.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Donut 甜甜圈 -order: 3 ---- - -本文展示所有 Donut 甜甜圈配置项。[Donut 甜甜圈 DEMO](/zh/examples/item/defaultNodes/#donut)。 - - - -## DonutShapesStyle - -**类型**：`DonutShapesStyle` - -
- -DonutShapesStyle - -```typescript -type DonutShapesStyle = CircleStyleProps & { - /** - * 甜甜圈的内径 - */ - innerRadius?: number; - /** - * 甜甜圈配置 - */ - donuts: Round[]; -}; -``` - -其中，相关的图形配置参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 - -
- -默认值：`object` - -
- -object - -```json -{ - "innerRadius": 0.5, - "donuts": [], -} -``` - -**类型**：`Round` - -
- -Round - -```typescript -type Round = { - /** - * 数值，用于计算比例 - * - * Numerical value used to calculate the scale. - */ - value?: number; - /** - * 颜色 - * - * Color. - */ - color?: string; - /** - * 其他圆弧(path)样式配置 - * - * Other arc style configurations. - */ - [key: string]: any; -}; -``` diff --git a/packages/site/docs/apis/item/node/EllipseNode.en.md b/packages/site/docs/apis/item/node/EllipseNode.en.md deleted file mode 100644 index 49328973a2c..00000000000 --- a/packages/site/docs/apis/item/node/EllipseNode.en.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Ellipse -order: 10 ---- - -This section outlines the configuration options for Ellipse (椭圆) nodes, as demonstrated in the [Ellipse Node DEMO](/en/examples/item/defaultNodes/#ellipse). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The horizontal radius of the ellipse. This attribute determines the width of the ellipse. - */ - rx?: number; - /** - * The vertical radius of the ellipse. This attribute determines the height of the ellipse. - */ - ry?: number; -}; -``` - -For more detailed style configuration, refer to [Ellipse](../shape/EllipseStyleProps.en.md)。 - -
- -**Default**:`object` - -
- -object - -```json -{ - "rx": 16, - "ry": 12 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/EllipseNode.zh.md b/packages/site/docs/apis/item/node/EllipseNode.zh.md deleted file mode 100644 index b1ca7cfeb12..00000000000 --- a/packages/site/docs/apis/item/node/EllipseNode.zh.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Ellipse 椭圆 -order: 10 ---- - -本文展示所有 Ellipse 椭圆配置项。[Ellipse 椭圆 DEMO](/zh/examples/item/defaultNodes/#ellipse)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 椭圆的水平半径。此属性决定了椭圆的宽度 - */ - rx?: number; - /** - * 椭圆的垂直半径。此属性决定了椭圆的高度 - */ - ry?: number; -}; -``` - -其中，相关的图形样式参考 [Ellipse 图形样式](../shape/EllipseStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "rx": 16, - "ry": 12 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/HexagonNode.en.md b/packages/site/docs/apis/item/node/HexagonNode.en.md deleted file mode 100644 index dc33db4f7df..00000000000 --- a/packages/site/docs/apis/item/node/HexagonNode.en.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Hexagon -order: 6 ---- - -This section details the configuration options for Hexagon (六边形) nodes, as shown in the [Hexagon Node DEMO](/en/examples/item/defaultNodes/#hexagon). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The size of the radius of the hexagon's circumcircle. - */ - r?: number; - /** - * The orientation of the hexagon. It can be either vertical (`vertical`) or horizontal (`horizontal`), determining the hexagon's orientation on the canvas. - */ - direction?: 'vertical' | 'horizontal'; -}; -``` - -For more detailed style configuration, refer to [Polygon](../shape/PolygonStyleProps.en.md)。 - -
- -**Default**:`object` - -
- -object - -```json -{ - "r": 16, - "direction": "vertical" -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/HexagonNode.zh.md b/packages/site/docs/apis/item/node/HexagonNode.zh.md deleted file mode 100644 index 19079fcba62..00000000000 --- a/packages/site/docs/apis/item/node/HexagonNode.zh.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Hexagon 六边形 -order: 6 ---- - -本文展示所有 Hexagon 六边形配置项。[Hexagon 六边形 DEMO](/zh/examples/item/defaultNodes/#hexagon)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 六边形的外接圆半径大小 - */ - r?: number; - /** - * 六边形的方向。可以是垂直（`vertical`）或水平（`horizontal`）方向决定了六边形在画布上的朝向 - */ - direction?: 'vertical' | 'horizontal'; -}; -``` - -其中，相关的图形样式参考 [Polygon 图形样式](../shape/PolygonStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "r": 16, - "direction": "vertical" -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/ImageNode.en.md b/packages/site/docs/apis/item/node/ImageNode.en.md deleted file mode 100644 index 1d0ec2c3a78..00000000000 --- a/packages/site/docs/apis/item/node/ImageNode.en.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Image -order: 4 ---- - -This section details the configuration options for Image nodes, as demonstrated in the [Image Node DEMO](/en/examples/item/defaultNodes/#image). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The source address of the image. Can be a URL or a base64 encoded image data. - */ - src?: string; - /** - * The width of the image. - */ - width?: number; - /** - * The height of the image. - */ - height?: number; - /** - * Configuration for clipping the image. - */ - clipCfg?: ClipCfg; -}; -``` - -For more detailed style configuration, refer to [Image Graphic Style](../shape/ImageStyleProps.en.md). - -`ClipCfg` Definition: - -```typescript -type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse'; - -type ClipCfg = { - type: SHAPE_TYPE; - show: boolean; -} & CircleStyleProps & - RectStyleProps & - EllipseStyleProps; -``` - -This allows specifying the shape type for image clipping and its style. Depending on the target clipping shape type, style configurations vary. For example, for type as `'circle'`, refer to [Circle Graphic Style](../shape/CircleStyleProps.en.md); for `'rect'`, refer to [Rect Graphic Style](../shape/RectStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "width": "32", - "height": "32 -} - -``` - -
- - diff --git a/packages/site/docs/apis/item/node/ImageNode.zh.md b/packages/site/docs/apis/item/node/ImageNode.zh.md deleted file mode 100644 index 8c697c4aedb..00000000000 --- a/packages/site/docs/apis/item/node/ImageNode.zh.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Image 图片 -order: 4 ---- - -本文展示所有 Image 图片配置项。[Image 图片 DEMO](/zh/examples/item/defaultNodes/#image)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 图片的源地址。可以是 URL 或图像数据的 base64 编码 - */ - src?: string; - /** - * 图片的宽度 - */ - width?: number; - /** - * 图片的高度 - */ - height?: number; - /** - * 裁剪图片的配置 - */ - clipCfg?: ClipCfg; -}; -``` - -其中，相关的图形样式参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -`ClipCfg` 定义如下： - -```typescript -type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse'; - -type ClipCfg = { - type: SHAPE_TYPE; - show: boolean; -} & CircleStyleProps & - RectStyleProps & - EllipseStyleProps; -``` - -可以指定裁剪图形的类型及其样式。根据不同的目标裁剪图形类型，样式配置项不同。例如 `type` 是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "width": "32", - "height": "32 -} - -``` - -
- - diff --git a/packages/site/docs/apis/item/node/ModelRectNode.en.md b/packages/site/docs/apis/item/node/ModelRectNode.en.md deleted file mode 100644 index 87efd72dbc2..00000000000 --- a/packages/site/docs/apis/item/node/ModelRectNode.en.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ModelRect -order: 9 ---- - -This section details the configuration options for ModelRect nodes, as demonstrated in the [ModelRect Node DEMO](/en/examples/item/defaultNodes/#modelRect). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * Width of rect - */ - width: number; - /** - * height of rect - */ - height: number; -}; -``` - -The related rect style can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "width": 185, - "height": 70, - "stroke": "#69c0ff", - "fill": "#ffffff", - "lineWidth": 1, - "radius": 5 -} -``` - -
- -## otherShapes(extended) - -**Type**: `OtherShapesStyle` - -```typescript -type OtherShapesStyle = { - /** - * left rect - */ - preRect: RectStyleProps & { - show?: boolean; - }; - /** - * text description - */ - description: TextStyleProps & { - show?: boolean; - offsetX?: number; - offsetY?: number; - }; - /** - * left icon describing the information - */ - logoIcon: TextStyleProps & - IconStyleProps & { - show?: boolean; - width?: number; - height?: number; - offsetX?: number; - offsetY?: number; - }; - /** - * right icon describing the state - */ - stateIcon: TextStyleProps & - IconStyleProps & { - show?: boolean; - width?: number; - height?: number; - offsetX?: number; - offsetY?: number; - }; -}; -``` - -**Default**:`object` - -
- -object - -```json -{ - "preRect": { - "show": true, - "width": 5, - "fill": "#69c0ff", - "radius": 5 - }, - "logoIcon": { - "show": true, - "width": 16, - "height": 16, - "offsetX": 0, - "offsetY": 0, - "img": "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg" - }, - "stateIcon": { - "show": true, - "width": 16, - "height": 16, - "offsetX": 0, - "offsetY": 0, - "img": "https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg" - }, - "description": { - "show": true, - "maxLines": 1, - "textOverflow": "ellipsis", - "fill": "#C2C2C2", - "textBaseline": "middle", - "textAlign": "left", - "offsetX": 0, - "offsetY": 0 - } -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/ModelRectNode.zh.md b/packages/site/docs/apis/item/node/ModelRectNode.zh.md deleted file mode 100644 index f0ebc0f8b51..00000000000 --- a/packages/site/docs/apis/item/node/ModelRectNode.zh.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ModelRect 模态矩形 -order: 9 ---- - -本文展示所有 ModelRect 模态矩形配置项。[ModelRect 模态矩形 DEMO](/zh/examples/item/defaultNodes/#modelRect)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 矩形的宽度 - */ - width: number; - /** - * 矩形的高度 - */ - height: number; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "width": 185, - "height": 70, - "stroke": "#69c0ff", - "fill": "#ffffff", - "lineWidth": 1, - "radius": 5 -} -``` - -
- -## otherShapes(extended) - -**类型**：`OtherShapesStyle` - -```typescript -type OtherShapesStyle = { - /** - * left rect - */ - preRect: RectStyleProps & { - show?: boolean; - }; - /** - * text description - */ - description: TextStyleProps & { - show?: boolean; - offsetX?: number; - offsetY?: number; - }; - /** - * left icon describing the information - */ - logoIcon: TextStyleProps & - IconStyleProps & { - show?: boolean; - width?: number; - height?: number; - offsetX?: number; - offsetY?: number; - }; - /** - * right icon describing the state - */ - stateIcon: TextStyleProps & - IconStyleProps & { - show?: boolean; - width?: number; - height?: number; - offsetX?: number; - offsetY?: number; - }; -}; -``` - -**默认值**：`object` - -
- -object - -```json -{ - "preRect": { - "show": true, - "width": 5, - "fill": "#69c0ff", - "radius": 5 - }, - "logoIcon": { - "show": true, - "width": 16, - "height": 16, - "offsetX": 0, - "offsetY": 0, - "img": "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg" - }, - "stateIcon": { - "show": true, - "width": 16, - "height": 16, - "offsetX": 0, - "offsetY": 0, - "img": "https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg" - }, - "description": { - "show": true, - "maxLines": 1, - "textOverflow": "ellipsis", - "fill": "#C2C2C2", - "textBaseline": "middle", - "textAlign": "left", - "offsetX": 0, - "offsetY": 0 - } -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/NodeIntro.en.md b/packages/site/docs/apis/item/node/NodeIntro.en.md deleted file mode 100644 index 389a9434ced..00000000000 --- a/packages/site/docs/apis/item/node/NodeIntro.en.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Overview -order: 0 ---- - -## Composition of Node - -In G6, a node is usually composed of `keyShape`, `haloShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `anchorShapes` and `otherShapes`. - -- `keyShape`: The main shape of the node, usually used to represent the main shape of the node, and also used to calculate the incoming position of the edge. - -- `haloShape`: The halo effect of the main shape (`keyShape`) of the node when the node is in `active` (such as **hover** state) and `selected` (such as **selected** state). - -- `labelShape`: The text label shape of the node, usually used to display the name or description of the node. - -- `labelBackgroundShape`: The text label background shape of the node, usually used to provide a background color for the text label. - -- `iconShape`: The icon shape of the node, usually used to display the icon of the node. - -- `badgeShapes`: The badge shape of the node, usually used to display the badge of the node. - -- `anchorShapes`: The circular shape (anchor) of the edge incoming position around the node, anchorShapes configures multiple anchors. [Node Anchor DEMO](/examples/item/defaultNodes/#circle) - -- `otherShapes`: Other shapes of the node, usually used to display other information or status of the node. - -Taking the circular node as an example, its key shape is a [circle](/en/apis/shape/circle-style-props): - -node sketch - -## Registration and Usage of Nodes - -This directory lists all built-in nodes in G6. To reduce package size, G6 version 5.0 only registers `circle-node` and `rect-node` by default. **Therefore, before using these built-in nodes, you need to register them in G6 as well.** Similarly, custom nodes should be registered as follows: - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - nodes: { - 'ellipse-node': Extensions.EllipseNode, - 'diamond-node': Extensions.DiamondNode, - }, -}); - -/** - * Register before using in instantiation or subsequent API calls - */ -const graph = new Graph({ - /** - * ... other configuration options - */ - node: { - /** - * The type is consistent with the key name used during registration - */ - type: 'ellipse-node', - /** - * ... other node configuration options - */ - }, -}); -``` - -## Menu - -- [Circle Node](./CircleNode.en.md): Circle nodes, often used for simple and intuitive data representation. -- [Rect Node](./RectNode.en.md): Rectangular node, suitable for presenting structured data or as a basic layout element. -- [Donut Node](./DonutNode.en.md): Donut node, often used for displaying percentage or distribution type data. -- [Image Node](./ImageNode.en.md): Image node, suitable for scenarios where images or icons need to be displayed. -- [Diamond Node](./DiamondNode.en.md): Diamond node, can be used to represent connection points or special data. -- [Hexagon Node](./HexagonNode.en.md): Hexagonal node, suitable for building honeycomb data layouts. -- [Triangle Node](./TriangleNode.en.md): Triangle node, suitable for representing directional or hierarchical data. -- [Star Node](./StarNode.en.md): Star node, often used for data that represents ratings or highlights. -- [ModelRect Node](./ModelRectNode.en.md): Modal Rect Node. - Rectangular nodes of a special Type that may contain additional modal or interactive features. -- [Ellipse Node](./EllipseNode.en.md): Ellipse node, suitable for representing range or flow data. -- [Cube Node](./CubeNode.en.md): Cube node for 3D data presentation or special visual effects. -- [Sphere Node](./SphereNode.en.md): Sphere node, suitable for representing data in global or 3D space. -- [Custom Node](./CustomNode.en.md): G6 provides the ability to customize a node if the built-in edges do not meet specific needs. -- [Custom 3D Node](./Custom3DNode.en.md): Custom 3D node diff --git a/packages/site/docs/apis/item/node/NodeIntro.zh.md b/packages/site/docs/apis/item/node/NodeIntro.zh.md deleted file mode 100644 index 32ed381a6e2..00000000000 --- a/packages/site/docs/apis/item/node/NodeIntro.zh.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: 概述 -order: 0 ---- - -## 节点构成 - -在 G6 中，节点通常由 `keyShape`、`haloShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`anchorShapes` 和 `otherShapes` 组成。 - -- `keyShape`：节点的主图形，通常用于表示节点的主要形状，也用于计算边的连入位置。 - -- `haloShape`：节点在 `active`（如**hover**状态）和 `selected`（如**选中**状态） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。 - -- `labelShape`：节点的文本标签图形，通常用于展示节点的名称或描述。 - -- `labelBackgroundShape`：节点的文本标签背景图形，通常用于为文本标签提供背景色。 - -- `iconShape`：节点的图标图形，通常用于展示节点的图标。 - -- `badgeShapes`：节点的徽标图形，通常用于展示节点的徽标。 - -- `anchorShapes`：节点四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle) - -- `otherShapes`：节点的其他图形，通常用于展示节点的其他信息或状态。 - -下面以圆形节点为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： - -node sketch - -## 节点的注册和使用 - -本目录列举了 G6 内置的所有节点。G6 5.0 为了减少包体积，仅默认注册了 `circle-node` 和 `rect-node`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - nodes: { - 'ellipse-node': Extensions.EllipseNode, - 'diamond-node': Extensions.DiamondNode, - }, -}); - -/** - * 注册后方可在实例化或后续 API 调用中使用 - */ -const graph = new Graph({ - /** - * ...其他配置项 - */ - node: { - /** - * type 与注册时命名的 key 一致 - */ - type: 'ellipse-node', - /** - * ... 节点的其他配置项 - */ - }, -}); -graph.updateMapper('node', (model) => { - const { id, data } = model; - return { - id, - data: { - /** - * type 与注册时命名的 key 一致 - */ - type: 'diamond-node', - /** - * ... 节点的其他配置项 - */ - }, - }; -}); -``` - -## 导航 - -- [Circle Node](./CircleNode.zh.md)：圆形节点，通常用于简单且直观的数据表示。 -- [Rect Node](./RectNode.zh.md)：矩形节点，适用于展示结构化数据或作为基本的布局元素。 -- [Donut Node](./DonutNode.zh.md)：甜甜圈节点，常用于展示占比或分布类的数据。 -- [Image Node](./ImageNode.zh.md)：图片节点，适用于需要展示图片或图标的场景。 -- [Diamond Node](./DiamondNode.zh.md)：菱形节点，可用于表示连接点或特殊数据。 -- [Hexagon Node](./HexagonNode.zh.md)：六边形节点，适合用于构建蜂窝状的数据布局。 -- [Triangle Node](./TriangleNode.zh.md)：三角形节点，适用于表示方向性或层级的数据。 -- [Star Node](./StarNode.zh.md)：星形节点，常用于表示评级或突出重点的数据。 -- [ModelRect Node](./ModelRectNode.zh.md)：模态矩形节点。 - 特殊类型的矩形节点，可能包含额外的模态或交互特性。 -- [Ellipse Node](./EllipseNode.zh.md)：椭圆节点，适用于表示范围或流程的数据。 -- [Cube Node](./CubeNode.zh.md)：立方体节点，用于三维数据展示或特殊视觉效果。 -- [Sphere Node](./SphereNode.zh.md)：球体节点，适合于表示全局性或三维空间的数据。 -- [Custom Node](./CustomNode.zh.md)：如果内置边不能满足特定需求，G6 提供了自定义节点的能力。 -- [Custom 3D Node](./Custom3DNode.zh.md)：自定义 3D 节点 diff --git a/packages/site/docs/apis/item/node/RectNode.en.md b/packages/site/docs/apis/item/node/RectNode.en.md deleted file mode 100644 index bcec848dcea..00000000000 --- a/packages/site/docs/apis/item/node/RectNode.en.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Rect -order: 2 ---- - -This section provides details on the configuration options for Rect (矩形) nodes, as illustrated in the [Rect Node DEMO](/en/examples/item/defaultNodes/#rect). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The width of the rectangle. - */ - width: number; - /** - * The height of the rectangle. - */ - height: number; -}; -``` - -For more detailed style configuration, refer to [Rect Graphic Style](../shape/RectStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "width": "32", - "height": "32" -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/RectNode.zh.md b/packages/site/docs/apis/item/node/RectNode.zh.md deleted file mode 100644 index 88f9976602f..00000000000 --- a/packages/site/docs/apis/item/node/RectNode.zh.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Rect 矩形 -order: 2 ---- - -本文展示所有 Rect 矩形节点配置项。[Rect 矩形 DEMO](/zh/examples/item/defaultNodes/#rect)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 矩形的宽度 - */ - width: number; - /** - * 矩形的高度 - */ - height: number; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "width": "32", - "height": "32" -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/SphereNode.en.md b/packages/site/docs/apis/item/node/SphereNode.en.md deleted file mode 100644 index 9dbefd48455..00000000000 --- a/packages/site/docs/apis/item/node/SphereNode.en.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Sphere -order: 12 ---- - -This section details the configuration options for Sphere (球体) nodes, as showcased in the [Sphere Node DEMO](/en/examples/item/defaultNodes/#3d-node). - - - -## keyShape - -**Type**: `KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = { - /** - * The radius of the sphere. Determines the size of the sphere. - */ - r?: number; - /** - * The number of latitude bands of the sphere. This value affects the level of detail and rendering quality of the sphere. - */ - latitudeBands?: number; - /** - * The number of longitude bands of the sphere. Similarly, this affects the level of detail and rendering quality of the sphere. - */ - longitudeBands?: number; -}; -``` - -
- -**Default**:`object` - -
- -object - -```json -{ - "r": 5, - "latitudeBands": 32, - "longitudeBands": 32 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/SphereNode.zh.md b/packages/site/docs/apis/item/node/SphereNode.zh.md deleted file mode 100644 index 9ce001e5855..00000000000 --- a/packages/site/docs/apis/item/node/SphereNode.zh.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Sphere 球 -order: 12 ---- - -本文展示所有 Sphere 立方体节点配置项。[Sphere 球节点 DEMO](/zh/examples/item/defaultNodes/#3d-node)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = { - /** - * 球半径。决定了球体的大小 - */ - r?: number; - /** - * 球体的纬度带数量。这个数值影响球体的详细程度和渲染质量 - */ - latitudeBands?: number; - /** - * 球体的经度带数量。同样影响球体的详细程度和渲染质量 - */ - longitudeBands?: number; -}; -``` - -
- -**默认值**：`object` - -
- -object - -```json -{ - "r": 5, - "latitudeBands": 32, - "longitudeBands": 32 -} -``` - -
- - - - diff --git a/packages/site/docs/apis/item/node/StarNode.en.md b/packages/site/docs/apis/item/node/StarNode.en.md deleted file mode 100644 index 0bc421fe99c..00000000000 --- a/packages/site/docs/apis/item/node/StarNode.en.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Star -order: 8 ---- - -This section outlines the configuration options for Star (星形) nodes, as demonstrated in the [Star Node DEMO](/en/examples/item/defaultNodes/#star). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The size of the pentagram. - */ - outerR?: number; - /** - * The size of the inner circle of the pentagram. If `innerR` is not set, it is automatically calculated based on `outerR * 3 / 8`. - */ - innerR?: number; -}; -``` - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "outerR": 20 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/StarNode.zh.md b/packages/site/docs/apis/item/node/StarNode.zh.md deleted file mode 100644 index 65ea4b9d699..00000000000 --- a/packages/site/docs/apis/item/node/StarNode.zh.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Star 星形 -order: 8 ---- - -本文展示所有 Star 星形节点配置项。[Star 星形节点 DEMO](/zh/examples/item/defaultNodes/#star)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 五角星的大小 - */ - outerR?: number; - /** - * 五角星的内环大小。若未设置 `innerR`, 则自动根据 `outerR * 3 / 8` 计算 - */ - innerR?: number; -}; -``` - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "outerR": 20 -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/TriangleNode.en.md b/packages/site/docs/apis/item/node/TriangleNode.en.md deleted file mode 100644 index eb6d88687c8..00000000000 --- a/packages/site/docs/apis/item/node/TriangleNode.en.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Triangle -order: 7 ---- - -This section details the configuration options for Triangle (三角形) nodes, as illustrated in the [Triangle Node DEMO](/en/examples/item/defaultNodes/#triangle). - - - -## keyShape - -**Type**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * The size of the triangle. Here, it refers to the radius of the circumscribed circle of the triangle. - */ - r?: number; - /** - * The direction of the triangle. Can be 'up' (upward), 'left' (leftward), 'right' (rightward), or 'down' (downward). - */ - direction?: 'up' | 'left' | 'right' | 'down'; -}; -``` - -For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "r": 12, - "direction": "up" -} -``` - -
- - diff --git a/packages/site/docs/apis/item/node/TriangleNode.zh.md b/packages/site/docs/apis/item/node/TriangleNode.zh.md deleted file mode 100644 index e9956aa9249..00000000000 --- a/packages/site/docs/apis/item/node/TriangleNode.zh.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Triangle 三角形 -order: 7 ---- - -本文展示所有 Triangle 三角形节点配置项。[Triangle 三角形 DEMO](/zh/examples/item/defaultNodes/#triangle)。 - - - -## keyShape - -**类型**：`KeyShapeStyle` - -
- -KeyShapeStyle - -```typescript -type KeyShapeStyle = StyleProps & { - /** - * 三角形的大小。此处指的是三角形的外接圆半径 - */ - r?: number; - /** - * 三角形的方向。可以是 `'up'`（向上）、`'left'`（向左）、`'right'`（向右）或 `'down'`（向下）。 - */ - direction?: 'up' | 'left' | 'right' | 'down'; -}; -``` - -其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "r": 12, - "direction": "up" -} -``` - -
- - diff --git a/packages/site/docs/apis/layout/CircularLayoutOptions.en.md b/packages/site/docs/apis/layout/CircularLayoutOptions.en.md deleted file mode 100644 index cc38119ee0a..00000000000 --- a/packages/site/docs/apis/layout/CircularLayoutOptions.en.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Circular -order: 4 ---- - -This document showcases all the configuration options for circular layout. [Circular Layout DEMO](/en/examples/net/circular/#circularConfigurationTranslate). - - - - -## radius - -**Type**:`number` - -**Default**: Calculated from the sum of node size and spacing to form the circumference. - -The radius of the circular layout. If radius is set, `startRadius` and `endRadius` will not take effect. - -## center - -**Type**: `[number, number]` - -**Default**: The center position of the container. - -The center position of the circular layout. - -## clockwise - -**Type**: `boolean` - -**Default**: `true` - -Whether the layout is in clockwise direction. - -## divisions - -**Type**: `number` - -**Default**: `1` - -The number of divisions on the circumference (how many segments will be evenly distributed) when `endRadius` - `startRadius` != 0. - -## ordering - -**Type**: `'topology' | 'degree' | null` - -**Default**: `null` - -The basis for ordering nodes on the circumference. Default `null` means using the order in the data directly. `'topology'` for topological sorting. `'degree'` for sorting by node degree. - -## angleRatio - -**Type**: `number` - -**Default**: `1` - -How many 2\*pi intervals between the first and last node. - -## startRadius - -**Type**: `number | null` - -**Default**: `null` - -The starting radius for the spiral layout. - -## endRadius - -**Type**: `number | null` - -**Default**: `null` - -The ending radius for the spiral layout. - - - - diff --git a/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md b/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md deleted file mode 100644 index 013465f65d9..00000000000 --- a/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Circular 环形 -order: 4 ---- - -本文展示所有环形布局配置项。[环形布局 DEMO](/zh/examples/net/circular/#circularConfigurationTranslate)。 - - - - -## radius - -**类型**：`number` - -**默认值**： 默认从节点大小与间距形成的周长计算而得 - -环形布局的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效 - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -环形布局的中心位置 - -## clockwise - -**类型**：`boolean` - -**默认值**：`true` - -是否为顺时针布局 - -## divisions - -**类型**：`number` - -**默认值**：`1` - -节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 - -## ordering - -**类型**：`'topology' | 'degree' | null` - -**默认值**：`null` - -节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序 - -## angleRatio - -**类型**：`number` - -**默认值**：`1` - -从第一个节点到最后节点之间相隔多少个 2\*PI - -## startRadius - -**类型**：`number | null` - -**默认值**：`null` - -螺旋状布局的起始半径 - -## endRadius - -**类型**：`number | null` - -**默认值**：`null` - -螺旋状布局的结束半径 - - - - diff --git a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md deleted file mode 100644 index f32fca89e10..00000000000 --- a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: ComboCombined -order: 3 ---- - -This document showcases all the configuration options for the Combo combined layout. [ComboCombined Layout DEMO](/en/examples/net/comboLayout/#comboCombined). - - - -## center - -**Type**: `[number, number]` - -**Default**: The center of the canvas. - -The center of the layout. - -## outerLayout - -**Type**: `LayoutInstance` - -**Default**: Force layout instance - -**Description**:The outer layout algorithm, default to force. See the documentation of the used layout for specific parameters. By default, the force layout uses the following parameters: - -```javascript -outerLayout: new G6.Extensions.ForceLayout({ - gravity: 1, - factor: 2, - linkDistance: (edge: EdgeModel, source: NodeModel, target: NodeModel) => { - const nodeSize = ((source.data.size?.[0] || 30) + (target.data.size?.[0] || 30)) / 2; - return Math.min(nodeSize * 1.5, 700); - }, -}); -``` - -## innerLayout - -**Type**: `LayoutInstance` - -**Default**: Concentric layout instance - -The inner layout algorithm for the combo. It needs to use a synchronous layout algorithm, default to concentric. See the documentation of the used layout for specific parameters. By default, the concentric layout uses the following parameters: - -```javascript -innerLayout: new G6.Extensions.ConcentricLayout({ - sortBy: 'id', -}); -``` - -## comboPadding - -**Type**: `number | (comboModel: ComboModel) => number` - -**Default**: `10` - -The padding value inside the combo, not used for rendering, only used for force calculation. It is recommended to set it to the same value as the combo's internal padding on the view. Example: - -```javascript -(comboModel) => { - // comboModel is a combo inner model - if (d.id === 'combo1') { - return 100; - } - return 10; -}; -``` - - - -## spacing - - - -**Default**: `0` - -`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 - -**示例**： - -```typescript -(nodeModel: NodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - - diff --git a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md deleted file mode 100644 index 58865dc4386..00000000000 --- a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ComboCombined 复合 -order: 3 ---- - -本文展示所有 Combo 复合布局的配置项。[ComboCombined 布局 DEMO](/zh/examples/net/comboLayout/#comboCombined)。 - - - -## center - -**类型**：`[number, number]` - -**默认值**：画布中心 - -布局的中心 - -## outerLayout - -**类型**：`LayoutInstance` - -**默认值**：Force 布局 - -最外层的布局算法，默认为 `force`。具体参数详见被使用布局的文档。默认情况下 `force` 布局将使用以下参数： - -```javascript -outerLayout: new G6.Extensions.ForceLayout({ - gravity: 1, - factor: 2, - linkDistance: (edge: EdgeModel, source: NodeModel, target: NodeModel) => { - const nodeSize = ((source.data.size?.[0] || 30) + (target.data.size?.[0] || 30)) / 2; - return Math.min(nodeSize * 1.5, 700); - }, -}); -``` - -## innerLayout - -**类型**：`LayoutInstance` - -**默认值**：Concentric 布局 - -combo 内部的布局算法，需要使用同步的布局算法，默认为 `concentric`。具体参数详见被使用布局的文档。 -默认情况下 `concentric` 布局将使用以下参数： - -```javascript -innerLayout: new G6.Extensions.ConcentricLayout({ - sortBy: 'id', -}); -``` - -## comboPadding - -**类型**：`number | (comboModel: ComboModel) => number` - -**默认值**：`10` - -Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 Combo 内部 padding 值相同的值 - -```javascript -(comboModel) => { - // d is a combo inner model - if (d.id === 'combo1') { - return 100; - } - return 10; -}; -``` - - - -## spacing - - - -**默认值**：`0` - -`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 - -**Example**: - -```typescript -(nodeModel: NodeModel) => { - // d is a node's inner model - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - - diff --git a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md deleted file mode 100644 index ae7abfffefb..00000000000 --- a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: CompactBox -order: 13 ---- - -CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout. It comes from classical Reingold–Tilford tidy layout algorithm. - -img - -## direction - -**Type**: `'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` - -**Default**: `'LR'` - -The direction of layout. - -- TB —— Root is on the top, layout from the top to the bottom - -img - -- BT —— Root is on the bottom, layout from the bottom to the top - -img - -- LR —— Root is on the left, layout from the left to the right - -img - -- RL —— Root is on the right, layout from the right to the left - -img - -- H —— Root is on the middle, layout in horizontal symmetry. - -img - -- V —— Root is on the middle, layout in vertical symmetry. - -img - -## getSide - -**Type**: `function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'test-child-id') return 'right'; - return 'left'; -}; -``` - -**Default**: `'right'` - -The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it - -## getId - -**Type**: `function` - -**Example**: - -```javascript -(d) => { - // d is a node - return d.id + '_node'; -}; -``` - -Sets the id for each node - -## getWidth - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The width of each node - -## getHeight - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The height of each node - -## getHGap - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**Default**: 18 - -The horizontal separation of nodes - -## getVGap - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**Default**: 18 - -The vertical separation of nodes - -## radial - -**Type**: `boolean` - -**Default**: `false` - -If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`: - -img diff --git a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md deleted file mode 100644 index 2e01e09a33e..00000000000 --- a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: CompactBox 紧凑树 -order: 13 ---- - -紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的 Reingold–Tilford tidy 布局算法演进而来，适合于脑图等应用场景。 - -img - -## direction - -**类型**：`'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` - -**默认值**：`'LR'` - -树布局的方向，其他选项说明 - -- TB —— 根节点在上，往下布局 - -img - -- BT —— 根节点在下，往上布局 - -img - -- LR —— 根节点在左，往右布局 - -img - -- RL —— 根节点在右，往左布局 - -img - -- H —— 根节点在中间，水平对称布局 - -img - -- V —— 根节点在中间，垂直对称布局 - -img - -## getSide - -**类型**：`function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'test-child-id') return 'right'; - return 'left'; -}; -``` - -**默认值**：'right' - -节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 - -## getId - -**类型**: `function` - -**示例**: - -```javascript -(d) => { - // d is a node - return d.id + '_node'; -}; -``` - -节点 id 的回调函数 - -## getWidth - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的宽度 - -## getHeight - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的高度 - -## getHGap - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**默认值**：18 - -每个节点的水平间隙 - -## getVGap - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**默认值**：18 - -每个节点的垂直间隙 - -## radial - -**类型**：`boolean` - -**默认值**：false - -是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： - -img diff --git a/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md b/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md deleted file mode 100644 index 74cc765af14..00000000000 --- a/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Concentric -order: 8 ---- - -This document showcases all the configuration options for concentric layout. [Concentric Layout DEMO](/en/examples/net/concentricLayout/#basicConcentric). - - - -## center - -**Type**: `[number, number]` - -**Default**: center position of the current container - -The center position of the circular layout. - -## height - -**Type**: `number` - -**Default**: `undefined` - -The height of the layout. By default, it uses the height of the container. - -## width - -**Type**: `number` - -**Default**: `undefined` - -The width of the layout. By default, it uses the width of the container. - - - - - -## nodeSpacing - - - -**Default**: `10` - -The minimum spacing between rings. It is used to adjust the radius. - -## sortBy - -**Type**: `string` - -**Default**: `undefined` - -Specifies the basis for sorting (node attribute name). The higher the value, the more centrally the node will be placed. If `undefined`, the node degree will be calculated, and the higher the degree, the more centrally the node will be placed. - -## clockwise - -**Type**: `boolean` - -**Default**: `false` - -Whether to arrange nodes clockwise. - -## equidistant - -**Type**: `boolean` - -**Default**: `false` - -Whether the distance between rings is equal. - -## maxLevelDiff - -**Type**: `number` - -**Default**: `undefined` - -The sum of the concentric values at each level. If `undefined`, it will be set to `maxValue / 4`, where maxValue is the maximum attribute value of the sorting basis. For example, if sortBy is `'degree'`, `maxValue` is the degree of the node with the highest degree among all nodes. - -## startAngle - -**Type**: `number` - -**Default**: `3 / 2 * Math.PI` - -The starting radian for laying out nodes. - -## sweep - -**Type**: `number` - -**Default**: `undefined` - -The difference in radians between the first and last nodes. If `undefined`, it will be set to `2 * Math.PI * (1 - 1 / |level.nodes|)`, where level.nodes represents the nodes in each level calculated by the algorithm, and |level.nodes| represents the number of nodes in that level. diff --git a/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md b/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md deleted file mode 100644 index c92e7d6ab0f..00000000000 --- a/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Concentric 同心圆 -order: 8 ---- - -本文展示所有同心圆布局的配置项。[同心圆布局 DEMO](/zh/examples/net/concentricLayout/#basicConcentric)。 - - - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## height - -**类型**：`number` - -**默认值**：`undefined` - -布局的高度，默认使用容器高度 - -## width - -**类型**：`number` - -**默认值**：`undefined` - -布局的宽度，默认使用容器宽度 - - - - - -## nodeSpacing - - - -**默认值**：`10` - -环与环之间最小间距，用于调整半径 - -## sortBy - -**类型**：`string` - -**默认值**：`undefined` - -指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 `undefined`，则会计算节点的度数，度数越高，节点将被放置得越中心 - -## clockwise - -**类型**：`boolean` - -**默认值**：`false` - -是否按照顺时针排列 - -## equidistant - -**类型**：`boolean` - -**默认值**：`false` - -环与环之间的距离是否相等 - -## maxLevelDiff - -**类型**：`number` - -**默认值**：`undefined` - -每一层同心值的求和。若为 `undefined`，则将会被设置为 `maxValue / 4` ，其中 `maxValue` 为最大的排序依据的属性值。例如，若 `sortBy` 为 `'degree'`，则 `maxValue` 为所有节点中度数最大的节点的度数 - -## startAngle - -**类型**：`number` - -**默认值**：`3 / 2 * Math.PI` - -开始布局节点的弧度 - -## sweep - -**类型**：`number` - -**默认值**：`undefined` - -第一个节点与最后一个节点之间的弧度差。若为 `undefined` ，则将会被设置为 `2 * Math.PI * (1 - 1 / |level.nodes|) `，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量 diff --git a/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md b/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md deleted file mode 100644 index 742e5faa3b1..00000000000 --- a/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: D3Force -order: 11 ---- - -This document showcases all the configuration options for D3 Force layout. - -## presetLayout - -**Type**: `LayoutOptions` - -**Default**: `{ type: 'grid' }` - -The initial layout for force-directed layout. It will be executed before the force calculation. As the result of force-directed layout heavily depends on the initial positions of nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve a better effect. By default, the initial layout is the result of grid layout. - -## animated - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable iterative animation. Note that the force simulation of the layout is a process of force interactions. With this parameter enabled, you can see the collisions caused by the force interaction. The animated parameter of node configuration is interpolation animation, which means interpolating from the initial position to the position after layout. These two types of layouts should not be used together. - - - -## center - -**Type**: `[number, number]` - -**Default**: center position of the current container - -The center position of the circular layout. - -## linkDistance - -**Type**: `number | (model: EdgeModel) => number` - -**Default**: `50` - -The length of the edges. - - - -## nodeSpacing - -**Type**: `number` - -**Default**: `10` - -Effective when `preventOverlap` is `true`. It is the minimum value of the edge spacing when preventing overlap. It can be a callback function to set different minimum spacings for different nodes. - -**Example**: - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - -## nodeStrength - -**Type**: `number` - -**Default**: `-1` - -Strength of the clustering node. A negative value represents repulsion. - -## edgeStrength - -**Type**: `number | (model: EdgeModel) => number` - -**Default**: `null` - -Strength of the edges. The range is from 0 to 1. By default, it adapts to the in-degree and out-degree of the nodes. - -## collideStrength - -**Type**: `number` - -**Default**: `1` - -Strength of preventing overlap. The range is [0, 1]. - -## alpha - -**Type**: `number` - -**Default**: `0.3` - -The convergence threshold of the current iteration. - -## alphaDecay - -**Type**: `number` - -**Default**: `0.028` - -The decay rate of the iteration threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations. - -## alphaMin - -**Type**: `number` - -**Default**: `0.001` - -The threshold to stop iteration. - -## clustering - -**Type**: `boolean` - -**Default**: `false` - -Whether to layout according to clustering information. - -## clusterEdgeDistance - -**Type**: `number` - -**Default**: `100` - -The length of the clustering edge. - -## clusterEdgeStrength - -**Type**: `number` - -**Default**: `0.1` - -The strength of the clustering edge. - -## clusterFociStrength - -**Type**: `number` - -**Default**: `0.8` - -The force for foci. - -## clusterNodeSize - -**Type**: `number` - -**Default**: `10` - -The size/diameter of clustering nodes. The larger the diameter, the more dispersed they are. - -## clusterNodeStrength - -**Type**: `number` - -**Default**: `-1` - -The strength of clustering nodes. Negative values represent repulsion. - -## forceSimulation - -**Type**: `object` - -**Default**: `null` - -Custom force method. If not specified, the default method from d3.js will be used. - -## onTick - -**Type**: `function` - -**Default**: In G6, if `animated` is `true`, it calls the logic to update the rendering position of nodes on the canvas in each iteration callback. - -Callback function for each iteration. The return value is the layout result for that iteration. diff --git a/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md b/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md deleted file mode 100644 index 77cb5538364..00000000000 --- a/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: D3Force 力导向 -order: 11 ---- - -本文展示所有 D3 Force 力导布局配置项。 - -## presetLayout - -**类型**：`LayoutOptions` - -**默认值**：`{ type: 'grid' }` - -力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 - -## animated - -**类型**：`boolean` - -**默认值**：`false` - -是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配置 - - - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## linkDistance - -**类型**：`number | (model: EdgeModel) => number` - -**默认值**：`50` - -边长度 - - - -## nodeSpacing - -**类型**：`number` - -**默认值**：`10` - -`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 - -**示例**： - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - -## nodeStrength - -**类型**：`number` - -**默认值**：`-1` - -聚类节点作用力。负数代表斥力 - -## edgeStrength - -**类型**：`number | (model: EdgeModel) => number` - -**默认值**：`null` - -边的作用力，范围是 0 到 1，默认根据节点的出入度自适应 - -## collideStrength - -**类型**：`number` - -**默认值**：`1` - -防止重叠的力强度，范围 [0, 1] - -## alpha - -**类型**：`number` - -**默认值**：`0.3` - -当前的迭代收敛阈值 - -## alphaDecay - -**类型**：`number` - -**默认值**：`0.028` - -迭代阈值的衰减率。范围 [0, 1]。0.028 对应迭代数为 300 - -## alphaMin - -**类型**：`number` - -**默认值**：`0.001` - -停止迭代的阈值 - -## clustering - -**类型**：`boolean` - -**默认值**：`false` - -是否按照聚类信息布局 - -## clusterEdgeDistance - -**类型**：`number` - -**默认值**：`100` - -聚类边长度 - -## clusterEdgeStrength - -**类型**：`number` - -**默认值**：`0.1` - -聚类边作用力 - -## clusterFociStrength - -**类型**：`number` - -**默认值**：`0.8` - -用于 foci 的力 - -## clusterNodeSize - -**类型**：`number` - -**默认值**：`10` - -聚类节点大小 / 直径，直径越大，越分散 - -## clusterNodeStrength - -**类型**：`number` - -**默认值**：`-1` - -聚类节点作用力。负数代表斥力 - -## forceSimulation - -**类型**：`object` - -**默认值**：`null` - -自定义 force 方法，若不指定，则使用 d3.js 的方法 - -## onTick - -**类型**：`function` - -**默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 - -每一次迭代的回调函数，返回值为这一次迭代的布局结果 diff --git a/packages/site/docs/apis/layout/DagreLayoutOptions.en.md b/packages/site/docs/apis/layout/DagreLayoutOptions.en.md deleted file mode 100644 index 1e76bc1e910..00000000000 --- a/packages/site/docs/apis/layout/DagreLayoutOptions.en.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: DagreLayout -order: 2 ---- - -This article showcases all the configuration options for the hierarchical/flowchart layout. [Dagre Hierarchical/Flowchart Layout DEMO](/en/examples/net/dagreFlow/#dagre). - - - - -## Specify Node's Layer - -You can specify the layer of nodes by configuring the `data.layer` field in the node model (counting starts from `0`). Note that the specified `layer` must follow the principles of the graph structure and hierarchical layout, which means the `layer` of the starting point of each edge must be smaller than the `layer` of the ending point. Violating this rule may cause layout failure. - -## begin - -**Type**: `[number, number]` - -**Default**: `undefined` - -The top-left alignment position of the layout. - -## rankdir - -**Type**: `'TB' | 'BT' | 'LR' | 'RL'` - -**Default**: `'TB'` - -The direction of the layout. T: top; B: bottom; L: left; R: right. - -- `'TB'`: Top to bottom layout; -- `'BT'`: Bottom to top layout; -- `'LR'`: Left to right layout; -- `'RL'`: Right to left layout. - -## align - -**Type**: `'UL' | 'UR' | 'DL' | 'DR' | undefined` - -**Default**: `'UL'` - -The alignment of nodes. U: upper; D: down; L: left; R: right. - -- `'UL'`: Align to the upper left corner; -- `'UR'`: Align to the upper right corner; -- `'DL'`: Align to the lower left corner; -- `'DR'`: Align to the lower right corner; -- `undefined`: Default, center alignment. - - - -## nodesep - -**Type**: `number` - -**Default**: `50` - -The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. `nodesepFunc` has a higher priority. - -## nodesepFunc - -**Type**: `(nodeModel: NodeModel) => number` - -**Default**: undefined - -The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. It has a higher priority than `nodesep`, which means that if `nodesepFunc` is set, `nodesep` will not take effect. - -**Example**: - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'testId') return 100; - return 10; -}; -``` - -## ranksep - -**Type**: `number` - -**Default**: `50` - -The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. `ranksepFunc` has a higher priority. - -## ranksepFunc - -**Type**: `(nodeModel: NodeModel) => number` - -**Default**: `undefined` - -The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. It takes precedence over `nodesep`, which means that if `ranksepFunc` is set, `nodesep` will not take effect. - -**Example**: - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'testId') return 100; - return 10; -}; -``` - -## controlPoints - -**Type**: `boolean` - -**Default**: `false` - -Whether to calculate the control point positions on edges. It only works when the built-in polyline (`type: 'polyline-edge'`) is used in edge configuration, or any edge that consumes `data.controlPoints` as control point positions. Essentially, it adds `data.controlPoints` to the edge data. - -## preset - -**Type**: `preset` - -
- - preset - - -```typescript -type preset = { - nodes: { - x: number; // position - y: number; // position - layer?: number; // specify layer - _order?: number; // if it is the output of the previous dagre layout, there is this field, representing the order of the nodes in the same layer - }[]; -}; -``` - -
- -**Default**: undefined - -The reference node positions used in layout calculation. It is generally used to ensure the continuity of re-layout when switching data. In G6, if the data is updated, the existing layout result data will be automatically used as input. - -## nodeOrder - -**Type**: `string`[] - -**Default**: `false` - -An array that serves as a reference for the order of nodes in the same layer. It stores node id values. If not specified, the nodes in the same layer will be arranged according to the mechanism of dagre itself. - -## sortByCombo - -**Type**: `boolean` - -**Default**: `false` - -Suggested to be configured when there are Combos. Whether to sort the nodes in the same layer based on the `parentId` in each node data to avoid overlapping of Combos. - - diff --git a/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md b/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md deleted file mode 100644 index 82add08a40a..00000000000 --- a/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: DagreLayout 层次 -order: 2 ---- - -本文展示所有层次/流程图布局的配置项。[Dagre 层次/流程图布局 DEMO](/zh/examples/net/dagreFlow/#dagre)。 - - - - -## 指定节点层级 - -在节点数据中配置 `data.layer` 字段（从 `0` 开始计数），可以为节点指定层级。注意，`layer` 的指定不能违背图结构与层次布局原则，即每一条边的起点的 `layer` 一定小于终点的 `layer` 值。若违背该规则，则可能导致布局失败。 - -## begin - -**类型**：`[number, number]` - -**默认值**：`undefined` - -布局的左上角对齐位置 - -## rankdir - -**类型**：`'TB' | 'BT' | 'LR' | 'RL'` - -**默认值**：`'TB'` - -布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。 - -- `'TB'`：从上至下布局； -- `'BT'`：从下至上布局； -- `'LR'`：从左至右布局； -- `'RL'`：从右至左布局。 - -## align - -**类型**：`'UL' | 'UR' | 'DL' | 'DR' | undefined` - -**默认值**：`'UL'` - -节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右） - -- 'UL'：对齐到左上角； -- 'UR'：对齐到右上角； -- 'DL'：对齐到左下角； -- 'DR'：对齐到右下角； -- undefined：默认，中间对齐。 - - - -## nodesep - -**类型**：`number` - -**默认值**：`50` - -节点间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。`nodesepFunc` 拥有更高的优先级 - -## nodesepFunc - -**类型**：`(nodeModel: NodeModel) => number` - -**默认值**：undefined - -节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 - -**示例**： - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'testId') return 100; - return 10; -}; -``` - -## ranksep - -**类型**：`number` - -**默认值**：`50` - -层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。`ranksepFunc` 拥有更高的优先级 - -## ranksepFunc - -**类型**：`(nodeModel: NodeModel) => number` - -**默认值**：`undefined` - -层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 - -**示例**： - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model - if (nodeModel.id === 'testId') return 100; - return 10; -}; -``` - -## controlPoints - -**类型**：`boolean` - -**默认值**：`false` - -是否同时计算边上的的控制点位置，仅在边配置中使用了内置折线（`type: 'polyline-edge'`） 时，或任何将自定义消费了 `data.controlPoints` 字段作为控制点位置的边时生效。本质上就是给边数据增加了 `data.controlPoints` - -## preset - -**类型**：`prest` - -
- - prest - - -```typescript -type preset = { - nodes: { - x: number, // 位置 - y: number, // 位置 - layer?: number, // 指定层级 - _order?: number // 若为上一次 dagre 布局的输出，则有该字段，代表同层节点的顺序 - }[] -} -``` -
- -**默认值**：undefined - -布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入。 - -## nodeOrder - -**类型**：`string`[] - -**默认值**：`false` - -同层节点顺序的参考数组，存放节点 id 值。若未指定，则将按照 dagre 本身机制排列同层节点顺序。 - -## sortByCombo - -**类型**：`boolean` - -**默认值**：`false` - -建议在有 Combo 的情况下配置，同一层节点是否根据每个节点数据中的 `parentId` 进行排序，以防止 Combo 重叠 - - diff --git a/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md b/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md deleted file mode 100644 index 4f28ee4a6f9..00000000000 --- a/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Dendrogram -order: 14 ---- - -Dendrogram arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1px. - -img - -## direction - -**Type**: `'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` - -**Default**: `'LR'` - -The direction of layout. - -- TB —— Root is on the top, layout from the top to the bottom - -img - -- BT —— Root is on the bottom, layout from the bottom to the top - -img - -- LR —— Root is on the left, layout from the left to the right - -img - -- RL —— Root is on the right, layout from the right to the left - -img - -- H —— Root is on the middle, layout in horizontal symmetry. - -img - -- V —— Root is on the middle, layout in vertical symmetry. - -img - -## nodeSep - -**Type**: `number` - -**Default**: `0` - -Node separation - -## rankSep - -**Type**: `number` - -**Default**: `0` - -Level separation - -## radial - -**Type**: `boolean` - -**Default**: `false` - -Wheter layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`: - -img diff --git a/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md b/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md deleted file mode 100644 index ff9ea29f384..00000000000 --- a/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Dendrogram 生态树 -order: 14 ---- - -生态树布局的特点是所有子节点布局在同一层级，不考虑节点大小，每个节点被当成 1px 处理。适用于表示层次聚类。 - -img - -## direction - -**类型**：`'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` - -**默认值**：`'LR'` - -树布局的方向，默认为 `'LR'`，其他选项说明 - -- TB —— 根节点在上，往下布局 - -img - -- BT —— 根节点在下，往上布局 - -img - -- LR —— 根节点在左，往右布局 - -img - -- RL —— 根节点在右，往左布局 - -img - -- H —— 根节点在中间，水平对称布局 - -img - -- V —— 根节点在中间，垂直对称布局 - -img - -## nodeSep - -**类型**：`number` - -**默认值**：0 - -节点间距 - -## rankSep - -**类型**：`number` - -**默认值**：0 - -层与层之间的间距 - -## radial - -**类型**：`boolean` - -**默认值**：false - -是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： - -img diff --git a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md deleted file mode 100644 index 50af813cceb..00000000000 --- a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: ForceAtlas2 -order: 9 ---- - -This article showcases all the configuration options for the ForceAtlas2 force-directed layout. [ForceAtlas2 Force-Directed Layout DEMO](/en/examples/net/forceDirected/#basicFA2). - - - -## presetLayout - -**Type**: `LayoutOptions` - -**Default**: `{ type: 'grid' }` - -The initial layout for the force-directed layout. It will be applied before the force calculation. Since the result of the force-directed layout heavily depends on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve better results. By default, the initialization of the force-directed layout is the result of the grid layout. - -## center - -**Type**: `[number, number]` - -**Default**: The center of the current container - -The center position of the circular layout. - -## dimensions - -**Type**: `number` - -**Default**: `2` - -The dimensions of the layout. Set it to `2` for 2D rendering, or set it to `3` for 3D rendering to calculate the layout in the z-axis. - -## height - -**Type**: `number` - -**Default**: `undefined` - -The height of the layout. By default, the height of the container will be used. - -## width - -**Type**: `number` - -**Default**: `undefined` - -The width of the layout. By default, the width of the container will be used. - -## maxIteration - -**Type**: `number` - -**Default**: `0` - -The maximum number of iterations. If set to `0`, it will be adjusted automatically. - - - - - -## barnesHut - -**Type**: `boolean` - -**Default**: `undefined` - -Whether to enable Barnes-Hut acceleration, which is quad-tree acceleration. Since the quad-tree needs to be updated at each iteration, it is recommended to enable it on large-scale graphs. By default, it is undefined, and it will be activated when the number of nodes exceeds 250. Setting it to `false` will not automatically activate it. - -## dissuadeHubs - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable the hub mode. If `true`, nodes with higher in-degrees will be placed at the center with higher priority compared to nodes with higher out-degrees. - -## prune - -**Type**: `boolean` - -**Default**: `undefined` - -Whether to enable automatic pruning mode. By default, it is `undefined`, and it will be activated when the number of nodes exceeds 100. Note that pruning can improve convergence speed but may reduce the quality of the graph layout. Setting it to `false` will not automatically activate it. - -## tao - -**Type**: `number` - -**Default**: `0.1` - -The tolerance for stopping oscillations when the iteration is close to convergence. - -## kg - -**Type**: `number` - -**Default**: `5` - -The gravity coefficient. The larger the kg, the more the layout will be concentrated in the center. - -## kr - -**Type**: `number` - -**Default**: `5` - -The repulsion coefficient, which can be used to adjust the compactness of the layout. The larger the `kr`, the looser the layout. - -## ks - -**Type**: `number` - -**Default**: `0.1` - -Controls the speed of node movement during iteration. - -## ksmax - -**Type**: `number` - -**Default**: `10` - -The upper limit of the maximum node movement speed during iteration. - -## mode - -**Type**: `'normal' | 'linlog'` - -**Default**: `'normal'` - -In `'linlog'` mode, clustering will be more compact. - -## onTick - -**Type**: `function` - -**Default**: `undefined` - -The callback function for each iteration. The return value is the layout result for this iteration. - - diff --git a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md deleted file mode 100644 index 31e26777869..00000000000 --- a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: ForceAtlas2 力导向 -order: 9 ---- - -本文展示所有 ForceAtlas2 力导布局配置项。[ForceAtlas2 力导布局 DEMO](/zh/examples/net/forceDirected/#basicFA2)。 - - - -## presetLayout - -**类型**：`LayoutOptions` - -**默认值**：`{ type: 'grid' }` - -力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## dimensions - -**类型**：`number` - -**默认值**：`2` - -布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 - -## height - -**类型**：`number` - -**默认值**：`undefined` - -布局的高度，默认使用容器高度 - -## width - -**类型**：`number` - -**默认值**：`undefined` - -布局的宽度，默认使用容器宽度 - -## maxIteration - -**类型**：`number` - -**默认值**：`0` - -最大迭代次数，若为 `0` 则将自动调整 - - - - - -## barnesHut - -**类型**：`boolean` - -**默认值**：`undefined` - -是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 `false` 则不会自动被激活 - -## dissuadeHubs - -**类型**：`boolean` - -**默认值**：`false` - -是否打开 hub 模式。若为 `true`，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置 - -## prune - -**类型**：`boolean` - -**默认值**：`undefined` - -是否开启自动剪枝模式。默认情况下为 `undefined`，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 `false` 则不会自动被激活 - -## tao - -**类型**：`number` - -**默认值**：`0.1` - -迭代接近收敛时停止震荡的容忍度 - -## kg - -**类型**：`number` - -**默认值**：`5` - -重力系数。kg 越大，布局越聚集在中心 - -## kr - -**类型**：`number` - -**默认值**：`5` - -斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散 - -## ks - -**类型**：`number` - -**默认值**：`0.1` - -控制迭代过程中，节点移动的速度 - -## ksmax - -**类型**：`number` - -**默认值**：`10` - -迭代过程中，最大的节点移动的速度上限 - -## mode - -**类型**：`'normal' | 'linlog'` - -**默认值**：`'normal'` - -`'linlog'` 模式下，聚类将更加紧凑 - -## onTick - -**类型**：`function` - -**默认值**：`undefined` - -每一次迭代的回调函数，返回值为这一次迭代的布局结果 - - diff --git a/packages/site/docs/apis/layout/ForceLayoutOptions.en.md b/packages/site/docs/apis/layout/ForceLayoutOptions.en.md deleted file mode 100644 index 39de66e2629..00000000000 --- a/packages/site/docs/apis/layout/ForceLayoutOptions.en.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Force -order: 1 ---- - -This document shows all the options for force-directed layout. [Force-Directed Layout Demo](/en/examples/net/forceDirected/#basicForce). When you want to fix the position of a node and not be affected by forces, you can configure fx and fy as fixed coordinates in the node data. - - - - -## presetLayout - -**Type**: `LayoutOptions` - -**Default**: `{ type: 'grid' }` - -The initial layout of the force-directed layout. It will be executed before the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, making the force-directed algorithm converge faster and have better results. By default, the initialization of the force-directed layout is the result of the grid layout. - -## animated - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction, and enabling this option allows you to see the collision process caused by force. The animates property in the node configuration is for interpolated animation, which means it interpolates from the initial position to the position after the layout. These two types of layouts should not be used together. - -## gravity - -**Type**: `number` - -**Default**: `10` - -The strength of the center force that attracts all nodes to the `center`. The larger the value, the more compact the layout. - -## center - -**Type**: [number, number]` - -**Default**: The center position of the current container - -The center position of the circular layout. - -## getCenter - -**Type**: `(model: NodeModel) => number` - -**Default**: `undefined` - -The callback function for the center forces (x, y, and strength) of each node. If not specified, there is no additional center force. - -**Example**: - -```javascript -(d, degree) => { - // d is a node, degree is the degree of the node - if (d.clusterId === 'c1') return [100, 100, 10]; // x, y, strength - if (degree === 0) return [250, 250, 15]; // x, y, strength - return [180, 180, 5]; // x, y, strength -}; -``` - - - - - -## nodeSpacing - -**Type**: `number | number[] | (model: NodeModel) => number` - -**Default**: `10` - -Effective only when `preventOverlap` is `true`. The minimum edge spacing between nodes to prevent overlap. It can be a callback function to set different minimum spacing for different nodes. - -## linkDistance - -**Type**: `number | (model: NodeModel) => number` - -**Default**: `200` - -The ideal length of the edge, which can be understood as the length of the spring when it is not under force. - -## nodeStrength - -**Type**: `number | (model`: `NodeModel`) => number` - -**Default**: `1000` - -The strength of the interaction between nodes. A positive value represents the repulsive force between nodes, and a negative value represents the attractive force between nodes. - -## edgeStrength - -**Type**: `number | (model: NodeModel) => number` - -**Default**: `200` - -The strength (attraction) of the edge - -## maxSpeed - -**Type**: `number` - -**Default**: `1000` - -The maximum moving distance per iteration - -## factor - -**Type**: `number` - -**Default**: `1` - -The repulsion factor. The larger the value, the stronger the repulsion - -## coulombDisScale - -**Type**: `number` - -**Default**: `0.05` - -The Coulomb coefficient, a coefficient for the repulsion force. The larger the value, the stronger the repulsion between nodes - -## getMass - -**Type**: (model: NodeModel) => number` - -**Default**: In G6, the mass of existing nodes in incremental layout will be increased to maintain the stability of existing content. For other cases, the mass of the node is `1` - -The callback function for the mass of each node. The parameter is the internal data model of the node, and the return value is the mass value - -## minMovement - -**Type**: `number` - -**Default**: `0.4` - -Stop the iterations when the average/max/min (determined by `distanceThresholdMode`) movement distance in one iteration is less than this value. The smaller the value, the more the layout converges and the longer the time it takes - -## distanceThresholdMode - -**Type**: `'mean' | 'max' | 'min'` - -**Default**: `'mean'` - -The condition for using `minMovement`. `'mean'` means stop the iterations when the average movement distance is less than `minMovement`. `'max'`/`'min'` means stop the iterations when the maximum/minimum movement distance is less than `minMovement`. The smaller the value, the more the layout converges and the longer the time it takes - -## maxIteration - -**Type**: `number` - -**Default**: `1000` - -The maximum number of iterations. If the number of iterations exceeds this value but the average movement distance is still less than minMovement, the iterations will be forced to stop - -## damping - -**Type**: `number` - -**Default**: `0.9` - -The damping coefficient. The value range is [0, 1]. The larger the value, the slower the speed decreases - -## interval - -**Type**: `number` - -**Default**: `0.02` - -Controls the moving speed of each node in each iteration - -## centripetalOptions - -**Type**: `CentripetalOptions` - -
- - CentripetalOptions - - -```ts -type CentripetalOptions = { - /** the center force strength for discrete nodes (with 0 degree) */ - single?: number | ((model: NodeModel) => number); - /** the center force strength for leaf nodes (with 1 degree) */ - leaf?: number | ((model: NodeModel) => number); - /** the center force strength for other nodes beside leaf and discrete nodes */ - others?: number | ((model: NodeModel) => number); - /** the center force's coordinate. You can return different values for different nodes */ - center?: (model: NodeModel) => { x: number; y: number }; -}; -``` - -
- -**Default**: `object` - -
- - object - - -```json -{ - "single": 2, - "leaf": 2, - "others": 1, - "center": // center of the graph -} -``` - -
- -Centripetal force configuration, including the centripetal center and the strength of the centripetal force for leaf nodes, discrete nodes, and other nodes - -## leafCluster - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable leaf clustering. If true, `centripetalOptions.single` will be set to 100, `centripetalOptions.leaf` will use the return value of `getClusterNodeStrength`, and `getClusterNodeStrength.center` will return the average center of all leaf nodes - -## clustering - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable clustering for all nodes. If `true`, the field specified in the `nodeClusterBy` configuration will be used as the basis for clustering. `centripetalOptions.single`, `centripetalOptions.leaf`, `centripetalOptions.others` will use the return value of `getClusterNodeStrength`, and `centripetalOptions.center` will use the average center of all nodes in the cluster to which the current node belongs. - -## nodeClusterBy - -**Type**: `string` - -**Default**: `undefined` - -Specify the field name in the node data to be used as the basis for node clustering. It takes effect when `clustering` is set to `true` and automatically generates `centripetalOptions`. Can be used in conjunction with `clusterNodeStrength`. - -## clusterNodeStrength - -**Type**: `number | (model: NodeModel) => number` - -**Default**: `20` - -Used in conjunction with `clustering` and `nodeClusterBy` to specify the strength of clustering centripetal force. - -## onTick - -**Type**: `function` - -**Default**: In G6, if `animated: true`, the callback function is called to update the rendering position of nodes on the canvas after each iteration. - -Callback function for each iteration, returns the layout result for this iteration. - -## onLayoutEnd - -**Type**: `function` - -**Default**: In G6, the callback function is called to update the rendering position of nodes on the canvas after completion, and trigger the layout completion event `afterlayout`. - -Callback function after layout completion. - -## monitor - -**Type**: `(params:{ energy: number, nodes: NodeData[], edges: EdgeData[], iterations: number }) => void` - -**Default**: `undefined` - -Callback for monitoring information for each iteration. `energy` represents the convergence energy of the layout. If configured, it may cause additional computational energy consumption. If not configured, it will not be calculated. - - diff --git a/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md b/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md deleted file mode 100644 index 5b4279131c5..00000000000 --- a/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Force 力导向 -order: 1 ---- - -本文展示所有力导布局配置项。[力导布局 DEMO](/zh/examples/net/forceDirected/#basicForce)。当你希望固定某个节点的位置，不受力的影响时，可以在该节点数据中配置 fx 与 fy 作为固定的坐标。 - - - - -## presetLayout - -**类型**：`LayoutOptions` - -**默认值**：`{ type: 'grid' }` - -力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 - -## animated - -**类型**：`boolean` - -**默认值**：`false` - -是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 - -## gravity - -**类型**：`number` - -**默认值**：`10` - -中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 - -## center - -**类型**：[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## getCenter - -**类型**：`(model: NodeModel) => number` - -**默认值**：`undefined` - -每个节点中心力的 x、y、强度的回调函数，若不指定，则没有额外中心力 - -**示例**： - -```javascript -(d, degree) => { - // d is a node, degree is the degree of the node - if (d.clusterId === 'c1') return [100, 100, 10]; // x, y, strength - if (degree === 0) return [250, 250, 15]; // x, y, strength - return [180, 180, 5]; // x, y, strength -}; -``` - - - - - -## nodeSpacing - -**类型**：`number | number[] | (model: NodeModel) => number` - -**默认值**：`10` - -`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 - -## linkDistance - -**类型**：`number | (model: NodeModel) => number` - -**默认值**：`200` - -边的理想长度，可以理解为边作为弹簧在不受力下的长度 - -## nodeStrength - -**类型**：`number | (model: NodeModel) => number` - -**默认值**：`1000` - -节点之间的作用力，正数代表节点之间的斥力作用，负数代表节点之间的引力作用 - -## edgeStrength - -**类型**：`number | (model: NodeModel) => number` - -**默认值**：`200` - -边的作用力（引力）大小 - -## maxSpeed - -**类型**：`number` - -**默认值**：`1000` - -一次迭代的最大移动长度 - -## factor - -**类型**：`number` - -**默认值**：`1` - -斥力系数，数值越大，斥力越大 - -## coulombDisScale - -**类型**：`number` - -**默认值**：`0.05` - -库伦系数，斥力的一个系数，数字越大，节点之间的斥力越大 - -## getMass - -**类型**：`(model: NodeModel) => number` - -**默认值**：在 G6 中使用，增量布局时已存在的节点质量将被加大，以保持已有内容的稳定。其他情况下节点质量为 `1` - -每个节点质量的回调函数，如参为节点内部流转数据，返回值为质量大小 - -## minMovement - -**类型**：`number` - -**默认值**：`0.4` - -当一次迭代的平均/最大/最小（根据`distanceThresholdMode`决定）移动长度小于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 - -## distanceThresholdMode - -**类型**：`'mean' | 'max' | 'min'` - -**默认值**：`'mean'` - -`minMovement` 的使用条件，`'mean'` 代表平均移动距离小于 `minMovement` 时停止迭代，`'max'`/`'min'` 代表最大/最小移动距离小于时 `minMovement` 时停时迭于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 - -## maxIteration - -**类型**：`number` - -**默认值**：`1000` - -最大迭代次数。当迭代次数超过该值，但平均移动长度仍然没有达到 minMovement，也将强制停止迭 - -## damping - -**类型**：`number` - -**默认值**：`0.9` - -阻尼系数，取值范围 [0, 1]。数字越大，速度降低得越慢 - -## interval - -**类型**：`number` - -**默认值**：`0.02` - -控制每个迭代节点的移动速度 - -## centripetalOptions - -**类型**：`CentripetalOptions` - -
- - CentripetalOptions - - -```ts -type CentripetalOptions = { - /** 离散节点的中心力强度（度为 0 的节点） */ - single?: number | ((model: NodeModel) => number); - /** 叶子节点的中心力强度（度为 1 的节点） */ - leaf?: number | ((model: NodeModel) => number); - /** 其他节点的中心力强度（除了叶子节点和离散节点） */ - others?: number | ((model: NodeModel) => number); - /** 中心力的坐标，可以为不同的节点返回不同的值 */ - center?: (model: NodeModel) => { x: number; y: number }; -}; -``` - -
- -**默认值**：`object` - -
- - object - - -```json -{ - "single": 2, - "leaf": 2, - "others": 1, - "center": // center of the graph -} -``` - -
- -## leafCluster - -**类型**：`boolean` - -**默认值**：`false` - -是否需要叶子结点聚类，若为 `true`，则 `centripetalOptions.single` 将为 `100`；`centripetalOptions.leaf` 将使用 `getClusterNodeStrength` 返回值；`getClusterNodeStrength.center` 将为叶子节点返回当前所有叶子节点的平均中心 - -## clustering - -**类型**：`boolean` - -**默认值**：`false` - -是否需要全部节点聚类，若为 `true`，将使用 `nodeClusterBy` 配置的节点数据中的字段作为聚类依据。 `centripetalOptions.single`、`centripetalOptions.leaf`、`centripetalOptions.others` 将使用 `getClusterNodeStrength` 返回值；`leaf`、`centripetalOptions.center` 将使用当前节点所属聚类中所有节点的平均中心 - -## nodeClusterBy - -**类型**：`string` - -**默认值**：`undefined` - -指定节点数据中的字段名称作为节点聚类的依据，`clustering` 为 `true` 时生效，自动生成 `centripetalOptions`，可配合 `clusterNodeStrength` 使用 - -## clusterNodeStrength - -**类型**：`number | (model: NodeModel) => number` - -**默认值**：`20` - -配合 `clustering` 和 `nodeClusterBy` 使用，指定聚类向心力的大小 - -## onTick - -**类型**：`function` - -**默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 - -每一次迭代的回调函数，返回值为这一次迭代的布局结果 - -## onLayoutEnd - -**类型**：`function` - -**默认值**：在 G6 中使用，完成后更新画布上节点渲染位置，并触发图的布局完成时机事件 `afterlayout` - -布局完成后的回调函数 - -## monitor - -**类型**：`(params:{ energy: number, nodes: NodeData[], edges: EdgeData[], iterations: number }) => void` - -**默认值**：`undefined` - -每个迭代的监控信息回调，`energy` 表示布局的收敛能量。若配置可能带来额外的计算能量性能消耗，不配置则不计算 - - diff --git a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md deleted file mode 100644 index 375d12358aa..00000000000 --- a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Fruchterman -order: 10 ---- - -This article shows all the configuration options for the Fruchterman force-directed layout. [Fruchterman Force-Directed Layout Demo](/en/examples/net/fruchtermanLayout/#basicFruchterman). - - - -## presetLayout - -**Type**: `LayoutOptions` - -**Default**: `{ type: 'grid' }` - -The initial layout for the force-directed layout. It will execute the layout specified by `presetLayout` first and then perform the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force-directed algorithm to converge faster and produce better results. By default, the initialization of the force-directed layout is the result of the grid layout. - -## center - -**Type**: `[number, number]` - -**Default**: The center position of the current container - -The center position of the circular layout. - -## animated - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction. When this parameter is enabled, the process of force interaction and collision can be observed. The `animated` parameter in the node configuration, on the other hand, is for interpolation animation, which uniformly interpolates from the initial position to the position after the layout. These two layouts should not be used together. - -## dimensions - -**Type**: `number` - -**Default**: `2` - -The dimension of the layout. Set it to `2` for 2D rendering. If it is set to `3` for 3D rendering, the layout calculation for the z-axis will be performed. - -## width - -**Type**: `number` - -**Default**: `undefined` - -The width of the layout. By default, it uses the width of the container. - -## height - -**Type**: `number` - -**Default**: `undefined` - -The height of the layout. By default, it uses the height of the container. - -## clustering - -**Type**: `boolean` - -**Default**: `false` - -Whether to perform clustering layout. - -## nodeClusterBy - -**Type**: `string` - -**Default**: `undefined` - -The field name in the node model to be used as the basis for clustering layout. It takes effect when `clustering` is set to `true`. - -## clusterGravity - -**Type**: `number` - -**Default**: `10` - -The strength of gravity within a cluster, which affects the compactness of the clustering. It takes effect when `clustering` is set to `true`. - -## gravity - -**Type**: `number` - -**Default**: `10` - -The strength of the central force, which attracts all nodes to the `center`. The larger the number, the more compact the layout. - -## maxIteration - -**Type**: `number` - -**Default**: `1000` - -The maximum number of iterations. - -## speed - -**Type**: `number` - -**Default**: `1` - -The speed at which nodes move in each iteration. A high speed may cause strong oscillations. - -## onTick - -**Type**: `function` - -**Default**: In G6, if `animated: true`, the callback function is called to update the rendering position of nodes on the canvas after each iteration. - -Callback function for each iteration, returns the layout result for this iteration. - - diff --git a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md deleted file mode 100644 index 5303dffe0f3..00000000000 --- a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Fruchterman 力导向 -order: 10 ---- - -本文展示所有 Fruchterman 力导布局配置项。[Fruchterman 力导 DEMO](/zh/examples/net/fruchtermanLayout/#basicFruchterman)。 - - - -## presetLayout - -**类型**：`LayoutOptions` - -**默认值**：`{ type: 'grid' }` - -力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## animated - -**类型**：`boolean` - -**默认值**：`false` - -是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 - -## dimensions - -**类型**：`number` - -**默认值**：`2` - -布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 - -## width - -**类型**：`number` - -**默认值**：`undefined` - -布局的宽度，默认使用容器宽度 - -## height - -**类型**：`number` - -**默认值**：`undefined` - -布局的高度，默认使用容器高度 - -## clustering - -**类型**：`boolean` - -**默认值**：`false` - -是否按照聚类布局 - -## nodeClusterBy - -**类型**：`string` - -**默认值**：`undefined` - -聚类布局依据的节点数据 data 中的字段名，`cluster: true` 时使用 - -## clusterGravity - -**类型**：`number` - -**默认值**：`10` - -聚类内部的重力大小，影响聚类的紧凑程度，在 `clustering` 为 `true` 时生效 - -## gravity - -**类型**：`number` - -**默认值**：`10` - -中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 - -## maxIteration - -**类型**：`number` - -**默认值**：`1000` - -最大迭代次数 - -## speed - -**类型**：`number` - -**默认值**：`1` - -每次迭代节点移动的速度。速度太快可能会导致强烈震荡 - -## onTick - -**类型**：`function` - -**默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 - -每一次迭代的回调函数，返回值为这一次迭代的布局结果 - - diff --git a/packages/site/docs/apis/layout/GridLayoutOptions.en.md b/packages/site/docs/apis/layout/GridLayoutOptions.en.md deleted file mode 100644 index 8658dd8ac46..00000000000 --- a/packages/site/docs/apis/layout/GridLayoutOptions.en.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Grid -order: 7 ---- - -This article shows all the configuration options for the grid layout. [Grid Layout Demo](/en/examples/net/gridLayout/#grid). - - - -## begin - -**Type**: `[number, number]` - -**Default**: `[0, 0]` - -The starting position of the grid (top-left corner). - -## width - -**Type**: `number` - -**Default**: In G6, the default value of `grid` layout `width` is the width of the current container. When used separately, the default value is `300`. - -The total width of the grid layout. - -## height - -**Type**: `number` - -**Default**: In G6, the default value of `grid` layout `height` is the height of the current container. When used separately, the default value is `300`. - -The total height of the grid layout. - -## rows - -**Type**: `number` - -**Default**: `10` - -The number of rows in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `cols` (if specified). - -## cols - -**Type**: `number` - -**Default**: `undefined` - -The number of columns in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `rows` (if specified). - - - - - -## preventOverlapPadding - -**Type**: `number` - -**Default**: `10` - -The padding (spacing) between nodes when preventing overlap. It takes effect when `preventOverlap` is set to `true`. - -## condense - -**Type**: `boolean` - -**Default**: `false` - -When set to `false`, it means using all available canvas space. When set to `true`, it means using the minimum canvas space. - -## position - -**Type**: (`node?`: `NodeModel`) => { `row?`: `number`; `col?`: `number`; } - -**Default**: `undefined` - -Specifies the row and column in which each node is located. - -## sortBy - -**Type**: `string` - -**Default**: `undefined` - -Specifies the sorting criterion (node property name). The higher the value, the more centrally the node will be placed. If undefined, the node degree will be calculated, with higher degrees resulting in more centrally placed nodes. diff --git a/packages/site/docs/apis/layout/GridLayoutOptions.zh.md b/packages/site/docs/apis/layout/GridLayoutOptions.zh.md deleted file mode 100644 index f542ce35646..00000000000 --- a/packages/site/docs/apis/layout/GridLayoutOptions.zh.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Grid 网格 -order: 7 ---- - -本文展示所有网格布局配置项。[格子布局 DEMO](/zh/examples/net/gridLayout/#grid)。 - - - -## begin - -**类型**：`[number, number]` - -**默认值**：`[0, 0]` - -网格开始位置（左上角） - -## width - -**类型**：`number` - -**默认值**：在 G6 中使用当前容器的宽度作为 `grid` 布局 `width` 的默认值。单独使用此布局时默认值为 `300` - -网格布局的总宽度 - -## height - -**类型**：`number` - -**默认值**：在 G6 中使用当前容器的高度作为 `grid` 布局 `height` 的默认值。单独使用此布局时默认值为 `300` - -网格布局的总高度 - -## rows - -**类型**：`number` - -**默认值**：`10` - -网格的行数，为 `undefined` 时算法根据节点数量、布局空间、`cols`（若指定）自动计算 - -## cols - -**类型**：`number` - -**默认值**：`undefined` - -网格的列数，为 `undefined` 时算法根据节点数量、布局空间、`rows`（若指定）自动计算 - - - - - -节点大小（直径）。用于碰撞检测 - -## preventOverlapPadding - -**类型**：`number` - -**默认值**：`10` - -避免重叠时节点的间距 `padding`。`preventOverlap` 为 `true` 时生效 - -## condense - -**类型**：`boolean` - -**默认值**：`false` - -为 `false` 时表示利用所有可用画布空间，为 `true` 时表示利用最小的画布空间 - -## position - -**类型**： (`node?`: `NodeModel`) => { `row?`: `number`; `col?`: `number`; } - -**默认值**：`undefined` - -指定每个节点所在的行和列 - -## sortBy - -**类型**：`string` - -**默认值**：`undefined` - -指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 diff --git a/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md b/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md deleted file mode 100644 index 6981c8b8bd4..00000000000 --- a/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Indented -order: 15 ---- - -Indented layout represents the hierarchy by indent between them. Each node will take a row/column. It is appropriate for file directory. - -img - -## direction - -**Type**: `'LR' | 'RL' | 'H'` - -**Default**: `'LR'` - -The direction of layout: - -- LR —— Root is on the left, layout from the left to the right(left image below) - -- RL —— Root is on the right, layout from the right to the left(center image below) - -- H —— Root is on the middle, layout in horizontal symmetry(right image below) - -img -img -img - -> (Left)LR. (Center)RL. (Right)H. - -## indent - -**Type**: `number | function` - -**Default**: `20` - -**Example**： - -```javascript -(d) => { - // d is a node - if (d.parent?.id === 'testId') return d.parent.x + 50; - return 100; -}; -``` - -When the type is Number, the colunm separation is a fixed value; When the type is Function, the distance between the node and the root node is the returned value of the function. - -## getWidth - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The width of each node. Takes effect only when `direction` is `'H'` - -## getHeight - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The height of each node - -## getSide - -**Type**: `function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 'left'; - return 'right'; -}; -``` - -The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it. - -## dropCap - -**Type**: `boolean` - -Whether place the first child node at the next line. `true` by default diff --git a/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md b/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md deleted file mode 100644 index 8ab672d5b73..00000000000 --- a/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Indented 缩进树 -order: 15 ---- - -缩进树布局。树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。常用场景是文件目录结构。 - -img - -## direction - -**类型**：`'LR' | 'RL' | 'H'` - -**默认值**：`'LR'` - -树布局的方向，默认为 `'LR'`，其他选项说明： - -- LR —— 根节点在左，往右布局（下图左） - -- RL —— 根节点在右，往左布局（下图中） - -- H —— 根节点在中间，水平对称布局（下图右） - -img -img -img - -> （左）LR。（中）RL。（右）H。 - -## indent - -**类型**：`number | function` - -**默认值**：20 - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.parent?.id === 'testId') return d.parent.x + 50; - return 100; -}; -``` - -类型为 Number 时，列间间距是固定值；类型为 Function 时，节点与根结点的间距是函数返回值。 - -## getWidth - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的宽度，`direction` 为 `'H'` 时有效 - -## getHeight - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的高度 - -## getSide - -**类型**：`function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 'left'; - return 'right'; -}; -``` - -## dropCap - -**类型**：`boolean` - -每个节点的第一个自节点是否位于下一行。默认为 `true` - -节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点。 diff --git a/packages/site/docs/apis/layout/LayoutOverview.en.md b/packages/site/docs/apis/layout/LayoutOverview.en.md deleted file mode 100644 index 5f886758506..00000000000 --- a/packages/site/docs/apis/layout/LayoutOverview.en.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Overview -order: 0 ---- - -## Layout Registration and Usage - -This directory lists all the built-in layout algorithms in G6. In order to reduce the package size, only a few core layouts are registered by default in G6 5.0. Therefore, **before using these built-in layouts, you also need to register them in G6**. Similarly, custom layouts should also be registered as follows: - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - transforms: { - 'dagre-layout': Extensions.DagreLayout, - 'compactbox-layout': Extensions.compactBox, - }, -}); - -// Register before using in instantiation or subsequent API calls -const graph = new Graph({ - // ... Other configuration items - layout: { - type: 'dagre-layout', // The type is consistent with the key name when registering - // ... Other layout configurations - }, -}); - -graph.layout({ - type: 'compactbox-layout', // The type is consistent with the key name when registering. Applicable to both tree and graph layouts - // ... Other layout configurations -}); -``` - -### Navigation - -- **[Force Layout](./ForceLayoutOptions.zh.md)**: The recommended layout algorithm in G6 5.0 (an upgraded version of Force2 in G6 4.0), with better performance compared to other force-directed layouts. - -> Force-directed layout: In a layout network, particles have attractive and repulsive forces between them. Starting from a random and unordered layout, the layout gradually evolves and tends to a balanced and stable layout. It is suitable for describing relationships between things, such as character relationships and computer network relationships. - -- [Force Atlas 2 Layout](./ForceAtlas2LayoutOptions.zh.md): FA2 force-directed layout, better and more compact than force. -- [Fruchterman Layout](./FruchtermanLayoutOptions.zh.md): Fruchterman layout, a type of force-directed layout. -- [D3 Force Layout](./D3ForceLayoutOptions.zh.md): Classic force-directed layout from d3. -- [Circular Layout](./CircularLayoutOptions.zh.md): Circular layout. -- [Radial Layout](./RadialLayoutOptions.zh.md): Radial layout. -- [MDS Layout](./MDSLayoutOptions.zh.md): A dimensionality reduction algorithm for layout. -- [Dagre Layout](./DagreLayoutOptions.zh.md): Hierarchical layout. -- [Concentric Layout](./ConcentricLayoutOptions.zh.md): Concentric circle layout, with important (measured by degree by default) nodes placed in the center of the layout. -- [Grid Layout](./GridLayoutOptions.zh.md): Grid layout, with nodes arranged in order (default is data order) on the grid. -- [Combo Combined Layout](./ComboCombinedLayoutOptions.zh.md): Suitable for graphs with combos, can freely combine internal and external layouts, and can achieve good results by default. Recommended for graphs with combos. - -
-
-Tree layout (can be used for both general graph layouts and tree layouts): - -- [CompactBox Compact Tree Layout](./CompactBoxLayoutOptions.zh.md) -- [Dendrogram Tree Layout](./DendrogramLayoutOptions.zh.md) -- [Indented Tree Layout](./IndentedLayoutOptions.zh.md) -- [Mindmap Tree Layout](./MindmapLayoutOptions.zh.md) - -## Using Layout Information from Data - -The configuration options for each layout method may vary. Please refer to the API for each layout method in this directory. When instantiating a graph without specifying a layout: - -- If the nodes in the data have position information (x and y), the graph will be drawn based on the given positions. - -- If the nodes in the data do not have position information, the default Random Layout will be used. - -If webworker is enabled (`workerEnabled: true`), some function configurations may be ignored. - -## Using General Graph Layout Independently - -The general graph layout is derived from @antv/layout. If you want to use it independently, you can import it directly from @antv/layout or import it from G6.Extensions and then use it after instantiation: - -```javascript -import { Extensions } from '@antv/g6'; -import { Graph as GraphLib } from '@antv/graphlib'; - -const { ForceLayout } = Extensions; - -// Define the data structure using GraphLib -const graphLib = new GraphLib({ - nodes: [ - { id: 'node1', data: {} }, - { id: 'node2', data: {} }, - ], - edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], -}); - -const forceLayout = new ForceLayout({ - // ... some configurations -}); - -// If you don't want to modify the original data, use the execute method -const result = forceLayout.execute(graphLib); - -// Or, if you want to modify the original data, use the assign method -const result = forceLayout.assign(graphLib); -``` - -Here are the API for the general graph layout: - -### constructor - -The constructor for the layout. - -**Parameters**： `LayoutOptions` The configuration for the layout, which varies depending on the specific layout. Please refer to the documentation for each layout in this directory. - -### execute - -Passes in the data and performs the layout calculation without modifying the original data. The result is returned as the output. - -**Type**：(`data`: `GraphLib`, `layoutOpitons`: `Partial`) => `LayoutMapping` - -**Parameters**： - -- `data`: `GraphLib` is the underlying data structure of G6. As shown in the example above, it can be imported from @antv/graphlib and instantiated with the data. - -- `layoutOpitons`: `LayoutOptions` The partial configuration used to update the layout parameters passed during instantiation. - -**Returns**：`LayoutMapping` The type of the layout result: - -```typescript -type LayoutMapping = { - nodes: { - id: string | number; - data: { - x: number; - y: number; - z?: number; - }; - }[]; - edges: { - id: string | number; - source: string | number; - target: string | number; - data: object; - }[]; -}; -``` - -### assign - -Passes in the data and performs the layout calculation, modifying the original data and returning the result. - -**Type**: (`data`: `GraphLib`, `layoutOpitons`: `Partial`) => `LayoutMapping` - -**Parameters**: - -- `data`: `GraphLib` is the underlying data structure of G6. As shown in the example above, it can be imported from @antv/graphlib and instantiated with the data. - -- `layoutOpitons`: `LayoutOptions` The partial configuration used to update the layout parameters passed during instantiation. - -**Returns**：`LayoutMapping` The type of the layout result: - -```typescript -type LayoutMapping = { - nodes: { - id: string | number; - data: { - x: number; - y: number; - z?: number; - }; - }[]; - edges: { - id: string | number; - source: string | number; - target: string | number; - data: object; - }[]; -}; -``` - -## Using Tree Layout Independently - -In G6 5.0, the general graph layout and tree layout are now interconnected. Whether it is the data format for general graphs ([`GraphData`](../data/GraphData.zh.md)), the data format for tree graphs ([`TreeData`](../data/TreeData.zh.md)), or data with multiple trees (forest), they can all be loaded into a graph instance and then used with any general graph layout or tree layout. This is because G6 handles the conversion logic between data in the layout controller. If you want to use the tree layout independently, you should pass in data in the [`TreeData`](../data/TreeData.zh.md) structure. And only one tree can be calculated at a time. The return value structure is also [`TreeData`](../data/TreeData.zh.md). - -The tree graph layout is derived from @antv/hierarchy. If you want to use it independently, you can import it directly from @antv/hierarchy or import it from G6.Extensions and then use it after instantiation. - -```javascript -import { Extensions } from '@antv/g6'; -import { Graph as GraphLib } from '@antv/graphlib'; - -const { compactBox } = Extensions; - -const treeData = { - id: 'root', - children: [ - { id: 'child1', children: [{ id: 'child1-1' }, { id: 'child1-2' }] }, - { id: 'child2' } - ] -} - -const result = compactBox(treeData, { - // ... options -})； - -``` diff --git a/packages/site/docs/apis/layout/LayoutOverview.zh.md b/packages/site/docs/apis/layout/LayoutOverview.zh.md deleted file mode 100644 index bb4ddaf54d0..00000000000 --- a/packages/site/docs/apis/layout/LayoutOverview.zh.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: 概述 -order: 0 ---- - -## 布局的注册和使用 - -本目录列举了 G6 内置的所有布局算法。G6 5.0 为了减少包体积，仅默认注册了部分核心功能。**因此，在使用这些内置布局之前，您也需要将其注册到 G6 中**。同样的，自定义布局也应当如下注册： - -```javascript -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; - -const Graph = extend(BaseGraph, { - transforms: { - 'dagre-layout': Extensions.DagreLayout, - 'compactbox-layout': Extensions.compactBox, - }, -}); - -// 注册后方可在实例化或后续 API 调用中使用 -const graph = new Graph({ - // ...其他配置项 - layout: { - type: 'dagre-layout', // type 与注册时命名的 key 一致 - // ... 布局的其他配置项 - }, -}); - -graph.layout({ - type: 'compactbox-layout', // type 与注册时命名的 key 一致。树图和图布局通用 - // ... 布局的其他配置项 -}); -``` - -### 导航 - -- **[Force Layout](./ForceLayoutOptions.zh.md)**：G6 5.0 推荐的布局算法（即 G6 4.0 的 Force2 升级版），相较于其他力导向布局，有着更好的性能 - -> 力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。 - -- [Force Atlas 2 Layout](./ForceAtlas2LayoutOptions.zh.md)：FA2 力导向布局，比 force 收敛地更好，更紧凑； -- [Fruchterman Layout](./FruchtermanLayoutOptions.zh.md)：Fruchterman 布局，一种力导布局； -- [D3 Force Layout](./D3ForceLayoutOptions.zh.md)：引用 d3 的经典力导向布局； -- [Circular Layout](./CircularLayoutOptions.zh.md)：环形布局； -- [Radial Layout](./RadialLayoutOptions.zh.md)：辐射状布局； -- [MDS Layout](./MDSLayoutOptions.zh.md)：高维数据降维算法布局； -- [Dagre Layout](./DagreLayoutOptions.zh.md)：层次布局； -- [Concentric Layout](./ConcentricLayoutOptions.zh.md)：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心； -- [Grid Layout](./GridLayoutOptions.zh.md)：格子布局，将节点有序（默认是数据顺序）排列在格子上； -- [Combo Combined Layout](./ComboCombinedLayoutOptions.zh.md)：适用于带有 combo 的图，可自由组合内外布局，默认情况下可以有较好的效果，推荐有 combo 的图使用该布局。 - -
-
-树图布局（v5 中可通用一般图布局和树图布局）： - -- [CompactBox 紧凑树布局](./CompactBoxLayoutOptions.zh.md) -- [Dendrogram 生态树布局](./DendrogramLayoutOptions.zh.md) -- [Indented 缩进树布局](./IndentedLayoutOptions.zh.md) -- [Mindmap 脑图树布局](./MindmapLayoutOptions.zh.md) - -## 使用数据中的布局信息 - -每种布局方法的配置项不尽相同，具体参见本目录下每种布局的 API。当实例化图时没有配置 layout 时： - -- 若数据中节点有位置信息（x 和 y），则按照数据的位置信息进行绘制； -- 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。 - -如果开启了 webworker（`workerEnabled: true`），一些函数配置可能失效。 - -## 单独使用一般图布局 - -一般图布局来自于 @antv/layout，若需单独使用，可以直接从 @antv/layout 引入，也可以从 G6.Extensions 中引入，然后实例化后使用： - -```javascript -import { Extensions } from '@antv/g6'; -import { Graph as GraphLib } from '@antv/graphlib'; - -const { ForceLayout } = Extensions; - -// 使用 GraphLib 定义规范的数据结构 -const graphLib = new GraphLib({ - nodes: [ - { id: 'node1', data: {} }, - { id: 'node2', data: {} }, - ], - edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], -}); - -const forceLayout = new ForceLayout({ - // ... 一些配置项 -}); - -// 不希望将布局结果写入原始数据，使用 execute 方法 -const result = forceLayout.execute(graphLib); - -// 或，希望将布局结果写入原始数据，使用 assign 方法 -const result = forceLayout.assign(graphLib); -``` - -下面是一般图布局的 API： - -### constructor - -**入参**：`LayoutOptions` 布局的配置，不同的布局配置不同，详见本目录下的各个布局配置介绍 - -**说明**：布局的构造方法 - -### execute - -传入数据并执行布局计算，且结果不写入原始数据，作为返回值 - -**类型**：(`data`: `GraphLib`, `layoutOpitons`: `Partial`) => `LayoutMapping` - -**入参**： - -- `data`: `GraphLib` 是 G6 底层的规范化数据结构，入上面例子所示，从 @antv/graphlib 引入，实例化并传入数据即可 - -- `layoutOpitons`: `LayoutOptions` 部分配置，可用于更新实例化时传入的布局参数 - -**返回值**：`LayoutMapping` 是布局结果的类型： - -```typescript -type LayoutMapping = { - nodes: { - id: string | number; - data: { - x: number; - y: number; - z?: number; - }; - }[]; - edges: { - id: string | number; - source: string | number; - target: string | number; - data: object; - }[]; -}; -``` - -### assign - -传入数据并执行布局计算，结果写入原始数据，同时作为返回值 - -**类型**：(`data`: `GraphLib`, `layoutOpitons`: `Partial`) => `LayoutMapping` - -**入参**： - -- `data`: `GraphLib` 是 G6 底层的规范化数据结构，入上面例子所示，从 @antv/graphlib 引入，实例化并传入数据即可 - -- `layoutOpitons`: `LayoutOptions` 部分配置，可用于更新实例化时传入的布局参数 - -**返回值**：`LayoutMapping` 是布局结果的类型： - -```typescript -type LayoutMapping = { - nodes: { - id: string | number; - data: { - x: number; - y: number; - z?: number; - }; - }[]; - edges: { - id: string | number; - source: string | number; - target: string | number; - data: object; - }[]; -}; -``` - -## 单独使用树图布局 - -在 G6 5.0 中使用一般图布局和树图布局已经打通，无论是一般图的数据格式([`GraphData`](../data/GraphData.zh.md))、树图的数据格式([`TreeData`](../data/TreeData.zh.md))、还是多棵树的数据（森林），都可以读入图实例，然后使用任意一般图布局和树图布局。这是由于 G6 在布局控制器中处理了数据之间的转换逻辑。若需要单独使用树图布局，您应当给布局传入 [`TreeData`](../data/TreeData.zh.md) 结构的数据。且一次只能计算一棵树。返回值结构也是 [`TreeData`](../data/TreeData.zh.md)。 - -树图布局来自于 @antv/hirarchy，若需单独使用，可以直接从 @antv/hierarchy 引入，也可以从 G6.Extensions 中引入，然后实例化后使用。 - -```javascript -import { Extensions } from '@antv/g6'; -import { Graph as GraphLib } from '@antv/graphlib'; - -const { compactBox } = Extensions; - -const treeData = { - id: 'root', - children: [ - { id: 'child1', children: [{ id: 'child1-1' }, { id: 'child1-2' }] }, - { id: 'child2' } - ] -} - -const result = compactBox(treeData, { - // ... 该布局的配置项 -})； - -``` diff --git a/packages/site/docs/apis/layout/MDSLayoutOptions.en.md b/packages/site/docs/apis/layout/MDSLayoutOptions.en.md deleted file mode 100644 index c46768022d9..00000000000 --- a/packages/site/docs/apis/layout/MDSLayoutOptions.en.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: MDS -order: 12 ---- - -This article shows all the configuration options for the MDS layout, which is used to reduce high-dimensional data to a layout. [MDS Layout Demo](/en/examples/net/mdsLayout/#basicMDS). - - - -## center - -**Type**: `[number, number]` - -**Default**: The center position of the current container. - -The center position of the circular layout. - -## linkDistance - -**Type**: `number | (model: EdgeModel) => number` - -**Default**: `200` - -The ideal length of the edges, which can be understood as the length of the edge as a spring under no force. - - diff --git a/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md b/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md deleted file mode 100644 index 216336f0780..00000000000 --- a/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: MDS 高维数据降维 -order: 12 ---- - -本文展示所有 MDS 高维数据降为布局配置项。[MDS 布局 DEMO](/zh/examples/net/mdsLayout/#basicMDS)。 - - - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## linkDistance - -**类型**：`number | (model: EdgeModel) => number` - -**默认值**：`200` - -边的理想长度，可以理解为边作为弹簧在不受力下的长度 - - - diff --git a/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md b/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md deleted file mode 100644 index ac09f807c82..00000000000 --- a/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Mindmap -order: 16 ---- - -Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout. - -img - -## direction - -**Type**: `'H' | 'V'` - -**Default**: `'H'` - -The direction of layout. - -- H —— Root is on the middle, layout in horizontal symmetry. - -img - -- V —— Root is on the middle, layout in vertical symmetry. - -img - -## getWidth - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The width of each node - -## getHeight - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -The height of each node - -## getHGap - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**Default**: `18` - -The horizontal separation of nodes - -## getVGap - -**Type**: `number | function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**Default**: `18` - -The vertical separation of nodes - -## getSide - -**Type**: `function` - -**Example**: - -```javascript -(d) => { - // d is a node - if (d.id === 'test-child-id') return 'right'; - return 'left'; -}; -``` - -**Default**: `'right'` - -The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it diff --git a/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md b/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md deleted file mode 100644 index 4f32fccf616..00000000000 --- a/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Mindmap 脑图树 -order: 16 ---- - -深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。 - -img - -## direction - -**类型**：`'H' | 'V'` - -**默认值**：`'H'` - -树布局的方向，默认为 `'H'`，其他选项说明 - -- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧 - -img - -- V：vertical （竖直）—— 将根节点的所有孩子纵向排列 - -img - -## getWidth - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的宽度 - -## getHeight - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -每个节点的高度 - -## getHGap - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**默认值**：18 - -每个节点的水平间隙 - -## getVGap - -**类型**：`number | function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'testId') return 50; - return 100; -}; -``` - -**默认值**：18 - -每个节点的垂直间隙 - -## getSide - -**类型**：`function` - -**示例**： - -```javascript -(d) => { - // d 是一个节点 - if (d.id === 'test-child-id') return 'right'; - return 'left'; -}; -``` - -**默认值**：'right' - -节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 diff --git a/packages/site/docs/apis/layout/RadialLayoutOptions.en.md b/packages/site/docs/apis/layout/RadialLayoutOptions.en.md deleted file mode 100644 index 3c4bef48dcf..00000000000 --- a/packages/site/docs/apis/layout/RadialLayoutOptions.en.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Radial -order: 6 ---- - -This article shows all the configuration options for the radial layout. [Radial Layout Demo](/en/examples/net/radialLayout/#basicRadial). - - - - -## center - -**Type**: `[number, number]` - -**Default**: The center position of the current container. - -The center position of the circular layout. - -## focusNode - -**Type**: `string | number` - -**Default**: `null` - -The center of the radial layout, defaults to the first node in the data. Can be a node ID or the node itself. - -## height - -**Type**: `number` - -**Default**: `undefined` - -The height of the layout, defaults to the container's height. - -## width - -**Type**: `number` - -**Default**: `undefined` - -The width of the layout, defaults to the container's width. - -## unitRadius - -**Type**: `number` - -**Default**: `100` - -The distance between each circle and the previous circle. By default, it fills the entire canvas, which means it is determined by the size of the graph. - -## linkDistance - -**Type**: `number` - -**Default**: `50` - -The length of the edges. - - - - - -## nodeSpacing - - - -**Default**: `10` - -Effective when `preventOverlap` is `true`. It specifies the minimum spacing between the edges of nodes when preventing overlap. It can be a callback function to set different minimum distances for different nodes, as shown in the example. - -**Example**: - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model data - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - -## maxIteration - -**Type**: `number` - -**Default**: `1000` - -The maximum number of iterations to stop. - -## maxPreventOverlapIteration - -**Type**: `number` - -**Default**: `200` - -The maximum number of iterations for preventing overlap. - -## sortBy - -**Type**: `string` - -**Default**: `undefined` - -The basis for arranging nodes that are close together after the layout of nodes on the same level. The default is `undefined`, which means arranging based on the topological structure of the data (the shortest path between nodes). Nodes that are closer in proximity or have a smaller shortest path between them will be arranged as close together as possible. `'data'` indicates arranging based on the order of nodes in the data, so nodes that are closer in the data order will be arranged as close together as possible. You can also specify a field name in the node data, such as `'cluster'` or `'name'` (it must exist in the data of the graph). - -## sortStrength - -**Type**: `number` - -**Default**: `10` - -The strength of arranging nodes on the same level based on `sortBy`. The larger the value, the smaller the distance calculated by `sortBy`. It takes effect when `sortBy` is not `undefined`. - -## strictRadial - -**Type**: `boolean` - -**Default**: `true` - -Whether the radial layout must be strict, i.e., each level of nodes is strictly arranged on a circle. It takes effect when `preventOverlap` is `true`. - -- When `preventOverlap` is `true` and `strictRadial` is `false`, the nodes that overlap are strictly - -- When `preventOverlap` is `true` and `strictRadial` is `true`, nodes that overlap on the same circle are allowed to deviate from the circle. They can be offset in front of or behind the circle to avoid overlap. - -img -img -img - -> (Left) preventOverlap = false. (Middle) preventOverlap = false, strictRadial = true. (Right) preventOverlap = false, strictRadial = false. diff --git a/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md b/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md deleted file mode 100644 index 28b908f4c5c..00000000000 --- a/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Radial 辐射 -order: 6 ---- - -本文展示所有辐射布局的配置项。[辐射布局 DEMO](/zh/examples/net/radialLayout/#basicRadial)。 - - - - -## center - -**类型**：`[number, number]` - -**默认值**：当前容器的中心位置 - -圆形布局的中心位置 - -## focusNode - -**类型**：`string | number` - -**默认值**：`null` - -辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身 - -## height - -**类型**：`number` - -**默认值**：`undefined` - -布局的高度，默认使用容器高度 - -## width - -**类型**：`number` - -**默认值**：`undefined` - -布局的宽度，默认使用容器宽度 - -## unitRadius - -**类型**：`number` - -**默认值**：`100` - -每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定 - -## linkDistance - -**类型**：`number` - -**默认值**：`50` - -边长度 - - - - - -## nodeSpacing - - - -**默认值**：`10` - -`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 - -**示例**： - -```javascript -(nodeModel) => { - // nodeModel is a node's inner model data - if (nodeModel.id === 'node1') { - return 100; - } - return 10; -}; -``` - -## maxIteration - -**类型**：`number` - -**默认值**：`1000` - -停止迭代到最大迭代数 - -## maxPreventOverlapIteration - -**类型**：`number` - -**默认值**：`200` - -防止重叠步骤的最大迭代次数 - -## sortBy - -**类型**：`string` - -**默认值**：`undefined` - -同层节点布局后相距远近的依据。默认 `undefined` ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；`'data'` 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 `'cluster'`、`'name'` 等（必须在数据的 `data` 中存在） - -## sortStrength - -**类型**：`number` - -**默认值**：`10` - -同层节点根据 `sortBy` 排列的强度，数值越大，`sortBy` 指定的方式计算出距离越小的越靠近。`sortBy` 不为 `undefined` 时生效 - -## strictRadial - -**类型**：`boolean` - -**默认值**：`true` - -是否必须是严格的 `radial` 布局，及每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。 - -- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。 - -- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `true` 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。 - -img -img -img - -> （左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。 diff --git a/packages/site/docs/apis/layout/default.en.md b/packages/site/docs/apis/layout/default.en.md new file mode 100644 index 00000000000..113ab074a95 --- /dev/null +++ b/packages/site/docs/apis/layout/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Layout +--- \ No newline at end of file diff --git a/packages/site/docs/apis/layout/default.zh.md b/packages/site/docs/apis/layout/default.zh.md new file mode 100644 index 00000000000..846fc590254 --- /dev/null +++ b/packages/site/docs/apis/layout/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)布局 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/plugin/default.en.md b/packages/site/docs/apis/plugin/default.en.md new file mode 100644 index 00000000000..5b56dbb870c --- /dev/null +++ b/packages/site/docs/apis/plugin/default.en.md @@ -0,0 +1,3 @@ +--- +title: (Demo)Plugin +--- \ No newline at end of file diff --git a/packages/site/docs/apis/plugin/default.zh.md b/packages/site/docs/apis/plugin/default.zh.md new file mode 100644 index 00000000000..e6c52362053 --- /dev/null +++ b/packages/site/docs/apis/plugin/default.zh.md @@ -0,0 +1,3 @@ +--- +title: (示例)插件 +--- \ No newline at end of file diff --git a/packages/site/docs/apis/plugins/EdgeBundling.en.md b/packages/site/docs/apis/plugins/EdgeBundling.en.md deleted file mode 100644 index d796ec1ab63..00000000000 --- a/packages/site/docs/apis/plugins/EdgeBundling.en.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: EdgeBundling -order: 11 ---- - -In complex graph with large number of edges, edge bundling can help you to improve the visual clutter. - -edge filter lens - -## Configurations - -### edgeBundles - -**Type**：`Array` - -**Default**：`[]` - -|edges| arrays, each one stores the related edges' id, The default it will be generated based on edge's `target` and `source`. - -### edgePoints - -**Type**：`Array>` - -**Default**：`[]` - -|Point| Initial data array for dividing edge points. - -### K - -**Type**：`number` - -**Default**：`0.1` - -The strength of the bundling. - -### lambda - -**Type**：`number` - -**Default**：`0.1` - -The initial step length. - -### divisions - -**Type**：`number` - -**Default**：`1` - -The initial number of division on each edge. It will be multiplied by `divRate` in each cycle. - -### divRate - -**Type**：`number` - -**Default**：`2` - -The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large. - -### cycles - -**Type**：`number` - -**Default**：`6` - -The number of outer iterations. - -### iterations - -**Type**：`number` - -**Default**：`90` - -The initial number of inner iterations. It will be multiplied by `iterRate` in each cycle. - -### iterRate - -**Type**：`number` - -**Default**：`0.6666667` - -The rate of the iterations decreasement. - -### bundleThreshold - -**Type**：`number` - -**Default**：`0.6` - -The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle. - -### eps - -**Type**：`number` - -**Default**：`1e-6` - -Tolerance value for euclidean distance between polyline bend points. - -### onTick - -**Type**：`number` - -**Default**：`undefined` - -A callback executed when each iteration of the edge binding algorithm completes. - -## API - -### bundling - -**Type**：`(data: GraphData) => void;` - -**Description**：Execute edge binding algorithm. - -### updateBundling - -**Type**：`(cfg: BundlingConfig) => void;` - -**Description**：Update the configuration items of the edge binding algorithm. - - diff --git a/packages/site/docs/apis/plugins/EdgeBundling.zh.md b/packages/site/docs/apis/plugins/EdgeBundling.zh.md deleted file mode 100644 index 7b2a7f265cd..00000000000 --- a/packages/site/docs/apis/plugins/EdgeBundling.zh.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: EdgeBundling 边绑定 -order: 11 ---- - -在关系复杂、繁多的大规模图上，通过边绑定可以降低视觉复杂度。 - -edge filter lens - -## 配置项 - -### edgeBundles - -**类型**：`Array` - -**默认值**：`[]` - -|edges| 数组，每个数组存储相关边的id, 默认会根据 edge 的 target 和 source 生成。 - -### edgePoints - -**类型**：`Array>` - -**默认值**：`[]` - -|Point| 初始的划分边缘点的数据数组。 - -### K - -**类型**：`number` - -**默认值**：`0.1` - -边绑定的强度。 - -### lambda - -**类型**：`number` - -**默认值**：`0.1` - -算法的初始步长。 - -### divisions - -**类型**：`number` - -**默认值**：`1` - -初始的切割点数，即每条边将会被切割成的份数。每次迭代将会被乘以 `divRate`。 - -### divRate - -**类型**：`number` - -**默认值**：`2` - -切割增长率，每次迭代都会乘以该数字。数字越大，绑定越平滑，但计算量将增大。 - -### cycles - -**类型**：`number` - -**默认值**：`6` - -迭代次数。 - -### iterations - -**类型**：`number` - -**默认值**：`90` - -初始的内迭代次数，每次外迭代中将会被乘以 `iterRate`。 - -### iterRate - -**类型**：`number` - -**默认值**：`0.6666667` - -迭代下降率。 - -### bundleThreshold - -**类型**：`number` - -**默认值**：`0.6` - -判定边是否应该绑定在一起的相似容忍度，数值越大，被绑在一起的边相似度越低，数量越多。 - -### eps - -**类型**：`number` - -**默认值**：`1e-6` - -折线弯曲点之间的欧氏距离的公差值。 - -### onTick - -**类型**：`number` - -**默认值**：`undefined` - -边绑定算法每次迭代完成时执行的回调。 - -## API - -### bundling - -**类型**：`(data: GraphData) => void;` - -**说明**：执行边绑定算法 - -### updateBundling - -**类型**：`(cfg: BundlingConfig) => void;` - -**说明**：更新边绑定算法的配置项 - - diff --git a/packages/site/docs/apis/plugins/EdgeFilterLens.en.md b/packages/site/docs/apis/plugins/EdgeFilterLens.en.md deleted file mode 100644 index 5dd6864ee62..00000000000 --- a/packages/site/docs/apis/plugins/EdgeFilterLens.en.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: EdgeFilterLens -order: 10 ---- - -Filter out edges that do not exist on one side of the filter - -- [Edge Filter Lens](/en/examples/tool/edgeFilterLens/#default) - -edge filter lens - -## Configurations - - - - - -### showType - -**Type**: `'one' | 'both' | 'only-source' | 'only-target'` - -**Default**: `'both` - -The type of edge to display - -- `'one'`: Display edges that are at least one side in the filter -- `'both'`: Display edges that are both ends in the filter -- `'only-source'`: Only show edges with source nodes in the filter -- `'only-target'`: Only show edges with target nodes in the filter - -### shouldShow - -**Type**: `(edge: EdgeConfig) => boolean` - -**Default**: `undefined` - -Whether to display the edge callback function - -## API - -### updateParams - -**Type**: `(cfg: EdgeFilterLensConfig) => void;` - -**Description**: Update configuration - -### clear - -**Type**: `() => void;` - -**Description**: Clear the filter - - diff --git a/packages/site/docs/apis/plugins/EdgeFilterLens.zh.md b/packages/site/docs/apis/plugins/EdgeFilterLens.zh.md deleted file mode 100644 index 10eadfee237..00000000000 --- a/packages/site/docs/apis/plugins/EdgeFilterLens.zh.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: EdgeFilterLens 边滤镜 -order: 10 ---- - -过滤掉存在一端不在滤镜内的边 - -- [边过滤镜](/examples/tool/edgeFilterLens/#default) - -edge filter lens - -## 配置项 - - - - - -### showType - -**类型**：`'one' | 'both' | 'only-source' | 'only-target'` - -**默认值**：`'both` - -显示的边类型 - -- `'one'`：显示至少有一端在滤镜内的边 -- `'both'`：显示两端都在滤镜内的边 -- `'only-source'`：只显示源节点在滤镜内的边 -- `'only-target'`：只显示目标节点在滤镜内的边 - -### shouldShow - -**类型**：`(edge: EdgeConfig) => boolean` - -**默认值**：`undefined` - -是否显示边的回调函数 - -## API - -### updateParams - -**类型**：`(cfg: EdgeFilterLensConfig) => void;` - -**说明**：更新配置项 - -### clear - -**类型**：`() => void;` - -**说明**：清除滤镜 - - diff --git a/packages/site/docs/apis/plugins/FisheyeConfig.en.md b/packages/site/docs/apis/plugins/FisheyeConfig.en.md deleted file mode 100644 index be4e501a22f..00000000000 --- a/packages/site/docs/apis/plugins/FisheyeConfig.en.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Fisheye -order: 11 ---- - -Zoom in on objects in the lens - -- [Fisheye Lens](/en/examples/tool/fisheye/#fisheye) -- [Fisheye Lens Style](/en/examples/tool/fisheye/#fisheyeStyle) - -fish eye - -## Configurations - - - -### d - -**Type**: `number` - -**Default**: `1.5` - -The magnification of the fisheye - -### maxD - -**Type**: `number` - -**Default**: `5` - -The maximum value of the magnification of the fisheye - -### minD - -**Type**: `number` - -**Default**: `1` - -The minimum value of the magnification of the fisheye - -### scaleDBy - -**Type**: `'wheel' | 'drag' | 'unset'` - -**Default**: `'drag'` - -The way to scale the magnification of the fisheye - -> In the fisheye, the magnification of the fisheye is scaled by mouse wheel or drag - -### showDPercent - -**Type**: `boolean` - -**Default**: `true` - -Whether to show the percentage of the magnification (`d`) of the fisheye - - - - - -## API - -### updateParams - -**Type**: `(cfg: FisheyeConfig) => void;` - -**Description**: Update configuration - -### clear - -**Type**: `() => void;` - -**Description**: Clear the fisheye - - diff --git a/packages/site/docs/apis/plugins/FisheyeConfig.zh.md b/packages/site/docs/apis/plugins/FisheyeConfig.zh.md deleted file mode 100644 index 46c100b0d4d..00000000000 --- a/packages/site/docs/apis/plugins/FisheyeConfig.zh.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Fisheye 鱼眼放大镜 -order: 11 ---- - -放大透镜中的对象 - -- [鱼眼放大镜](/examples/tool/fisheye/#fisheye) -- [鱼眼放大镜样式](/examples/tool/fisheye/#fisheyeStyle) - -fish eye - -## 配置项 - - - -### d - -**类型**：`number` - -**默认值**：`1.5` - -鱼眼放大倍率 - -### maxD - -**类型**：`number` - -**默认值**：`5` - -鱼眼放大倍数的最大值 - -### minD - -**类型**：`number` - -**默认值**：`1` - -鱼眼放大倍数的最小值 - -### scaleDBy - -**类型**：`'wheel' | 'drag' | 'unset'` - -**默认值**：`'drag'` - -鱼眼放大倍数的缩放方式 - -> 即在鱼眼中通过鼠标滚轮或者拖拽来缩放鱼眼放大倍数 - -### showDPercent - -**类型**：`boolean` - -**默认值**：`true` - -是否展示鱼眼区域内对象的放大倍率(`d`) - - - - - -## API - -### updateParams - -**类型**：`(cfg: FisheyeConfig) => void;` - -**说明**：更新配置项 - -### clear - -**类型**：`() => void;` - -**说明**：清除鱼眼放大镜 - - diff --git a/packages/site/docs/apis/plugins/GridConfig.en.md b/packages/site/docs/apis/plugins/GridConfig.en.md deleted file mode 100644 index 6d1dfff9b2e..00000000000 --- a/packages/site/docs/apis/plugins/GridConfig.en.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Grid -order: 2 ---- - -- [Grid](/en/examples/tool/grid/#default) - -grid - -## Configurations - - - -### img - -**Type**: `string` - -**Default**: `''` - -Background image of grid - -### follow - -**Type**: `boolean` - -**Default**: `false` - -Whether to follow the canvas movement - -## API - -## getContainer - -**Type**: `() => HTMLElement;` - -**Description**: Get grid container - - diff --git a/packages/site/docs/apis/plugins/GridConfig.zh.md b/packages/site/docs/apis/plugins/GridConfig.zh.md deleted file mode 100644 index fcaaaddde3f..00000000000 --- a/packages/site/docs/apis/plugins/GridConfig.zh.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Grid 网格线 -order: 2 ---- - -- [画布网格](/examples/tool/grid/#default) - -grid - -## 配置项 - - - -### img - -**类型**：`string` - -**默认值**：`''` - -网格线背景图片 - -### follow - -**类型**：`boolean` - -**默认值**：`false` - -是否跟随画布移动 - -## API - -## getContainer - -**类型**：`() => HTMLElement;` - -**说明**：获取网格线容器 - - diff --git a/packages/site/docs/apis/plugins/Hull.en.md b/packages/site/docs/apis/plugins/Hull.en.md deleted file mode 100644 index 1df523482ff..00000000000 --- a/packages/site/docs/apis/plugins/Hull.en.md +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Hull -order: 12 ---- - -Add a hull to a group of objects for wrapping - -- [Use hulls to wrap the node sets](/en/examples/tool/hull/#hull) -- [Interactively change the members in the hull](/en/examples/tool/hull/#changeMembers) - -hull - -## Configurations - - - -### bubbleCfg - -**Type**: `BubbleCfg` - -**Default**: `undefined` - -More detailed configuration of the wrapped properties - -> Usually, you don't need to configure this property - -### hulls - -**Type**: `HullComponentOptions[]` - -**Default**: `undefined` - -Enabled hull wrapping - -> You can also add, remove, and update hulls through the API - -### labelShape - -**Type**: - -```ts -type labelShape = ShapeSyle & { - position?: ComboLabelPosition; - offsetX?: number; - offsetY?: number; - maxWidth?: string | number; -}; -``` - -**Default**: `{}` - -**Required**: false - -**Description**: Label style - -### padding - -**Type**: `number` - -**Default**: `10` - -The inner padding of the hull - -### style - -**Type**: `ShapeStyle` - -**Default**: `{}` - -Hull style - -## API - -### addHull - -**Type**: `(options: HullComponentOptions | HullComponentOptions[]) => void;` - -**Description**: Add a hull - -### addHullMember - -**Type**: `(id: ID, member: ID | ID[]) => void;` - -**Description**: Add a hull member - -### addHullAvoidMember - -**Type**: `(id: ID, member: ID | ID[]) => void;` - -**Description**: Add a hull non-member - -### removeHull - -**Type**: `(id: ID[]) => void;` - -**Description**: Remove a hull - -### removeHullMember - -**Type**: `(id: ID, member: ID | ID[]) => void;` - -**Description**: Remove a hull member - -### removeHullAvoidMember - -**Type**: `(id: ID, member: ID | ID[]) => void;` - -**Description**: Remove a hull non-member - -### updateHull - -**Type**: `(options: HullComponentOptions | HullComponentOptions[]) => void;` - -**Description**: Update a hull - - - ---- - -```ts -type BubbleCfg = { - /** DEFAULT_NODE_R0; the amount of space to move the virtual edge when wrapping around obstacles */ - morphBuffer?: number; - /** the resolution of the algorithm in square pixels, 4 by default */ - pixelGroupSize?: number; - /** number of times to refine the boundary, 100 by default */ - maxMarchingIterations?: number; - /** number of times to run the algorithm to refine the path finding in difficult areas */ - maxRoutingIterations?: number; - /** the distance from nodes which energy is 1 (full influence) */ - nodeR0?: number; - /** the distance from nodes at which energy is 0 (no influence) */ - nodeR1?: number; - /** the distance from edges at which energy is 1 (full influence) */ - edgeR0?: number; - /** the distance from edges at which energy is 0 (no influence) */ - edgeR1?: number; - /** node influence factor */ - nodeInfluenceFactor?: number; - /** negativeNode influence factor */ - negativeNodeInfluenceFactor?: number; - /** edge influence factor */ - edgeInfluenceFactor?: number; - /** member influence factor */ - memberInfluenceFactor?: number; - /** AvoidMember influence factor */ - AvoidMemberInfluenceFactor?: number; -}; - -type ComboLabelPosition = - | 'bottom' - | 'center' - | 'top' - | 'left' - | 'left-top' - | 'right' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - -type HullComponentOptions = { - id: string; - members?: ID[]; - avoidMembers?: ID[]; - style?: ShapeStyle; - padding?: number; - type?: 'bubble' | 'round-convex' | 'smooth-convex'; - labelShape?: ShapeStyle & { - autoRotate?: boolean; - maxWidth?: string | number; - offsetX?: number; - offsetY?: number; - position?: 'left' | 'right' | 'top' | 'bottom'; - }; -}; - -type ID = string | number; -``` diff --git a/packages/site/docs/apis/plugins/Hull.zh.md b/packages/site/docs/apis/plugins/Hull.zh.md deleted file mode 100644 index 354adf8479c..00000000000 --- a/packages/site/docs/apis/plugins/Hull.zh.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Hull 轮廓包裹 -order: 12 ---- - -为一组对象添加轮廓进行包裹 - -- [用轮廓包裹节点集合](/examples/tool/hull/#hull) -- [修改包裹内部成员](/examples/tool/hull/#changeMembers) - -hull - -## 配置项 - - - -### bubbleCfg - -**类型**：`BubbleCfg` - -**默认值**：`undefined` - -更精细的配置包裹属性 - -> 通常情况下，不需要配置该属性 - -### hulls - -**类型**：`HullComponentOptions[]` - -**默认值**：`undefined` - -启用的轮廓包裹 - -> 也可以通过 API 来添加、移除、更新轮廓包裹 - -### labelShape - -**类型**： - -```ts -type labelShape = ShapeSyle & { - position?: ComboLabelPosition; - offsetX?: number; - offsetY?: number; - maxWidth?: string | number; -}; -``` - -**默认值**：`{}` - -标签样式 - -### padding - -**类型**：`number` - -**默认值**：`10` - -轮廓包裹的内边距 - -### style - -**类型**：`ShapeStyle` - -**默认值**：`{}` - -轮廓样式 - -## API - -### addHull - -**类型**：`(options: HullComponentOptions | HullComponentOptions[]) => void;` - -添加轮廓包裹 - -### addHullMember - -**类型**：`(id: ID, member: ID | ID[]) => void;` - -添加轮廓包裹成员 - -### addHullAvoidMember - -**类型**：`(id: ID, member: ID | ID[]) => void;` - -添加轮廓包裹非成员 - -### removeHull - -**类型**：`(id: ID[]) => void;` - -移除轮廓包裹 - -### removeHullMember - -**类型**：`(id: ID, member: ID | ID[]) => void;` - -移除轮廓包裹成员 - -### removeHullAvoidMember - -**类型**：`(id: ID, member: ID | ID[]) => void;` - -移除轮廓包裹非成员 - -### updateHull - -**类型**：`(options: HullComponentOptions | HullComponentOptions[]) => void;` - -更新轮廓包裹 - - - ---- - -```ts -type BubbleCfg = { - /** 当环绕障碍物时移动虚拟边缘的空间量 */ - morphBuffer?: number; - /** 算法分辨率，默认为 4 */ - pixelGroupSize?: number; - /** 用于计算轮廓的最大迭代次数，默认为 100 */ - maxMarchingIterations?: number; - /** 在困难区域运行算法以细化路径查找的次数 */ - maxRoutingIterations?: number; - /** 到能量为1的节点的距离 */ - nodeR0?: number; - /** 到能量为0的节点的距离 */ - nodeR1?: number; - /** 到能量为1的边的距离 */ - edgeR0?: number; - /** 到能量为0的边的距离 */ - edgeR1?: number; - /** 节点影响因子 */ - nodeInfluenceFactor?: number; - /** 负节点影响因子 */ - negativeNodeInfluenceFactor?: number; - /** 边影响因子 */ - edgeInfluenceFactor?: number; - /** 成员影响因子 */ - memberInfluenceFactor?: number; - /** 非成员影响因子 */ - AvoidMemberInfluenceFactor?: number; -}; - -type ComboLabelPosition = - | 'bottom' - | 'center' - | 'top' - | 'left' - | 'left-top' - | 'right' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - -type HullComponentOptions = { - id: string; - members?: ID[]; - avoidMembers?: ID[]; - style?: ShapeStyle; - padding?: number; - type?: 'bubble' | 'round-convex' | 'smooth-convex'; - labelShape?: ShapeStyle & { - autoRotate?: boolean; - maxWidth?: string | number; - offsetX?: number; - offsetY?: number; - position?: 'left' | 'right' | 'top' | 'bottom'; - }; -}; - -type ID = string | number; -``` diff --git a/packages/site/docs/apis/plugins/LegendConfig.en.md b/packages/site/docs/apis/plugins/LegendConfig.en.md deleted file mode 100644 index 76a4670dcaf..00000000000 --- a/packages/site/docs/apis/plugins/LegendConfig.en.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Legend -order: 3 ---- - -- [Filtering legend by clicking and hovering](/en/examples/tool/legend/#legend) -- [Customize legend marker style](/en/examples/tool/legend/#legendCustomMarker) -- [Render legend with SVG](/en/examples/tool/legend/#legendSVG) - -legend - -## Configurations - - - -### activeState - -**Type**: `string` - -**Default**: `'active'` - -Switch to this state after legend is activated - -### edge - -**Type**: `ItemLegendConfig` - -**Default**: `undefined` - -Edge legend configuration - -### inactiveState - -**Type**: `string` - -**Default**: `''` - -Switch to this state after legend is deactivated - -### node - -**Type**: `ItemLegendConfig` - -**Default**: `undefined` - -Node legend configuration - -### orientation - -**Type**: `'horizontal' | 'vertical'` - -**Default**: `'horizontal'` - -**Description**: The layout direction of the legend - -### selectedState - -**Type**: `string` - -**Default**: `'selected'` - -Switch to this state after legend is selected - -### size - -**Type**: `'fit-content' | [number | string, number | string]` - -**Default**: `'fit-content'` - -**Description**: The size of the legend, which can be a number or a string, or an array representing the width and height respectively. If it is a string, it can be `'fit-content'`, which means that the size of the legend adapts to the content. - -## API - - - ---- - -```ts -type ItemLegendConfig = { - /** Number of legend columns */ - cols?: number; - /** Legend column padding */ - colPadding?: number; - /** Whether to enable the legend */ - enable?: boolean; - /** Legend text format function */ - labelFormatter?: (value: string) => string; - /** Legend text style */ - labelStyle?: Style; - /** Legend marker style */ - markerStyle?: markerStyle; - /** Legend padding */ - padding?: number | number[]; - /** Number of legend rows */ - rows?: number; - /** Legend row spacing */ - rowPadding?: number; - /** Field name of item Type */ - typeField?: string; -}; -``` diff --git a/packages/site/docs/apis/plugins/LegendConfig.zh.md b/packages/site/docs/apis/plugins/LegendConfig.zh.md deleted file mode 100644 index 8b1fbbcd191..00000000000 --- a/packages/site/docs/apis/plugins/LegendConfig.zh.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Legend 图例 -order: 3 ---- - -- [图例-点击与 hover 筛选](/examples/tool/legend/#legend) -- [图例-自定义 Marker 样式](/examples/tool/legend/#legendCustomMarker) -- [图例-使用 SVG 绘制图例](/examples/tool/legend/#legendSVG) - -legend - -## 配置项 - - - -### activeState - -**类型**：`string` - -**默认值**：`'active'` - -图例激活后切换到该状态 - -### edge - -**类型**：`ItemLegendConfig` - -**默认值**：`undefined` - -边图例配置 - -### inactiveState - -**类型**：`string` - -**默认值**：`''` - -图例取消激活后切换到该状态 - -### node - -**类型**：`ItemLegendConfig` - -**默认值**：`undefined` - -节点图例配置 - -### orientation - -**类型**：`'horizontal' | 'vertical'` - -**默认值**：`'horizontal'` - -**说明**：图例的布局方向，可以是水平或者垂直方向 - -### selectedState - -**类型**：`string` - -**默认值**：`'selected'` - -图例选中后切换到该状态 - -### size - -**类型**：`'fit-content' | [number | string, number | string]` - -**默认值**：`'fit-content'` - -**说明**：图例的大小，可以是一个数字或者字符串，也可以是一个数组，分别表示宽度和高度，如果是字符串，可以是 `'fit-content'`，表示图例的大小自适应内容 - -## API - - - ---- - -```ts -type ItemLegendConfig = { - /** 图例列数 */ - cols?: number; - /** 图例列间距 */ - colPadding?: number; - /** 是否启用图例 */ - enable?: boolean; - /** 图例文本格式化函数 */ - labelFormatter?: (value: string) => string; - /** 图例文本样式 */ - labelStyle?: Style; - /** 图例 marker 样式 */ - markerStyle?: markerStyle; - /** 图例内边距 */ - padding?: number | number[]; - /** 图例行数 */ - rows?: number; - /** 图例行间距 */ - rowPadding?: number; - /** item 类型的字段名 */ - typeField?: string; -}; -``` diff --git a/packages/site/docs/apis/plugins/LodController.en.md b/packages/site/docs/apis/plugins/LodController.en.md deleted file mode 100644 index f61a5c767f5..00000000000 --- a/packages/site/docs/apis/plugins/LodController.en.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: LodController -order: 0 ---- - -LodController renders the text in the graph to a separate canvas, which has the following benefits: - -- Improve rendering performance -- Keep the text size unchanged during canvas zooming -- Provide the ability to control the text density to avoid visual confusion caused by too dense text - -:::warning -LodController is a `singleton` plugin, G6 will register this plugin by default, no need to register manually. -::: - -## Configuration - -### debounce - -**Type**: `'auto' | number` - -**Default**: `'auto'` - -Delay rendering time, in milliseconds - -> When the main canvas is zoomed or panned, LodController will render the text again after a period of time to avoid frequent rendering - -### disableLod - -**Type**: `boolean` - -**Default**: `false` - -Whether to disable rendering text in different layers - -### cellSize - -**Type**: `number` - -**Default**: `200` - -Cell size, in pixels - -### numberPerCell - -**Type**: `number` - -**Default**: `1` - -The maximum number of texts rendered in each cell diff --git a/packages/site/docs/apis/plugins/LodController.zh.md b/packages/site/docs/apis/plugins/LodController.zh.md deleted file mode 100644 index 5e8a1f7b26b..00000000000 --- a/packages/site/docs/apis/plugins/LodController.zh.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: LodController -order: 0 ---- - -LodController 将图中的文本单独渲染到独立的 canvas 上，这样的好处是： - -- 提高渲染性能 -- 在画布缩放过程中，能够保持文本字号不变 -- 提供了文本密度控制的能力，避免文本过于密集导致的视觉混乱 - -:::warning{title=注意} -LodController 是一个 `单例` 的插件，G6 会默认注册该插件，无需手动注册。 -::: - -## 配置项 - -### debounce - -**类型**：`'auto' | number` - -**默认值**：`'auto'` - -延迟渲染时间，单位：毫秒 - -> 在主画布缩放、平移时，LodController 会延迟一段时间后再次渲染文本，以避免频繁渲染 - -### disableLod - -**类型**：`boolean` - -**默认值**：`false` - -是否禁用信息分层渲染 - -### cellSize - -**类型**：`number` - -**默认值**：`200` - -单元格大小，单位：像素 - -### numberPerCell - -**类型**：`number` - -**默认值**：`1` - -每个单元格中最多渲染的文本数量 diff --git a/packages/site/docs/apis/plugins/MenuConfig.en.md b/packages/site/docs/apis/plugins/MenuConfig.en.md deleted file mode 100644 index 7660a90026c..00000000000 --- a/packages/site/docs/apis/plugins/MenuConfig.en.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Contextmenu -order: 5 ---- - -- [Context Menu](/en/examples/tool/contextMenu/#contextMenu) - -contextmenu - -## Configurations - - - - - -### handleMenuClick - -**Type**: `(target: Item, item: MenuItem) => void` - -**Default**: `undefined` - -The callback function when the menu item is clicked - -### itemTypes - -**Type**: `string[]` - -**Default**: `['node', 'edge', 'canvas']` - -The object type to add menu items - -### liHoverStyle - -**Type**: `CSSProperties` - -**Default**: - -```json -{ - "color": "white", - "background-color": "#227EFF", -}; -``` - -**Required**: false - -**Description**: The style of the menu item hover state - - - -### onHide - -**Type**: `() => void` - -**Default**: `undefined` - -The callback function when the menu is hidden - - - -### trigger - -**Type**: `'click' | 'contextmenu'` - -**Default**: `'click'` - -The trigger type of the menu - -## API - - diff --git a/packages/site/docs/apis/plugins/MenuConfig.zh.md b/packages/site/docs/apis/plugins/MenuConfig.zh.md deleted file mode 100644 index ca066550715..00000000000 --- a/packages/site/docs/apis/plugins/MenuConfig.zh.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Contextmenu 右键菜单 -order: 5 ---- - -- [上下文菜单](/examples/tool/contextMenu/#contextMenu) - -contextmenu - -## 配置项 - - - - - -### handleMenuClick - -**类型**：`(target: Item, item: MenuItem) => void` - -**默认值**：`undefined` - -点击菜单项的回调函数 - -### itemTypes - -**类型**：`string[]` - -**默认值**：`['node', 'edge', 'canvas']` - -添加菜单项的对象类型 - -### liHoverStyle - -**类型**：`CSSProperties` - -**默认值**： - -```json -{ - "color": "white", - "background-color": "#227EFF", -}; -``` - -菜单项 hover 状态的样式 - - - -### onHide - -**类型**：`() => void` - -**默认值**：`undefined` - -菜单隐藏时的回调函数 - - - -### trigger - -**类型**：`'click' | 'contextmenu'` - -**默认值**：`'click'` - -触发菜单的事件类型 - ---- - -## API - - diff --git a/packages/site/docs/apis/plugins/MiniMapConfig.en.md b/packages/site/docs/apis/plugins/MiniMapConfig.en.md deleted file mode 100644 index 1a37ee63656..00000000000 --- a/packages/site/docs/apis/plugins/MiniMapConfig.en.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: MiniMap -order: 6 ---- - -When there is too much content on the canvas, you can use the MiniMap to view the overall content of the canvas, and you can use the MiniMap to move the canvas. - -- [Minimap](/en/examples/tool/minimap/#minimap) -- [Minimap API](/en/examples/tool/minimap/#minimap-api) - -minimap - -## Configurations - - - -### delegateStyle - -**Type**: `ShapeStyle` - -**Default**: - -```json -{ - "fill": "#40a9ff", - "stroke": "#096dd9" -} -``` - -**Required**: false - -**Description**: The style of the node in the MiniMap when the mode is `'delegate'` - -### hideEdge - -**Type**: `boolean` - -**Default**: `false` - -Whether to hide the edge in the MiniMap to improve performance - -### mode - -**Type**: `'default' | 'keyShape' | 'delegate'` - -**Default**: `'default'` - -The mode of the MiniMap - -- `'default'`: The default mode, the MiniMap will display all the content of the canvas -- `'keyShape'`: Only the keyShape of all nodes in the canvas is displayed -- `'delegate'`: Only the delegate of all nodes in the canvas is displayed - -### padding - -**Type**: `number` - -**Default**: `10` - -The padding of the MiniMap - -### refresh - -**Type**: `boolean` - -**Default**: `true` - -Whether to refresh the MiniMap when the canvas is updated - -### size - -**Type**: `[number, number]` - -**Default**: `[200, 120]` - -The size of the MiniMap - -## API - - diff --git a/packages/site/docs/apis/plugins/MiniMapConfig.zh.md b/packages/site/docs/apis/plugins/MiniMapConfig.zh.md deleted file mode 100644 index 7df42aabfca..00000000000 --- a/packages/site/docs/apis/plugins/MiniMapConfig.zh.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: MiniMap 缩略图 -order: 6 ---- - -当画布的内容过多时，可以通过缩略图来查看整体画布的内容，并且可以通过缩略图来移动画布 - -- [小地图导航](/examples/tool/minimap/#minimap) -- [通过 API 控制 Minimap](/examples/tool/minimap/#minimap-api) - -minimap - -## 配置项 - - - -### delegateStyle - -**类型**：`ShapeStyle` - -**默认值**： - -```json -{ - "fill": "#40a9ff", - "stroke": "#096dd9" -} -``` - -mode 为 `'delegate'` 时，缩略图中节点的样式 - -### hideEdge - -**类型**：`boolean` - -**默认值**：`false` - -是否隐藏缩略图中的边以提高性能 - -### mode - -**类型**：`'default' | 'keyShape' | 'delegate'` - -**默认值**：`'default'` - -缩略图的模式 - -- `'default'`：默认模式，缩略图会显示画布的所有内容 -- `'keyShape'`：只显示画布中所有节点的 keyShape -- `'delegate'`：只显示画布中所有节点的 delegate - -### padding - -**类型**：`number` - -**默认值**：`10` - -缩略图的内边距 - -### refresh - -**类型**：`boolean` - -**默认值**：`true` - -是否在画布更新时刷新缩略图 - -### size - -**类型**：`[number, number]` - -**默认值**：`[200, 120]` - -缩略图的大小 - -## API - - diff --git a/packages/site/docs/apis/plugins/Overview.en.md b/packages/site/docs/apis/plugins/Overview.en.md deleted file mode 100644 index 287f9f51def..00000000000 --- a/packages/site/docs/apis/plugins/Overview.en.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Overview -order: -1 ---- - -## Plugin Development - -See [Custom Plugin](/en/manual/customize/plugin-extension) for development. - -## Plugin Registration and Use - -```ts -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; -import CustomPlugin from './path/to/custom-plugin'; - -const Graph = extend(BaseGraph, { - plugins: { - 'custom-plugin': CustomPlugin, // Register custom plugins - 'built-in-plugin': Extensions.Minimap, // Register built-in plugins, such as minimap - }, -}); - -const graph = new Graph({ - // ... Other configurations - plugins: [ - 'custom-plugin', // Use custom plugins by default configuration items - { - type: 'built-in-plugin', - key: 'minimap', - // ... Plugin configuration items - }, - ], -}); -``` diff --git a/packages/site/docs/apis/plugins/Overview.zh.md b/packages/site/docs/apis/plugins/Overview.zh.md deleted file mode 100644 index a9a3ce18c18..00000000000 --- a/packages/site/docs/apis/plugins/Overview.zh.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 概述 -order: -1 ---- - -## 插件开发 - -参见 [自定义插件](/manual/customize/plugin-extension) 进行开发。 - -## 插件注册与使用 - -```ts -import { Graph as BaseGraph, Extensions, extend } from '@antv/g6'; -import CustomPlugin from './path/to/custom-plugin'; - -const Graph = extend(BaseGraph, { - plugins: { - 'custom-plugin': CustomPlugin, // 注册自定义插件 - 'built-in-plugin': Extensions.Minimap, // 注册内置插件，例如 minimap - }, -}); - -const graph = new Graph({ - // ... 其他配置项 - plugins: [ - 'custom-plugin', // 使用自定义插件，使用默认配置项 - { - type: 'built-in-plugin', - key: 'minimap', - // ... 插件配置项 - }, - ], -}); -``` diff --git a/packages/site/docs/apis/plugins/Snapline.en.md b/packages/site/docs/apis/plugins/Snapline.en.md deleted file mode 100644 index 3d2bc27a136..00000000000 --- a/packages/site/docs/apis/plugins/Snapline.en.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Snapline -order: 13 ---- - -When two or more elements are aligned horizontally or vertically, alignment lines appear. Alignment lines can help you align elements better in layout - -- [Snapline](/en/examples/tool/snapline/#snapline) - -snapline - - - -## Configurations - -### line - -**Type**: `ShapeStyle` - -**Default**: `{}` - -Snapline style - -### itemAlignType - -**Type**: `boolean | 'horizontal' | 'vertical' | 'center'` - -**Default**: `false` - -Enable alignment line type - -- `true`: Enable center, horizontal and vertical alignment lines -- `false`: Do not enable alignment lines -- `'vertical'`: Enable vertical alignment line -- `'vertical'`: Enable vertical alignment line -- `'center'`: Enable center alignment line - -## API - - diff --git a/packages/site/docs/apis/plugins/Snapline.zh.md b/packages/site/docs/apis/plugins/Snapline.zh.md deleted file mode 100644 index 867cfd95929..00000000000 --- a/packages/site/docs/apis/plugins/Snapline.zh.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Snapline 对齐线 -order: 13 ---- - -当两个或多个元素在水平或垂直方向上对齐时，会出现对齐线。对齐线可以帮助你在布局时更好地对齐元素 - -- [对齐线](/examples/tool/snapline/#snapline) - -snapline - -## 配置项 - - - -### line - -**类型**：`ShapeStyle` - -**默认值**：`{}` - -对齐线样式 - -### itemAlignType - -**类型**：`boolean | 'horizontal' | 'vertical' | 'center'` - -**默认值**：`false` - -启用对齐线类型 - -- `true`：启用中心、水平和垂直对齐线 -- `false`：不启用对齐线 -- `'horizontal'`：启用水平对齐线 -- `'vertical'`：启用垂直对齐线 -- `'center'`：启用中心对齐线 - -## API - - - - diff --git a/packages/site/docs/apis/plugins/TimeBar.en.md b/packages/site/docs/apis/plugins/TimeBar.en.md deleted file mode 100644 index 3a0441ea889..00000000000 --- a/packages/site/docs/apis/plugins/TimeBar.en.md +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: TimeBar -order: 8 ---- - -Filter graph elements through the time bar - -- [Timebar](/en/examples/tool/timebar/#timebar-time) -- [Chart Timebar](/en/examples/tool/timebar/#timebar-chart) - -time bar - -## Configurations - - - -### axisStyle - -**Type**: `AxisStyle` - -**Default**: `{}` - -Axis style - -### chartStyle - -**Type**: `ChartStyle` - -**Default**: `{}` - -Chart style - -### controllerStyle - -**Type**: `ControllerStyle` - -**Default**: `{}` - -Controller style - -### data - -**Type**: `Datum[]` - -**Default**: `[]` - -Time bar data - -### filter - -**Type**: `type filter = (graph: Graph, values: Values) => void;` - -**Default**: `undefined` - -Take over the filtering logic, this callback will be called when the time bar value changes - -### filterItemTypes - -**Type**: `node | edge` - -**Default**: `node` - -Filter element type - -### filterType - -**Type**: `'modify' | 'visibility'` - -**Default**: `'modify'` - -Filter type - -- `modify`: Filter by updating graph data -- `visibility`: Filter by updating graph element visibility - -### getTimeFromItem - -**Type**: `(model: Model, itemType: ItemType) => number | Date;` - -**Default**: Get `timestamp`, `time`, `date`, `datetime` field value in turn - -Get time value from graph element item - -### getTimeFromData - -**Type**: `(data: Datum) => number | Date;` - -**Default**: Get `timestamp`, `time`, `date`, `datetime` field value in turn - -Get time value from time bar data - -### getValueFromData - -**Type**: `(data: Datum) => number;` - -**Default**: Get `value`, `date` field value in turn - -Get value from time bar data, used to draw in chart mode - -### interval - -**Type**: `Interval` - -**Default**: `'day'` - -Time interval in chart mode - -### labelFormatter - -**Type**: `(time: number) => string;` - -**Default**: `undefined` - -Customize the time value format in chart mode - -### loop - -**Type**: `boolean` - -**Default**: `false` - -Whether to loop - -### padding - -**Type**: `Padding` - -**Default**: `10` - -Padding - -### playMode - -**Type**: `'acc' | 'slide'` - -**Default**: `'acc'` - -Play mode - -- `'acc'`: Accumulated play, that is, when playing to the n-th time point, the graph elements from the 1st to the n-th time point will be displayed -- `'slide'`: Slide play, fixed display of the graph elements of the latest n time points - -### shouldIgnore - -**Type**: `shouldIgnore` - -
- - shouldIgnore - - -```ts -type shouldIgnore = ( - model: Model, - itemType: 'node' | 'edge', - dateRange: number | Date | [number, number] | [Date, Date], -) => boolean; -``` -
- -**Default**: `undefined` - -**Required**: false - -**Description**: Filter the callback of the graph element, return `true` to ignore the graph element - -### timebarType - -**Type**: `'chart' | 'time'` - -**Default**: `'time'` - -Time bar type - -- `'chart`: Display as a bar chart - -chart time bar - -- `time`: Display as a time line - -time bar - -### values - -**Type**: `Values` - -**Default**: The value of the first time point - -Time bar value or range - -### x - -**Type**: `number` - -**Default**: `0` - -x coordinate - -### y - -**Type**: `number` - -**Default**: `0` - -y coordinate - - - -### position - -**Type**: `'top' | 'bottom' | 'left' | 'right'` - -**Default**: `'bottom'` - -position - -> Currently only supports `'bottom'` - -### onBackward - -**Type**: `() => void;` - -**Default**: `undefined` - -Backward callback - -### onChange - -**Type**: `(values: Values) => void;` - -**Default**: `undefined` - -Value change callback - -### onForward - -**Type**: `() => void;` - -**Default**: `undefined` - -Forward callback - -### onPlay - -**Type**: `() => void;` - -**Default**: `undefined` - -Play callback - -### onPause - -**Type**: `() => void;` - -**Default**: `undefined` - -Pause callback - -### onReset - -**Type**: `() => void;` - -**Default**: `undefined` - -Reset callback - -### onSelectionTypeChange - -**Type**: `(type: 'value' | 'range') => void;` - -**Default**: `undefined` - -Selection type change callback - -### onChartTypeChange - -**Type**: `(type: 'line' | 'column') => void;` - -**Default**: `undefined` - -Chart type change callback - -## API - -### backward - -**Type**: `() => void;` - -**Description**: Backward - -### forward - -**Type**: `() => void;` - -**Description**: Forward - -### pause - -**Type**: `() => void;` - -**Description**: Pause - -### play - -**Type**: `() => void;` - -**Description**: Play - -### reset - -**Type**: `() => void;` - -**Description**: Reset - - - ---- - -```ts -type Datum = { - time: number | Date; - value: number; -}; - -type Interval = - | 'second' - | 'minute' - | 'half-hour' - | 'hour' - | 'four-hour' - | 'day' - | 'half-day' - | 'week' - | 'month' - | 'season' - | 'year'; - -type Padding = number | number[]; - -type Values = number | [number, number] | Datum | [Datum, Datum]; -``` diff --git a/packages/site/docs/apis/plugins/TimeBar.zh.md b/packages/site/docs/apis/plugins/TimeBar.zh.md deleted file mode 100644 index 7b9e6da86b9..00000000000 --- a/packages/site/docs/apis/plugins/TimeBar.zh.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: TimeBar 时间轴 -order: 8 ---- - -通过时间轴对图元素进行过滤 - -- [时间条-时间模式](/examples/tool/timebar/#timebar-time) -- [时间条-图表模式](/examples/tool/timebar/#timebar-chart) - -time bar - -## 配置项 - - - -### axisStyle - -**类型**：`AxisStyle` - -**默认值**：`{}` - -轴样式 - -### chartStyle - -**类型**：`ChartStyle` - -**默认值**：`{}` - -图表样式 - -### controllerStyle - -**类型**：`ControllerStyle` - -**默认值**：`{}` - -控制器样式 - -### data - -**类型**：`Datum[]` - -**默认值**：`[]` - -时间轴数据 - -### filter - -**类型**：`type filter = (graph: Graph, values: Values) => void;` - -**默认值**：`undefined` - -接管过滤逻辑，当时间轴值变化时，会调用该回调 - -### filterItemTypes - -**类型**：`node | edge` - -**默认值**：`node` - -过滤图元素类型 - -### filterType - -**类型**：`'modify' | 'visibility'` - -**默认值**：`'modify'` - -过滤类型 - -- `modify`：通过更新图数据的方式进行过滤 -- `visibility`：通过更新图元素的可见性进行过滤 - -### getTimeFromItem - -**类型**：`(model: Model, itemType: ItemType) => number | Date;` - -**默认值**：依次尝试取 `timestamp`, `time`, `date`, `datetime` 字段属性值 - -从图元素数据中获取时间值 - -### getTimeFromData - -**类型**：`(data: Datum) => number | Date;` - -**默认值**：依次尝试取 `timestamp`, `time`, `date`, `datetime` 字段属性值 - -从时间轴数据中获取时间值 - -### getValueFromData - -**类型**：`(data: Datum) => number;` - -**默认值**：依次尝试取 `value`, `date` 字段属性值 - -从时间轴数据中获取值，用于在图表模式下进行绘制 - -### interval - -**类型**：`Interval` - -**默认值**：`'day'` - -图表模式下，需要指定时间间隔 - -### labelFormatter - -**类型**：`(time: number) => string;` - -**默认值**：`undefined` - -图表模式下，时间值自定义格式化 - -### loop - -**类型**：`boolean` - -**默认值**：`false` - -是否循环播放 - -### padding - -**类型**：`Padding` - -**默认值**：`10` - -时间轴内边距 - -### playMode - -**类型**：`'acc' | 'slide'` - -**默认值**：`'acc'` - -播放模式 - -- `'acc'`：累加播放，即播放到第 n 个时间点时，会显示第 1 到第 n 个时间点的图元素 -- `'slide'`：滑动播放，固定显示最近 n 个时间点的图元素 - -### shouldIgnore - -**类型**：`shouldIgnore` - -
- - shouldIgnore - - -```ts -type shouldIgnore = ( - model: Model, - itemType: 'node' | 'edge', - dateRange: number | Date | [number, number] | [Date, Date], -) => boolean; -``` -
- -**默认值**：`undefined` - -过滤图元素的回调，返回 `true` 表示忽略该图元素 - -### timebarType - -**类型**：`'chart' | 'time'` - -**默认值**：`'time'` - -时间轴类型 - -- `chart`：显示为条形图或柱状图 - -chart time bar - -- `time`：显示为时间线 - -time bar - -### values - -**类型**：`Values` - -**默认值**：第一个时间点的值 - -时间点/时间范围 - -### x - -**类型**：`number` - -**默认值**：`0` - -x 坐标 - -### y - -**类型**：`number` - -**默认值**：`0` - -y 坐标 - - - -### position - -**类型**：`'top' | 'bottom' | 'left' | 'right'` - -**默认值**：`'bottom'` - -位置 - -> 目前仅支持 `'bottom'` - -### onBackward - -**类型**：`() => void;` - -**默认值**：`undefined` - -后退回调 - -### onChange - -**类型**：`(values: Values) => void;` - -**默认值**：`undefined` - -时间值变化回调 - -### onForward - -**类型**：`() => void;` - -**默认值**：`undefined` - -前进回调 - -### onPlay - -**类型**：`() => void;` - -**默认值**：`undefined` - -播放回调 - -### onPause - -**类型**：`() => void;` - -**默认值**：`undefined` - -暂停回调 - -### onReset - -**类型**：`() => void;` - -**默认值**：`undefined` - -重置回调 - -### onSelectionTypeChange - -**类型**：`(type: 'value' | 'range') => void;` - -**默认值**：`undefined` - -选择类型变化回调 - -### onChartTypeChange - -**类型**：`(type: 'line' | 'column') => void;` - -**默认值**：`undefined` - -图表类型变化回调 - -## API - -### backward - -**类型**：`() => void;` - -后退 - -### forward - -**类型**：`() => void;` - -前进 - -### pause - -**类型**：`() => void;` - -暂停 - -### play - -**类型**：`() => void;` - -播放 - -### reset - -**类型**：`() => void;` - -重置 - - - ---- - -```ts -type Datum = { - time: number | Date; - value: number; -}; - -type Interval = - | 'second' - | 'minute' - | 'half-hour' - | 'hour' - | 'four-hour' - | 'day' - | 'half-day' - | 'week' - | 'month' - | 'season' - | 'year'; - -type Padding = number | number[]; - -type Values = number | [number, number] | Datum | [Datum, Datum]; -``` diff --git a/packages/site/docs/apis/plugins/ToolbarConfig.en.md b/packages/site/docs/apis/plugins/ToolbarConfig.en.md deleted file mode 100644 index 6bdd2189d55..00000000000 --- a/packages/site/docs/apis/plugins/ToolbarConfig.en.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Toolbar -order: 7 ---- - -- [ToolBar](/en/examples/tool/toolbar/#toolbar) -- [Custom ToolBar](/en/examples/tool/toolbar/#self-toolbar) - -toolbar - -## Configurations - - - -### handleClick - -**Type**: `(code: string, evt: IG6GraphEvent) => void` - - - -**Default**: `undefined` - -Click event callback - - - -## API - - diff --git a/packages/site/docs/apis/plugins/ToolbarConfig.zh.md b/packages/site/docs/apis/plugins/ToolbarConfig.zh.md deleted file mode 100644 index ea4f219a818..00000000000 --- a/packages/site/docs/apis/plugins/ToolbarConfig.zh.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Toolbar 工具栏 -order: 7 ---- - -- [工具栏](/examples/tool/toolbar/#toolbar) -- [自定义工具栏](/examples/tool/toolbar/#self-toolbar) - -toolbar - -## 配置项 - - - -### handleClick - -**类型**：`(code: string, evt: IG6GraphEvent) => void` - - - -**默认值**：`undefined` - -点击事件回调 - - - - - - - -## API - - - - - - diff --git a/packages/site/docs/apis/plugins/TooltipConfig.en.md b/packages/site/docs/apis/plugins/TooltipConfig.en.md deleted file mode 100644 index b1f76d0eaa0..00000000000 --- a/packages/site/docs/apis/plugins/TooltipConfig.en.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Tooltip -order: 4 ---- - -- [Tooltip Plugin](/en/examples/tool/tooltip/#tooltipPlugin) -- [Tooltip Plugin with Click Trigger](/en/examples/tool/tooltip/#tooltipClick) - -tooltip - -## Configurations - - - -### fixToNode - -**Type**: `[number, number] | Placement | undefined` - -**Default**: `undefined` - -Fix the position to the node - - - -### itemTypes - -**Type**: `('node' | 'edge' | 'combo' | 'canvas')[]` - -**Default**: `['node', 'edge', 'combo']` - -The types of the items to add the tooltip - - - -### offsetX - -**Type**: `number` - -**Default**: `0` - -x offset - -### offsetY - -**Type**: `number` - -**Default**: `0` - -y offset - - - -### trigger - -**Type**: `'pointerenter' | 'click'` - -**Default**: `'pointerenter'` - -The trigger event type - -## API - -### hideTooltip - -**Type**: `() => void` - -**Description**: Hide the Tooltip - -### showTooltip - -**Type**: `(item: Item, x: number, y: number) => void` - -**Description**: Show the Tooltip - -> This API is not available yet - -### updatePosition - -**Type**: `(item: Item, x: number, y: number) => void` - -**Description**: Update the position of the Tooltip - -> This API is not available yet - - diff --git a/packages/site/docs/apis/plugins/TooltipConfig.zh.md b/packages/site/docs/apis/plugins/TooltipConfig.zh.md deleted file mode 100644 index 27e88039000..00000000000 --- a/packages/site/docs/apis/plugins/TooltipConfig.zh.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Tooltip 提示项 -order: 4 ---- - -- [提示框插件](/examples/tool/tooltip/#tooltipPlugin) -- [点击出现提示框](/examples/tool/tooltip/#tooltipClick) - -tooltip - -## 配置项 - - - -### fixToNode - -**类型**：`[number, number] | Placement | undefined` - -**默认值**：`undefined` - -固定到节点的位置 - - - -### itemTypes - -**类型**：`('node' | 'edge' | 'combo' | 'canvas')[]` - -**默认值**：`['node', 'edge', 'combo']` - -添加菜单项的对象类型 - - - -### offsetX - -**类型**：`number` - -**默认值**：`0` - -x 轴偏移量 - -### offsetY - -**类型**：`number` - -**默认值**：`0` - -y 轴偏移量 - - - -### trigger - -**类型**：`'pointerenter' | 'click'` - -**默认值**：`'pointerenter'` - -触发交互的事件类型 - -## API - -### hideTooltip - -**类型**：`() => void` - -**说明**：隐藏 Tooltip - -### showTooltip - -**类型**：`(item: Item, x: number, y: number) => void` - -**说明**：显示 Tooltip - -> 该 API 暂不可用 - -### updatePosition - -**类型**：`(x: number, y: number) => void` - -**说明**：更新 Tooltip 的位置 - -> 该 API 暂不可用 - - diff --git a/packages/site/docs/apis/plugins/WaterMarker.en.md b/packages/site/docs/apis/plugins/WaterMarker.en.md deleted file mode 100644 index 05ee3fe6c5a..00000000000 --- a/packages/site/docs/apis/plugins/WaterMarker.en.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WaterMarker -order: 9 ---- - -- [Text WaterMarker](/en/examples/tool/watermarker/#textWaterMarker) -- [Image WaterMarker](/en/examples/tool/watermarker/#imgWaterMarker) - -water marker - -## Configurations - - - -### begin - -**Type**: `[number, number]` - -**Default**: `[0, 0]` - -Watermark start position - -### image - -**Type**: `ImageWaterMarkerConfig` - -**Default**: `undefined` - -Image watermark configuration - -### mode - -**Type**: `'image' | 'text'` - -**Default**: `'image'` - -Watermark type - -### position - -**Type**: `'top' | 'middle' | 'bottom' - -**Default**: `'middle'` - -Watermark position - -- `top`: Top layer canvas (above the graph) -- `middle`: Middle layer canvas -- `bottom`: Bottom layer canvas (below the graph) - -### separation - -**Type**: `[number, number]` - -**Default**: `[100, 100]` - -The distance between the watermark and the canvas - - - -### text - -**Type**: `TextWaterMarkerConfig` - -**Default**: `undefined` - -Text watermark configuration - -## API - - - ---- - -```ts -type ImageWaterMarkerConfig = { - imgURL: string; - width: number; - height: number; - rotate: number; -}; - -interface TextWaterMarkerConfig extends TextStyleProps { - /** Text or an array of texts to be used as the watermark content. */ - texts: string | string[]; - /** Rotation angle of the text watermark in degrees (0 to 360). */ - rotate: number; -} -``` - -- [TextStyleProps](/apis/shape/text-style-props) diff --git a/packages/site/docs/apis/plugins/WaterMarker.zh.md b/packages/site/docs/apis/plugins/WaterMarker.zh.md deleted file mode 100644 index 21493e5b057..00000000000 --- a/packages/site/docs/apis/plugins/WaterMarker.zh.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WaterMarker 水印 -order: 9 ---- - -- [文本水印](/examples/tool/watermarker/#textWaterMarker) -- [图片水印](/examples/tool/watermarker/#imgWaterMarker) - -water marker - -## 配置项 - - - -### begin - -**类型**：`[number, number]` - -**默认值**：`[0, 0]` - -水印开始位置 - -### image - -**类型**：`ImageWaterMarkerConfig` - -**默认值**：`undefined` - -图片水印配置项 - -### mode - -**类型**：`'image' | 'text'` - -**默认值**：`'image'` - -水印类型 - -### position - -**类型**：`'top' | 'middle' | 'bottom' - -**默认值**：`'middle'` - -水印位置 - -- `top`：顶层画布（位于图上层） -- `middle`：中间层画布 -- `bottom`：底层画布（位于图下层） - -### separation - -**类型**：`[number, number]` - -**默认值**：`[100, 100]` - -水印间隔 - - - -### text - -**类型**：`TextWaterMarkerConfig` - -**默认值**：`undefined` - -文字水印配置项 - -## API - - - ---- - -```ts -type ImageWaterMarkerConfig = { - imgURL: string; - width: number; - height: number; - rotate: number; -}; - -interface TextWaterMarkerConfig extends TextStyleProps { - /** Text or an array of texts to be used as the watermark content. */ - texts: string | string[]; - /** Rotation angle of the text watermark in degrees (0 to 360). */ - rotate: number; -} -``` - -- [TextStyleProps](/apis/shape/text-style-props) diff --git a/packages/site/docs/apis/shape/CircleStyleProps.en.md b/packages/site/docs/apis/shape/CircleStyleProps.en.md deleted file mode 100644 index 3851a560023..00000000000 --- a/packages/site/docs/apis/shape/CircleStyleProps.en.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Circle -order: 0 ---- - -## cx - -**Type**: `number` - -**Default**: `0` - -The x coordinate of the center of the circle - -## cy - -**Type**: `number` - -**Default**: `0` - -The y coordinate of the center of the circle - -## r - -**Type**: `number` - -**Default**: `0` - -The radius of the circle - - diff --git a/packages/site/docs/apis/shape/CircleStyleProps.zh.md b/packages/site/docs/apis/shape/CircleStyleProps.zh.md deleted file mode 100644 index 3d81772a87f..00000000000 --- a/packages/site/docs/apis/shape/CircleStyleProps.zh.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Circle 圆形 -order: 0 ---- - -## cx - -**类型**：`number` - -**默认值**：`0` - -圆心的 x 坐标 - -## cy - -**类型**：`number` - -**默认值**：`0` - -圆心的 y 坐标 - -## r - -**类型**：`number` - -**默认值**： `0` - -圆形的半径 - - diff --git a/packages/site/docs/apis/shape/CubeGeometryProps.en.md b/packages/site/docs/apis/shape/CubeGeometryProps.en.md deleted file mode 100644 index 5cfbf846fbc..00000000000 --- a/packages/site/docs/apis/shape/CubeGeometryProps.en.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Cube -order: 10 ---- - -Cube Geometry - -cube - - - -## depth - -**Type**: `number` - -**Default**: `1` - -depth - -## widthSegments - -**Type**: `number` - -**Default**: `1` - -width segments - -## heightSegments - -**Type**: `number` - -**Default**: `1` - -height segments - -## depthSegments - -**Type**: `number` - -**Default**: `1` - -depth segments diff --git a/packages/site/docs/apis/shape/CubeGeometryProps.zh.md b/packages/site/docs/apis/shape/CubeGeometryProps.zh.md deleted file mode 100644 index 7457580686f..00000000000 --- a/packages/site/docs/apis/shape/CubeGeometryProps.zh.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Cube 立方体 -order: 10 ---- - -cube - - - -## depth - -**类型**：`number` - -**默认值**：`1` - -深度 - -## widthSegments - -**类型**：`number` - -**默认值**：`1` - -宽度分段数 - -## heightSegments - -**类型**：`number` - -**默认值**：`1` - -高度分段数 - -## depthSegments - -**类型**：`number` - -**默认值**：`1` - -深度分段数 diff --git a/packages/site/docs/apis/shape/EllipseStyleProps.en.md b/packages/site/docs/apis/shape/EllipseStyleProps.en.md deleted file mode 100644 index ab3a19a5666..00000000000 --- a/packages/site/docs/apis/shape/EllipseStyleProps.en.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Ellipse -order: 7 ---- - -## cx - -**Type**: `number` - -**Default**: `0` - -The x coordinate of the center of the ellipse - -## cy - -**Type**: `number` - -**Default**: `0` - -The y coordinate of the center of the ellipse - -## rx - -**Type**: `number` - -**Default**: `0` - -The horizontal radius of the ellipse - -## ry - -**Type**: `number` - -**Default**: `0` - -The vertical radius of the ellipse - - diff --git a/packages/site/docs/apis/shape/EllipseStyleProps.zh.md b/packages/site/docs/apis/shape/EllipseStyleProps.zh.md deleted file mode 100644 index bcbcbf7a053..00000000000 --- a/packages/site/docs/apis/shape/EllipseStyleProps.zh.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Ellipse 椭圆 -order: 7 ---- - -## cx - -**类型**：`number` - -**默认值**：`0` - -椭圆心的 x 坐标 - -## cy - -**类型**：`number` - -**默认值**：`0` - -椭圆心的 y 坐标 - -## rx - -**类型**：`number` - -**默认值**： `0` - -椭圆的水平半径 - -## ry - -**类型**：`number` - -**默认值**： `0` - -椭圆的垂直半径 - - diff --git a/packages/site/docs/apis/shape/ImageStyleProps.en.md b/packages/site/docs/apis/shape/ImageStyleProps.en.md deleted file mode 100644 index eeb64f19b93..00000000000 --- a/packages/site/docs/apis/shape/ImageStyleProps.en.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Image -order: 3 ---- - - - -## img - -**Type**: `string | HTMLImageElement` - -**Default**: `null` - -image object - -## src - -**Type**: `string` - -**Default**: `null` - -image url - - diff --git a/packages/site/docs/apis/shape/ImageStyleProps.zh.md b/packages/site/docs/apis/shape/ImageStyleProps.zh.md deleted file mode 100644 index 17fd0962ff1..00000000000 --- a/packages/site/docs/apis/shape/ImageStyleProps.zh.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Image 图片 -order: 3 ---- - - - -## img - -**类型**：`string | HTMLImageElement` - -**默认值**：`null` - -图片对象 - -## src - -**类型**：`string` - -**默认值**：`null` - -图片地址 - - diff --git a/packages/site/docs/apis/shape/LineStyleProps.en.md b/packages/site/docs/apis/shape/LineStyleProps.en.md deleted file mode 100644 index 2a71874fa90..00000000000 --- a/packages/site/docs/apis/shape/LineStyleProps.en.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Line -order: 4 ---- - -## x1 - -**Type**: `number` - -**Default**: `0` - -The x coordinate of the start point - -## y1 - -**Type**: `number` - -**Default**: `0` - -The y coordinate of the start point - -## x2 - -**Type**: `number` - -**Default**: `0` - -The x coordinate of the end point - -## y2 - -**Type**: `number` - -**Default**: `0` - -The y coordinate of the end point - -## markerStart - -**Type**: `DisplayObject` - -**Default**: `null` - -Marker at the start point - -## markerEnd - -**Type**: `DisplayObject` - -**Default**: `null` - -Marker at the end point - -## markerStartOffset - -**Type**: `number` - -**Default**: `0` - -The offset of the start marker - -## markerEndOffset - -**Type**: `number` - -**Default**: `0` - -The offset of the end marker - - diff --git a/packages/site/docs/apis/shape/LineStyleProps.zh.md b/packages/site/docs/apis/shape/LineStyleProps.zh.md deleted file mode 100644 index c671320e65d..00000000000 --- a/packages/site/docs/apis/shape/LineStyleProps.zh.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Line 直线 -order: 4 ---- - -## x1 - -**类型**：`number` - -**默认值**：`0` - -起点的 x 坐标 - -## y1 - -**类型**：`number` - -**默认值**：`0` - -起点的 y 坐标 - -## x2 - -**类型**：`number` - -**默认值**：`0` - -终点的 x 坐标 - -## y2 - -**类型**：`number` - -**默认值**：`0` - -终点的 y 坐标 - -## markerStart - -**类型**：`DisplayObject` - -**默认值**：`null` - -起点标记图形 - -## markerEnd - -**类型**：`DisplayObject` - -**默认值**：`null` - -终点标记图形 - -## markerStartOffset - -**类型**：`number` - -**默认值**：`0` - -起点标记图形在直线上的偏移量 - -## markerEndOffset - -**类型**：`number` - -**默认值**：`0` - -终点标记图形在直线上的偏移量 - - diff --git a/packages/site/docs/apis/shape/Overview.en.md b/packages/site/docs/apis/shape/Overview.en.md deleted file mode 100644 index afa3936b031..00000000000 --- a/packages/site/docs/apis/shape/Overview.en.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Overview -order: -1 ---- - -Shapes are usually used when customizing [nodes](/manual/customize/node-extension) or [edges](/manual/customize/edge-extension). G6 supports the following shapes: - -- 2D Shapes - - - [circle](/apis/shape/circle-style-props) - - [rect](/apis/shape/rect-style-props) - - [text](/apis/shape/text-style-props) - - [image](/apis/shape/image-style-props) - - [line](/apis/shape/line-style-props) - - [path](/apis/shape/path-style-props) - - [polyline](/apis/shape/polyline-style-props) - - [polygon](/apis/shape/polygon-style-props) - - [ellipse](/apis/shape/ellipse-style-props) - -- 3D Shapes - - - [sphere](/apis/shape/sphere-geometry-props) - - [cube](/apis/shape/cube-geometry-props) - - [plane](/apis/shape/plane-geometry-props) - - [torus](/apis/shape/torus-geometry-props) diff --git a/packages/site/docs/apis/shape/Overview.zh.md b/packages/site/docs/apis/shape/Overview.zh.md deleted file mode 100644 index 74fd1b46e8d..00000000000 --- a/packages/site/docs/apis/shape/Overview.zh.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 概述 -order: -1 ---- - -图形通常在自定义[节点](/manual/customize/node-extension)或[边](/manual/customize/edge-extension)时使用。G6 支持的图形包括： - -- 2D 图形 - - - [circle](/apis/shape/circle-style-props) 圆形 - - [rect](/apis/shape/rect-style-props) 矩形 - - [text](/apis/shape/text-style-props) 文本 - - [image](/apis/shape/image-style-props) 图片 - - [line](/apis/shape/line-style-props) 直线 - - [path](/apis/shape/path-style-props) 路径 - - [polyline](/apis/shape/polyline-style-props) 折线 - - [polygon](/apis/shape/polygon-style-props) 多边形 - - [ellipse](/apis/shape/ellipse-style-props) 椭圆 - -- 3D 图形 - - - [sphere](/apis/shape/sphere-geometry-props) 球体 - - [cube](/apis/shape/cube-geometry-props) 立方体 - - [plane](/apis/shape/plane-geometry-props) 平面 - - [torus](/apis/shape/torus-geometry-props) 圆环 diff --git a/packages/site/docs/apis/shape/PathStyleProps.en.md b/packages/site/docs/apis/shape/PathStyleProps.en.md deleted file mode 100644 index d40c71030b4..00000000000 --- a/packages/site/docs/apis/shape/PathStyleProps.en.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Path -order: 5 ---- - -## path - -**Type**: `string | PathCommand[]` - -**Default**: `''` - -Path string or path command array - - - - diff --git a/packages/site/docs/apis/shape/PathStyleProps.zh.md b/packages/site/docs/apis/shape/PathStyleProps.zh.md deleted file mode 100644 index 96e2cf3928b..00000000000 --- a/packages/site/docs/apis/shape/PathStyleProps.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Path 路径 -order: 5 ---- - -## path - -**类型**：`string | PathCommand[]` - -**默认值**：`''` - -路径字符串或者路径命令数组 - - - - diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.en.md b/packages/site/docs/apis/shape/PlaneGeometryProps.en.md deleted file mode 100644 index 5e1bc01c7ea..00000000000 --- a/packages/site/docs/apis/shape/PlaneGeometryProps.en.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Plane -order: 11 ---- - -Plane geometry, default lying on the XZ plane - -plane - -## width - -**Type**: `number` - -**Default**: `100` - -width - -## depth - -**Type**: `number` - -**Default**: `100` - -depth - -## widthSegments - -**Type**: `number` - -**Default**: `5` - -width segments - -## depthSegments - -**Type**: `number` - -**Default**: `5` - -depth segments - -## materialType - -**Type**：`'basic' | 'phong' | 'lambert'` - -**Default**：`basic` - -material type - -## materialProps - -**Type**: `MaterialProps` - -
- - MaterialProps - - -```ts -type MaterialProps = { - /** Whether to enable wireframe mode, which is often used to intuitively display triangles */ - wireframe?: boolean; - /** Specify the color after opening wireframe */ - wireframeColor?: string; - /** Specify the line width after opening wireframe */ - wireframeLineWidth?: number; - /** - * Specify the cull mode - * 0: no culling - * 1: cull front - * 2: cull back - * 3: cull front and back - */ - cullMode?: number; -}; -``` - -
- -**Default**: `object` - -
- - object - - -```json -{ - "wireframe": false, - "wireframeColor": "black", - "wireframeLineWidth": 1, - "cullMode": 0 -} -``` - -
- -material-related properties diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md b/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md deleted file mode 100644 index 2e7d7283044..00000000000 --- a/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Plane 平面 -order: 11 ---- - -默认躺在 XZ 平面上 - -plane - -## width - -**类型**：`number` - -**默认值**：`100` - -宽度 - -## depth - -**类型**：`number` - -**默认值**：`100` - -深度 - -## widthSegments - -**类型**：`number` - -**默认值**：`5` - -宽度分段数 - -## depthSegments - -**类型**：`number` - -**默认值**：`5` - -深度分段数 - -## materialType - -**类型**：`'basic' | 'phong' | 'lambert'` - -**默认值**：`basic` - -材质类型 - -## materialProps - -**类型**：`MaterialProps` - -
- - MaterialProps - - -```ts -type MaterialProps = { - /** 是否绘制 wireframe，常用于直观展示三角面 */ - wireframe?: boolean; - /** 开启 wireframe 后可指定颜色，默认为 'black' */ - wireframeColor?: string; - /** 开启 wireframe 后可指定线宽，默认为 1 */ - wireframeLineWidth?: number; - /** - * 开启 面剔除 - * 0：不剔除 - * 1：正面剔除 - * 2：背面剔除 - * 3：正背面剔除 - */ - cullMode?: number; -}; -``` - -
- -**默认值**：`object` - -
- - object - - -```json -{ - "wireframe": false, - "wireframeColor": "black", - "wireframeLineWidth": 1, - "cullMode": 0 -} -``` - -
- -材质相关属性 diff --git a/packages/site/docs/apis/shape/PolygonStyleProps.en.md b/packages/site/docs/apis/shape/PolygonStyleProps.en.md deleted file mode 100644 index 03f92ffb0ae..00000000000 --- a/packages/site/docs/apis/shape/PolygonStyleProps.en.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Polygon -order: 8 ---- - -## points - -**Type**: `number[]` - -**Default**: `[]` - -The vertex coordinate array of the polygon - -## isClosed - -**Type**: `boolean` - -**Default**: `false` - -Whether it is closed - - - - diff --git a/packages/site/docs/apis/shape/PolygonStyleProps.zh.md b/packages/site/docs/apis/shape/PolygonStyleProps.zh.md deleted file mode 100644 index acba3a81301..00000000000 --- a/packages/site/docs/apis/shape/PolygonStyleProps.zh.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Polygon 多边形 -order: 8 ---- - -## points - -**类型**：`number[]` - -**默认值**：`[]` - -多边形的顶点坐标数组 - -## isClosed - -**类型**：`boolean` - -**默认值**：`false` - -是否闭合 - - - - diff --git a/packages/site/docs/apis/shape/PolylineStyleProps.en.md b/packages/site/docs/apis/shape/PolylineStyleProps.en.md deleted file mode 100644 index 435a702e5dd..00000000000 --- a/packages/site/docs/apis/shape/PolylineStyleProps.en.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Polyline -order: 6 ---- - - - - diff --git a/packages/site/docs/apis/shape/PolylineStyleProps.zh.md b/packages/site/docs/apis/shape/PolylineStyleProps.zh.md deleted file mode 100644 index bf447351e22..00000000000 --- a/packages/site/docs/apis/shape/PolylineStyleProps.zh.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Polyline 折线 -order: 6 ---- - - - - diff --git a/packages/site/docs/apis/shape/RectStyleProps.en.md b/packages/site/docs/apis/shape/RectStyleProps.en.md deleted file mode 100644 index dfbc80f0d9a..00000000000 --- a/packages/site/docs/apis/shape/RectStyleProps.en.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Rect -order: 1 ---- - - - -## radius - -**Type**: `number | number[]` - -**Default**: `0` - -Radius of rounded corners - - diff --git a/packages/site/docs/apis/shape/RectStyleProps.zh.md b/packages/site/docs/apis/shape/RectStyleProps.zh.md deleted file mode 100644 index 2205858d4b0..00000000000 --- a/packages/site/docs/apis/shape/RectStyleProps.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Rect 矩形 -order: 1 ---- - - - -## radius - -**类型**：`number | number[]` - -**默认值**：`0` - -圆角半径 - - diff --git a/packages/site/docs/apis/shape/SphereGeometryProps.en.md b/packages/site/docs/apis/shape/SphereGeometryProps.en.md deleted file mode 100644 index 39d3f3f597a..00000000000 --- a/packages/site/docs/apis/shape/SphereGeometryProps.en.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Sphere -order: 9 ---- - -Sphere Geometry - -sphere - -## radius - -**Type**: `number` - -**Default**: `0.5` - -radius - -## latitudeBands - -**Type**: `number` - -**Default**: `16` - -latitude bands - -## longitudeBands - -**Type**: `number` - -**Default**: `16` - -longitude bands diff --git a/packages/site/docs/apis/shape/SphereGeometryProps.zh.md b/packages/site/docs/apis/shape/SphereGeometryProps.zh.md deleted file mode 100644 index c87082ed832..00000000000 --- a/packages/site/docs/apis/shape/SphereGeometryProps.zh.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Sphere 球体 -order: 9 ---- - -sphere - -## radius - -**类型**：`number` - -**默认值**：`0.5` - -radius - -## latitudeBands - -**类型**：`number` - -**默认值**：`16` - -latitude bands - -## longitudeBands - -**类型**：`number` - -**默认值**：`16` - -longitude bands diff --git a/packages/site/docs/apis/shape/TextStyleProps.en.md b/packages/site/docs/apis/shape/TextStyleProps.en.md deleted file mode 100644 index 789ecebbaf5..00000000000 --- a/packages/site/docs/apis/shape/TextStyleProps.en.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Text -order: 2 ---- - -## dx - -**Type**: `number` - -**Default**: `0` - -The x-axis offset - -## dy - -**Type**: `number` - -**Default**: `0` - -The y-axis offset - -## fontFamily - -**Type**: `string` - -**Default**: `''` - -font family - -## fontSize - -**Type**: `number` - -**Default**: `10` - -font size - -## fontStyle - -**Type**: `'normal' | 'italic' | 'oblique'` - -**Default**: `'normal'` - -font style - -## fontVariant - -**Type**: `'normal' | 'small-caps'` - -**Default**: `'normal'` - -font variant - -## fontWeight - -**Type**: `'normal' | 'bold' | 'bolder' | 'lighter' | number` - -**Default**: `'normal'` - -font weight - -## leading - -**Type**: `number` - -**Default**: `0` - -leading - -## letterSpacing - -**Type**: `number` - -**Default**: `0` - -letter spacing - -## lineHeight - -**Type**: `number` - -**Default**: `0` - -line height - -## text - -**Type**: `string` - -**Default**: `''` - -text content - -## textAlign - -**Type**: `'start' | 'center' | 'middle' | 'end' | 'left' | 'right'` - -**Default**: `'start'` - -text align - -## textBaseline - -**Type**: `'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'` - -**Default**: `'alphabetic'` - -text baseline - -## textDecorationColor - -**Type**: `string` - -**Default**: `''` - -text decoration color - -## textDecorationLine - -**Type**: `'none' | 'underline' | 'overline' | 'line-through' | 'blink'` - -**Default**: `'none'` - -text decoration line - -## textDecorationStyle - -**Type**: `'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'` - -**Default**: `'solid'` - -text decoration style - -## textOverflow - -**Type**: `'ellipsis' | 'clip' | string` - -**Default**: `'clip'` - -text overflow - -## textPath - -**Type**: `Path` - -**Default**: `''` - -text path - -## textPathSide - -**Type**: `'left' | 'right'` - -**Default**: `'left'` - -text path side - -## textPathStartOffset - -**Type**: `number` - -**Default**: `0` - -text path start offset - -## wordWrap - -**Type**: `boolean` - -**Default**: `false` - -word wrap - -## wordWrapWidth - -**Type**: `number` - -**Default**: `0` - -word wrap width - - diff --git a/packages/site/docs/apis/shape/TextStyleProps.zh.md b/packages/site/docs/apis/shape/TextStyleProps.zh.md deleted file mode 100644 index cd426c816e6..00000000000 --- a/packages/site/docs/apis/shape/TextStyleProps.zh.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Text 文本 -order: 2 ---- - -## dx - -**类型**：`number` - -**默认值**：`0` - -x 方向偏移量 - -## dy - -**类型**：`number` - -**默认值**：`0` - -y 方向偏移量 - -## fontFamily - -**类型**：`string` - -**默认值**：`''` - -字体 - -## fontSize - -**类型**：`number` - -**默认值**：`10` - -字体大小 - -## fontStyle - -**类型**：`'normal' | 'italic' | 'oblique'` - -**默认值**：`'normal'` - -字体样式 - -## fontVariant - -**类型**：`'normal' | 'small-caps'` - -**默认值**：`'normal'` - -字体变体 - -## fontWeight - -**类型**：`'normal' | 'bold' | 'bolder' | 'lighter' | number` - -**默认值**：`'normal'` - -字体粗细 - -## leading - -**类型**：`number` - -**默认值**：`0` - -行距 - -## letterSpacing - -**类型**：`number` - -**默认值**：`0` - -字间距 - -## lineHeight - -**类型**：`number` - -**默认值**：`0` - -行高 - -## text - -**类型**：`string` - -**默认值**：`''` - -文本内容 - -## textAlign - -**类型**：`'start' | 'center' | 'middle' | 'end' | 'left' | 'right'` - -**默认值**：`'start'` - -文本对齐方式 - -## textBaseline - -**类型**：`'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'` - -**默认值**：`'alphabetic'` - -文本基线对齐方式 - -## textDecorationColor - -**类型**：`string` - -**默认值**：`''` - -文本修饰线颜色 - -## textDecorationLine - -**类型**：`'none' | 'underline' | 'overline' | 'line-through' | 'blink'` - -**默认值**：`'none'` - -文本修饰线 - -## textDecorationStyle - -**类型**：`'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'` - -**默认值**：`'solid'` - -文本修饰线样式 - -## textOverflow - -**类型**：`'ellipsis' | 'clip' | string` - -**默认值**：`'clip'` - -文本溢出处理方式 - -## textPath - -**类型**：`Path` - -**默认值**：`''` - -文本路径 - -## textPathSide - -**类型**：`'left' | 'right'` - -**默认值**：`'left'` - -文本路径方向 - -## textPathStartOffset - -**类型**：`number` - -**默认值**：`0` - -文本路径起始偏移量 - -## wordWrap - -**类型**：`boolean` - -**默认值**：`false` - -是否自动换行 - -## wordWrapWidth - -**类型**：`number` - -**默认值**：`0` - -自动换行宽度 - - diff --git a/packages/site/docs/apis/shape/TorusGeometryProps.en.md b/packages/site/docs/apis/shape/TorusGeometryProps.en.md deleted file mode 100644 index 094620ede0e..00000000000 --- a/packages/site/docs/apis/shape/TorusGeometryProps.en.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Torus -order: 12 ---- - -Torus Geometry - -torus - -## tubeRadius - -**Type**: `number` - -**Default**: `0.2` - -The radius of the tube - -## ringRadius - -**Type**: `number` - -**Default**: `0.3` - -The radius of the ring - -## segments - -**Type**: `number` - -**Default**: `30` - -The number of segments - -## sides - -**Type**: `number` - -**Default**: `20` - -The number of sides \ No newline at end of file diff --git a/packages/site/docs/apis/shape/TorusGeometryProps.zh.md b/packages/site/docs/apis/shape/TorusGeometryProps.zh.md deleted file mode 100644 index ecbcdc01267..00000000000 --- a/packages/site/docs/apis/shape/TorusGeometryProps.zh.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Torus 圆环 -order: 12 ---- - -torus - -## tubeRadius - -**类型**：`number` - -**默认值**：`0.2` - -管道半径 - -## ringRadius - -**类型**：`number` - -**默认值**：`0.3` - -环半径 - -## segments - -**类型**：`number` - -**默认值**：`30` - -分段数 - -## sides - -**类型**：`number` - -**默认值**：`20` - -边数 diff --git a/packages/site/docs/common/ArrowStyle.en.md b/packages/site/docs/common/ArrowStyle.en.md deleted file mode 100644 index c9d68c71449..00000000000 --- a/packages/site/docs/common/ArrowStyle.en.md +++ /dev/null @@ -1,31 +0,0 @@ -
- -ArrowProps - -```typescript -type ArrowType = 'triangle' | 'circle' | 'diamond' | 'rect' | 'vee' | 'triangle-rect' | 'simple'; - -type ArrowStyle = StyleProps & { - type: ArrowType; - width: number; - height: number; - offset?: number; -}; -``` - -Basic graphic styles for arrows refer to [Path Graphic Style](../apis/shape/PathStyleProps.en.md). - -The available `ArrowType` options are as follows: - -| Type Name | Effect | -| ----------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `'simple'` | | -| | -| `'triangle'` | | -| `'circle'` | | -| `'diamond'` | | -| `'rect'` | | -| `'vee'` | | -| `'triangle-rect'` | | - -
diff --git a/packages/site/docs/common/ArrowStyle.zh.md b/packages/site/docs/common/ArrowStyle.zh.md deleted file mode 100644 index cd5641c96fa..00000000000 --- a/packages/site/docs/common/ArrowStyle.zh.md +++ /dev/null @@ -1,40 +0,0 @@ -
- -ArrowProps - -```typescript -type ArrowType = 'triangle' | 'circle' | 'diamond' | 'rect' | 'vee' | 'triangle-rect' | 'simple'; - -type ArrowStyle = PathStyleProps & { - type: ArrowType; - width: number; - height: number; - offset?: number; -}; - -type ArrowProps = { - /** - * 边的起始端箭头 - */ - startArrow?: boolean | ArrowStyle; - /** - * 边的结束端箭头 - */ - endArrow?: boolean | ArrowStyle; -}; -``` - -`ArrowType` 可选值如下： - -| 类型名称 | 效果 | -| ----------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `'simple'` | | -| | -| `'triangle'` | | -| `'circle'` | | -| `'diamond'` | | -| `'rect'` | | -| `'vee'` | | -| `'triangle-rect'` | | - -
diff --git a/packages/site/docs/common/BaseNodeOverrideMethod.en.md b/packages/site/docs/common/BaseNodeOverrideMethod.en.md deleted file mode 100644 index bf002622e60..00000000000 --- a/packages/site/docs/common/BaseNodeOverrideMethod.en.md +++ /dev/null @@ -1,260 +0,0 @@ -### draw - -:::info -In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section. -::: - -**Type**: `draw` - -
- -draw - -```typescript -type draw = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes. - -The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`. - -Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) method of the `circle-node` type node for overriding. - -### afterDraw - -**Type**: `afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: EdgeDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types. - -### drawKeyShape - -**Type**: `drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the main shape (`keyShape`), which is required. For example, the main shape of a circle node is a circle (`circle`), and the main shape of a rectangular node is a rectangle (`rect`). - -### drawLabelShape - -**Type**: `drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the text shape (`labelShape`) - -Refer to [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。 for overriding. - -### drawLabelBackgroundShape - -**Type**: `drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the background shape of the text shape (`labelBackgroundShape`) - -Refer to [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。 for overriding. - -### drawIconShape - -**Type**: `drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the icon shape of the text shape (`iconShape`) - -Refer to [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440) for overriding. - -### drawHaloShape - -**Type**: `drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states. - -Refer to [BaseNode.drawHaloShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L491) for overriding. - -### drawAnchorShapes - -**Type**: `drawAnchorShapes` - -
- -drawAnchorShapes - -```typescript -type drawAnchorShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the port shape (`anchorShapes`) - -Refer to [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531) for overriding. - -> ⚠️ Note: `drawAnchorShapes` returns a shape map, where the key is the id of the shape and the value is the shape object. - -### drawBadgeShapes - -**Type**: `drawBadgeShapes` - -
- -drawBadgeShapes - -```typescript -type drawBadgeShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw the badge shape (`badgeShapes`) - -Refer to [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629) for overriding. - -> ⚠️ Note: `drawBadgeShapes` returns a shape map, where the key is the id of the shape and the value is the shape object. - -### drawOtherShapes - -**Type**: `drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { [id: string]: DisplayObject }; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Draw shapes other than the above parts, which can be completed in `drawOtherShapes`, such as drawing an extra circle: - -> ⚠️ Note: `drawOtherShapes` returns a shape map, where the key is the id of the shape and the value is the shape object. - -### getMergedStyles - -**Type**: `getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; -``` - -For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md). - -
- -Merge style. diff --git a/packages/site/docs/common/BaseNodeOverrideMethod.zh.md b/packages/site/docs/common/BaseNodeOverrideMethod.zh.md deleted file mode 100644 index 8b13ec8ffac..00000000000 --- a/packages/site/docs/common/BaseNodeOverrideMethod.zh.md +++ /dev/null @@ -1,258 +0,0 @@ -### draw - -:::info{title=提示} -大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。 -::: - -**类型**：`draw` - -
- -draw - -```typescript -type draw = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, -) => { - keyShape: DisplayObject; - labelShape?: DisplayObject; - iconShape?: DisplayObject; - [otherShapeId: string]: DisplayObject; -}; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要覆写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。 - -draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制节点各部分。 - -你可以参考 `circle-node` 类型节点的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) 方法进行覆写。 - -### afterDraw - -**类型**：`afterDraw` - -
- -afterDraw - -```typescript -type afterDraw = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: { [shapeId: string]: DisplayObject }, - shapesChanged?: string[], -) => { [otherShapeId: string]: DisplayObject }; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制后执行其他绘图操作或添加自定义形状。在 `draw` 函数完成之后执行的逻辑，例如根据 `draw` 中已绘制的图形的包围盒大小，调整其他相关的图形。也可以用于绘制更多的图形，返回值和 `draw` 方法一致。 - -### drawKeyShape - -**类型**：`drawKeyShape` - -
- -drawKeyShape - -```typescript -type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制主图形(`keyShape`)，该图形是必须的，例如圆形节点的主图形是一个圆形(`circle`)，矩形节点的主图形是一个矩形(`rect`)。 - -### drawLabelShape - -**类型**：`drawLabelShape` - -
- -drawLabelShape - -```typescript -type drawLabelShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制文本图形（`labelShape`） - -若需要覆写，则可以参考 [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。 - -### drawLabelBackgroundShape - -**类型**：`drawLabelBackgroundShape` - -
- -drawLabelBackgroundShape - -```typescript -type drawLabelBackgroundShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制文本图形的背景框图形（`labelBackgroundShape`） - -若需要覆写，则可以参考 [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。 - -### drawIconShape - -**类型**：`drawIconShape` - -
- -drawIconShape - -```typescript -type drawIconShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制文本图形的图标图形（`iconShape`）的方法 - -若需要覆写，则可以参考 [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440) - -### drawHaloShape - -**类型**：`drawHaloShape` - -
- -drawHaloShape - -```typescript -type drawHaloShape = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制节点的光晕图形 - -### drawAnchorShapes - -**类型**：`drawAnchorShapes` - -
- -drawAnchorShapes - -```typescript -type drawAnchorShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制连接桩图形（`anchorShapes`）的方法 - -若需要覆写，则可以参考 [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531) - -> ⚠️ 注意：`drawAnchorShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。 - -### drawBadgeShapes - -**类型**：`drawBadgeShapes` - -
- -drawBadgeShapes - -```typescript -type drawBadgeShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { - [shapeId: string]: DisplayObject; -}; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制徽标图形（`badgeShapes`）的方法 - -若需要覆写，则可以参考 [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629) - -> ⚠️ 注意：`drawBadgeShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。 - -### drawOtherShapes - -**类型**：`drawOtherShapes` - -
- -drawOtherShapes - -```typescript -type drawOtherShapes = ( - model: NodeDisplayModel | ComboDisplayModel, - shapeMap: NodeShapeMap | ComboShapeMap, -) => { [id: string]: DisplayObject }; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -绘制上述部分之外的图形，可以在 `drawOtherShapes` 中完成 - -> ⚠️ 注意：`drawOtherShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。 - -### getMergedStyles - -**类型**：`getMergedStyles` - -
- -getMergedStyles - -```typescript -type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -将 display model 数据中定义的样式与默认样式和主题样式合并 diff --git a/packages/site/docs/common/BaseStyleProps.en.md b/packages/site/docs/common/BaseStyleProps.en.md deleted file mode 100644 index e1372539b89..00000000000 --- a/packages/site/docs/common/BaseStyleProps.en.md +++ /dev/null @@ -1,220 +0,0 @@ -## anchor - -**Type**: `string | number[]` - -**Default**: `[0, 0]` - -The origin (anchor) position of the graphic, based on the bounding box definition, ranging from `[0, 0]` to `[1, 1]`, where `[0, 0]` represents the top-left corner of the bounding box, and `[1, 1]` represents the bottom-right corner - -- Circle, Ellipse at the center position `[0.5, 0.5]` -- Rect, Image, Line, Polyline, Polygon, Path at the top-left vertex position of the bounding box `[0, 0]` -- Text at the text anchor position, should use the textBaseline and textAlign properties to set, so setting this property is invalid -- Group has no geometric definition, so setting this property is invalid - -## className - -**Type**: `string` - -**Default**: `''` - -The value of the class attribute of the element. Multiple classes are separated by spaces - -## clipPath - -**Type**: `DisplayObject` - -**Default**: `null` - -Use clipping to create the displayable area of the element, where the part inside the area is displayed, and the part outside is hidden - -## cursor - -**Type**: `string` - -**Default**: `'default'` - -The style of the pointer when hovering over the element, optional values refer to: [CSS cursor](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor)。 - -## fill - -**Type**: `string` - -**Default**: `'none'` - -The color used to fill the shape - -## fillOpacity - -**Type**: `number` - -**Default**: `1` - -The opacity of the shape's fill, with a value range of `[0, 1]` - -## fillRule - -**Type**: `'nonzero' | 'evenodd'` - -**Default**: `'nonzero'` - -The rule for filling the shape - -## filter - -**Type**: `string` - -**Default**: `'none'` - -Filters can process an already generated image, such as blurring, highlighting, increasing contrast, etc - -- `CSS Filter`：https://developer.mozilla.org/en-US/docs/Web/CSS/filter -- `Canvas Filter`：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter -- `SVG Filter`：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter -- In WebGL, it is generally called post-processing - -## lineCap - -**Type**: `'butt' | 'round' | 'square'` - -**Default**: `'butt'` - -The style of the endpoints of the shape's stroke - -- `'butt'` Default value. The end of the line segment ends in a square -- `'round'` The end of the line segment ends in a circle -- `'square'` The end of the line segment ends in a square, but adds a rectangle with the same width as the line segment and half the thickness of the line segment - -## lineDash - -**Type**: `number[]` - -**Default**: `[]` - -The dash style of the shape's stroke, with values in the array alternating between dash length and spacing - -## lineDashOffset - -**Type**: `number` - -**Default**: `0` - -The dash offset for the shape's stroke - -## lineJoin - -**Type**: `'miter' | 'round' | 'bevel'` - -**Default**: `'miter'` - -The style of the stroke's joints - -- `'miter'` Default value. By extending the outer edge of the connected part, it intersects at one point to form an additional rhombus area -- `'round'` By filling an additional sector with the center at the end of the connected part, the shape of the corner is drawn. The radius of the rounded corner is the width of the line segment -- `'bevel'` Fill an additional triangular area at the end of the connected part, and each part has its own independent rectangular corner - -## lineWidth - -**Type**: `number` - -**Default**: `1` - -The width of the shape's stroke - -## miterLimit - -**Type**: `number` - -**Default**: `10`(Canvas) `4`(SVG) - -When lineJoin is set to 'miter', this sets the miter limit ratio - -## opacity - -**Type**: `number` - -**Default**: `1` - -The opacity of the shape, with a value range of `[0, 1]` - -## pointerEvents - -**Type**: `'none' | 'auto' | 'stroke' | 'fill' | 'painted' | 'visible' | 'visiblestroke' | 'visiblefill' | 'visiblepainted' | 'all' | 'non-transparent-pixel'` - -**Default**: `'auto'` - -How the shape responds to interactive events, for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events - -## shadowBlur - -**Type**: `number` - -**Default**: `0` - -The level of blur for the shadow, with higher values indicating more blur - -## shadowColor - -**Type**: `string` - -**Default**: `'none'` - -The color of the shadow - -## shadowType - -**Type**: `'inner' | 'outer'` - -**Default**: `'outer'` - -The type of shadow - -- `'outer'` Outer shadow, the shadow is outside the shape's fill or stroke -- `'inner'` Inner shadow, the shadow is inside the shape - -## shadowOffsetX - -**Type**: `number` - -**Default**: `0` - -The offset of the shadow in the x-axis direction - -## shadowOffsetY - -**Type**: `number` - -**Default**: `0` - -The offset of the shadow in the y-axis direction - -## stroke - -**Type**: `string` - -**Default**: `'none'` - -The color of the shape's stroke - -## strokeOpacity - -**Type**: `number` - -**Default**: `1` - -The opacity of the shape's stroke, with a value range of `[0, 1]` - -## visibility - -**Type**: `'visible' | 'hidden'` - -**Default**: `'visible'` - -The visibility of the element - -## zIndex - -**Type**: `number` - -**Default**: `0` - -The z-index of the element, with higher values being closer to the top diff --git a/packages/site/docs/common/BaseStyleProps.zh.md b/packages/site/docs/common/BaseStyleProps.zh.md deleted file mode 100644 index e91fb431043..00000000000 --- a/packages/site/docs/common/BaseStyleProps.zh.md +++ /dev/null @@ -1,222 +0,0 @@ -## anchor - -**类型**：`string | number[]` - -**默认值**：`[0, 0]` - -图形的原点（锚点）位置，基于包围盒定义，取值范围 `[0, 0]` ~ `[1, 1]`，其中 `[0, 0]` 代表包围盒左上角，`[1, 1]` 代表右下角 - -不同图形的默认锚点如下，示例： - -- Circle，Ellipse 为圆心位置 `[0.5, 0.5]` -- Rect，Image，Line，Polyline，Polygon，Path 为包围盒左上角顶点位置 `[0, 0]` -- Text 为文本锚点位置，应该使用 textBaseline 与 textAlign 这两个属性设置，因此设置此属性无效 -- Group 无几何定义，因此设置此属性无效 - -## className - -**类型**：`string` - -**默认值**：`''` - -元素的 class 属性的值，多个 class 用空格分隔 - -## clipPath - -**类型**：`DisplayObject` - -**默认值**：`null` - -使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏 - -## cursor - -**类型**：`string` - -**默认值**：`'default'` - -指针悬停在元素上时的样式，可选值参考：[CSS cursor](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor) - -## fill - -**类型**：`string` - -**默认值**：`'none'` - -图形填充的颜色 - -## fillOpacity - -**类型**：`number` - -**默认值**：`1` - -图形填充的透明度，取值范围为 `[0, 1]` - -## fillRule - -**类型**：`'nonzero' | 'evenodd'` - -**默认值**：`'nonzero'` - -图形填充的规则 - -## filter - -**类型**：`string` - -**默认值**：`'none'` - -滤镜可以对已生成的图像进行一些处理，例如模糊、高亮、提升对比度等 - -- `CSS Filter`：https://developer.mozilla.org/en-US/docs/Web/CSS/filter -- `Canvas Filter`：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter -- `SVG Filter`：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter -- WebGL 中一般称作后处理 - -## lineCap - -**类型**：`'butt' | 'round' | 'square'` - -**默认值**：`'butt'` - -图形描边的端点样式 - -- `'butt'` 线段末端以方形结束 -- `'round'` 线段末端以圆形结束 -- `'square'` 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域 - -## lineDash - -**类型**：`number[]` - -**默认值**：`[]` - -图形描边的虚线样式，数组中的值依次为虚线长度，虚线间隔，虚线长度，虚线间隔，... - -## lineDashOffset - -**类型**：`number` - -**默认值**：`0` - -图形描边的虚线偏移量 - -## lineJoin - -**类型**：`'miter' | 'round' | 'bevel'` - -**默认值**：`'miter'` - -连接处样式 - -- `'miter'` 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域 -- `'round'` 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度 -- `'bevel'` 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角 - -## lineWidth - -**类型**：`number` - -**默认值**：`1` - -图形描边的宽度 - -## miterLimit - -**类型**：`number` - -**默认值**：`10`(Canvas) `4`(SVG) - -当 lineJoin 为 'miter' 时，设置斜接面限制比例 - -## opacity - -**类型**：`number` - -**默认值**：`1` - -图形的透明度，取值范围为 `[0, 1]` - -## pointerEvents - -**类型**：`'none' | 'auto' | 'stroke' | 'fill' | 'painted' | 'visible' | 'visiblestroke' | 'visiblefill' | 'visiblepainted' | 'all' | 'non-transparent-pixel'` - -**默认值**：`'auto'` - -设置图形如何响应交互事件，可参考：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events - -## shadowBlur - -**类型**：`number` - -**默认值**：`0` - -阴影的模糊级别，值越大越模糊 - -## shadowColor - -**类型**：`string` - -**默认值**：`'none'` - -阴影的颜色 - -## shadowType - -**类型**：`'inner' | 'outer'` - -**默认值**：`'outer'` - -阴影类型 - -- `'outer'` 外阴影，阴影在图形填充或者描边的外侧 -- `'inner'` 内阴影，阴影在图形内部 - -## shadowOffsetX - -**类型**：`number` - -**默认值**：`0` - -阴影在 x 轴方向的偏移量 - -## shadowOffsetY - -**类型**：`number` - -**默认值**：`0` - -阴影在 y 轴方向的偏移量 - -## stroke - -**类型**：`string` - -**默认值**：`'none'` - -图形描边的颜色 - -## strokeOpacity - -**类型**：`number` - -**默认值**：`1` - -图形描边的透明度，取值范围为 `[0, 1]` - -## visibility - -**类型**：`'visible' | 'hidden'` - -**默认值**：`'visible'` - -元素的可见性 - -## zIndex - -**类型**：`number` - -**默认值**：`0` - -元素的层级，值越大越靠上 diff --git a/packages/site/docs/common/BaseZoomCanvasOptions.en.md b/packages/site/docs/common/BaseZoomCanvasOptions.en.md deleted file mode 100644 index e17c91cd9d0..00000000000 --- a/packages/site/docs/common/BaseZoomCanvasOptions.en.md +++ /dev/null @@ -1,45 +0,0 @@ - - -## maxZoom - -**Type**: `number` - -**Default**: `1000` - -The max zoom - -## minZoom - -**Type**: `number` - -**Default**: `0.00001` - -The min zoom - - - -## sensitivity - -**Type**: `number` - -**Default**: `6` - -The sensitivity of zoom - - - -## trigger - -**Type**: `'wheel' | 'upDownKeys'` - -**Default**: `'wheel'` - -The way to trigger interaction - -## triggerOnItems - -**Type**: `boolean` - -**Default**: `true` - -Whether trigger zoom on node/edge/combo diff --git a/packages/site/docs/common/BaseZoomCanvasOptions.zh.md b/packages/site/docs/common/BaseZoomCanvasOptions.zh.md deleted file mode 100644 index 658dff52a39..00000000000 --- a/packages/site/docs/common/BaseZoomCanvasOptions.zh.md +++ /dev/null @@ -1,45 +0,0 @@ - - -## maxZoom - -**类型**：`number` - -**默认值**：`1000` - -最大缩放比例 - -## minZoom - -**类型**：`number` - -**默认值**：`0.00001` - -最小缩放比例 - - - -## sensitivity - -**类型**：`number` - -**默认值**：`6` - -缩放的灵敏度 - - - -## trigger - -**类型**：`'wheel' | 'upDownKeys'` - -**默认值**：`'wheel'` - -触发交互的方式 - -## triggerOnItems - -**类型**：`boolean` - -**默认值**：`true` - -是否在节点/边/Combo 上触发缩放 diff --git a/packages/site/docs/common/BehaviorBrushSelect.en.md b/packages/site/docs/common/BehaviorBrushSelect.en.md deleted file mode 100644 index 2f576392c19..00000000000 --- a/packages/site/docs/common/BehaviorBrushSelect.en.md +++ /dev/null @@ -1,82 +0,0 @@ -## style - -**Type**: - -```ts -type style = { - fill?: string; - stroke?: string; - fillOpacity?: number; - lineWidth?: number; - [key: string]: unknown; -}; -``` - -**Default**: - -```json -{ - "color": "#EEF6FF", - "fillOpacity": 0.4, - "stroke": "#DDEEFE", - "lineWidth": 1 -} -``` - -**Required**: false - -**Description**: The style of the selection area - -## onSelect - -**Type**: - -```ts -type onSelect = (states: { [key: ID]: string[] }) => { [key: ID]: string[] }; -``` - -**Required**: false - -**Description**: The callback function when deselected - -## state - -**Type**: `string` - -**Default**: `'selected' | 'active'` - -Switch to this state when highlighted - -## mode - -**Type**: `'union' | 'intersect' | 'diff' | 'default'` - -**Default**: `'default'` - -The mode of the select set - - - -## trigger - -**Type**: `'shift' | 'ctrl' | 'alt' | 'meta' | 'drag'` - -**Default**: `'shift'` - -The event type that triggers the interaction - -## immediately - -**Type**: `boolean` - -**Default**: `false` - -The event type that triggers the interaction - ---- - -```ts -type ID = string | number; - -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -``` diff --git a/packages/site/docs/common/BehaviorBrushSelect.zh.md b/packages/site/docs/common/BehaviorBrushSelect.zh.md deleted file mode 100644 index 465bef28b36..00000000000 --- a/packages/site/docs/common/BehaviorBrushSelect.zh.md +++ /dev/null @@ -1,82 +0,0 @@ -## style - -**类型**： - -```ts -type style = { - color?: string; - stroke?: string; - fillOpacity?: number; - lineWidth?: number; - [key: string]: unknown; -}; -``` - -**默认值**： - -```json -{ - "color": "#EEF6FF", - "fillOpacity": 0.4, - "stroke": "#DDEEFE", - "lineWidth": 1 -} -``` - -**是否必须**：false - -**说明**：选区样式 - -## onSelect - -**类型**： - -```ts -type onSelect = (states: { [key: ID]: string[] }) => { [key: ID]: string[] }; -``` - -**是否必须**：false - -**说明**：选中时的回调函数 - -## state - -**类型**：`string` - -**默认值**：`'selected' | 'active'` - -选中时切换到该状态 - -## mode - -**类型**：`'union' | 'intersect' | 'diff' | 'default'` - -**默认值**：`'default'` - -选区的选择模式 - - - -## trigger - -**类型**：`'shift' | 'ctrl' | 'alt' | 'meta' | 'drag'` - -**默认值**：`'shift'` - -触发交互的事件类型 - -## immediately - -**类型**：`boolean` - -**默认值**：`false` - -Real-time departure brush select. - ---- - -```ts -type ID = string | number; - -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -``` diff --git a/packages/site/docs/common/BehaviorDirection.en.md b/packages/site/docs/common/BehaviorDirection.en.md deleted file mode 100644 index 3bd3d331fcb..00000000000 --- a/packages/site/docs/common/BehaviorDirection.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## direction - -**Type**: `'both' | 'x' | 'y'` - -**Default**: `both` - -The direction of interaction \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorDirection.zh.md b/packages/site/docs/common/BehaviorDirection.zh.md deleted file mode 100644 index 9f456e04dc9..00000000000 --- a/packages/site/docs/common/BehaviorDirection.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## direction - -**类型**：`'both' | 'x' | 'y'` - -**默认值**：`both` - -交互方向 \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorDrag.en.md b/packages/site/docs/common/BehaviorDrag.en.md deleted file mode 100644 index a9cdd8de564..00000000000 --- a/packages/site/docs/common/BehaviorDrag.en.md +++ /dev/null @@ -1,78 +0,0 @@ -## delegateStyle - -**Type**: - -```ts -type delegateStyle = { - fill?: string; - stroke?: string; - lineWidth?: number; - lineDash?: number[]; - opacity?: number; -}; -``` - -**Default**: - -```json -{ - "fill": "#F3F9FF", - "fillOpacity": 0.5, - "stroke": "#1890FF", - "strokeOpacity": 0.9, - "lineDash": [5, 5] -} -``` - -**Required**: false - -**Description**: The style of the temporary rectangle - - - -## enableTransient - -**Type**: `boolean` - -**Default**: `true` - -Whether to render the interaction target to the transient layer - -## enableDelegate - -**Type**: `boolean` - -**Default**: `false` - -Whether to render a delegate rectangle shape when dragging - -enable delegate - -## hideRelatedEdges - -**Type**: `boolean` - -**Default**: `false` - -Whether to hide the related edges when dragging - -## selectedState - -**Type**: `string` - -**Default**: `selected` - -Switch to this state when dragging - - - -## updateComboStructure - -**Type**: `boolean` - -**Default**: `true` - -Whether to update the structure of the combo when dragging - - diff --git a/packages/site/docs/common/BehaviorDrag.zh.md b/packages/site/docs/common/BehaviorDrag.zh.md deleted file mode 100644 index 3fdf80128b1..00000000000 --- a/packages/site/docs/common/BehaviorDrag.zh.md +++ /dev/null @@ -1,78 +0,0 @@ -## delegateStyle - -**类型**： - -```ts -type delegateStyle = { - fill?: string; - stroke?: string; - lineWidth?: number; - lineDash?: number[]; - opacity?: number; -}; -``` - -**默认值**： - -```json -{ - "fill": "#F3F9FF", - "fillOpacity": 0.5, - "stroke": "#1890FF", - "strokeOpacity": 0.9, - "lineDash": [5, 5] -} -``` - -**是否必须**：false - -**说明**：临时矩形的样式 - - - -## enableTransient - -**类型**：`boolean` - -**默认值**：`true` - -是否允将交互目标渲染到临时层(Transient Layer) - -## enableDelegate - -**类型**：`boolean` - -**默认值**：`false` - -创建一个临时矩形来作为交互目标 - -enable delegate - -## hideRelatedEdges - -**类型**：`boolean` - -**默认值**：`false` - -是否隐藏与节点相关的边 - -## selectedState - -**类型**：`string` - -**默认值**：`selected` - -拖拽时切换到该状态 - - - -## updateComboStructure - -**类型**：`boolean` - -**默认值**：`true` - -拖拽过程中，是否更新 Combo 结构 - - diff --git a/packages/site/docs/common/BehaviorEnableOptimize.en.md b/packages/site/docs/common/BehaviorEnableOptimize.en.md deleted file mode 100644 index c561d038379..00000000000 --- a/packages/site/docs/common/BehaviorEnableOptimize.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## enableOptimize - -**Type**: `boolean` - -**Default**: `false` - -Whether enable optimize strategies, which will hide all the shapes excluding node keyShape \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorEnableOptimize.zh.md b/packages/site/docs/common/BehaviorEnableOptimize.zh.md deleted file mode 100644 index 20027e6a296..00000000000 --- a/packages/site/docs/common/BehaviorEnableOptimize.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## enableOptimize - -**类型**：`boolean` - -**默认值**：`false` - -是否启用优化策略，这将在交互过程中仅显示关键图形 diff --git a/packages/site/docs/common/BehaviorEventName.en.md b/packages/site/docs/common/BehaviorEventName.en.md deleted file mode 100644 index aef00011e81..00000000000 --- a/packages/site/docs/common/BehaviorEventName.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## eventName - -**Type**: `string` - -**Default**: `''` - -The event after interaction diff --git a/packages/site/docs/common/BehaviorEventName.zh.md b/packages/site/docs/common/BehaviorEventName.zh.md deleted file mode 100644 index a1acf795a1a..00000000000 --- a/packages/site/docs/common/BehaviorEventName.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## eventName - -**类型**：`string` - -**默认值**：`''` - -交互结束时触发的事件 diff --git a/packages/site/docs/common/BehaviorItemTypes.en.md b/packages/site/docs/common/BehaviorItemTypes.en.md deleted file mode 100644 index 0349e17c3cd..00000000000 --- a/packages/site/docs/common/BehaviorItemTypes.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## itemTypes - -**Type**: `('node'|'edge'|'combo')[]` - -**Default**: `['node', 'edge']` - -The types of elements allowed to be brush selected \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorItemTypes.zh.md b/packages/site/docs/common/BehaviorItemTypes.zh.md deleted file mode 100644 index be22e2ba2d2..00000000000 --- a/packages/site/docs/common/BehaviorItemTypes.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## itemTypes - -**类型**：`('node'|'edge'|'combo')[]` - -**默认值**：`['node', 'edge']` - -支持的元素类型 \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorMultiple.en.md b/packages/site/docs/common/BehaviorMultiple.en.md deleted file mode 100644 index 19c245788f8..00000000000 --- a/packages/site/docs/common/BehaviorMultiple.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## multiple - -**Type**: `boolean` - -**Default**: `true` - -Whether to allow multiple selection. If set to false, the `trigger` option will be ignored \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorMultiple.zh.md b/packages/site/docs/common/BehaviorMultiple.zh.md deleted file mode 100644 index aab8947e6c7..00000000000 --- a/packages/site/docs/common/BehaviorMultiple.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## multiple - -**类型**：`boolean` - -**默认值**：`true` - -是否允许多选。如果设置为 false，则 `trigger` 选项将被忽略 \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorScalableRange.en.md b/packages/site/docs/common/BehaviorScalableRange.en.md deleted file mode 100644 index 4751e5428a2..00000000000 --- a/packages/site/docs/common/BehaviorScalableRange.en.md +++ /dev/null @@ -1,13 +0,0 @@ -## scalableRange - -**Type**: `number | string` - -**Default**: `0` - -The range of the canvas that can be dragged - -- `0`: The canvas can be dragged infinitely -- `0~1`: The space occupied by the graph can exceed the viewport, but not the percentage of the value -- `{number}px`: The pixel value that can exceed the viewport - - \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorScalableRange.zh.md b/packages/site/docs/common/BehaviorScalableRange.zh.md deleted file mode 100644 index c1a4d83f4cd..00000000000 --- a/packages/site/docs/common/BehaviorScalableRange.zh.md +++ /dev/null @@ -1,13 +0,0 @@ -## scalableRange - -**类型**：`number | string` - -**默认值**：`0` - -交互时画布缩放的最大值 - -- `0`：画布可以无限拖拽 -- `0~1的数值`：图所占空间可以超出视口，但不能该值的百分比 -- `{number}px`：可以超出视口的像素值 - - \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorSecondaryKey.en.md b/packages/site/docs/common/BehaviorSecondaryKey.en.md deleted file mode 100644 index 09a941162c0..00000000000 --- a/packages/site/docs/common/BehaviorSecondaryKey.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## secondaryKey - -**Type**: `string` - -**Default**: `''` - -The secondary key \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorSecondaryKey.zh.md b/packages/site/docs/common/BehaviorSecondaryKey.zh.md deleted file mode 100644 index ca277268cab..00000000000 --- a/packages/site/docs/common/BehaviorSecondaryKey.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## secondaryKey - -**类型**：`string` - -**默认值**：`''` - -组合按键 \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorShould.en.md b/packages/site/docs/common/BehaviorShould.en.md deleted file mode 100644 index 3c8f127ca8b..00000000000 --- a/packages/site/docs/common/BehaviorShould.en.md +++ /dev/null @@ -1,13 +0,0 @@ - - -## shouldUpdate - -**Type**: `(event: IG6GraphEvent) => boolean;` - - - -**Default**: `() => true` - -**Required**: false - -Whether to allow the current node to update the interaction state. When false is returned, you need to manually listen for events and update the state diff --git a/packages/site/docs/common/BehaviorShould.zh.md b/packages/site/docs/common/BehaviorShould.zh.md deleted file mode 100644 index c60a9c8be6a..00000000000 --- a/packages/site/docs/common/BehaviorShould.zh.md +++ /dev/null @@ -1,11 +0,0 @@ - - -## shouldUpdate - -**类型**：`(event: IG6GraphEvent) => boolean;` - - - -**默认值**：`() => true` - -是否允许当前节点更新交互状态。返回 false 时，需要手动监听事件和更新状态 diff --git a/packages/site/docs/common/BehaviorShouldBegin.en.md b/packages/site/docs/common/BehaviorShouldBegin.en.md deleted file mode 100644 index 47a1cabae5b..00000000000 --- a/packages/site/docs/common/BehaviorShouldBegin.en.md +++ /dev/null @@ -1,11 +0,0 @@ -## shouldBegin - -**Type**: `(event: IG6GraphEvent) => boolean;` - - - -**Default**: `() => true` - -**Required**: false - -Whether to allow the current node to trigger the interaction diff --git a/packages/site/docs/common/BehaviorShouldBegin.zh.md b/packages/site/docs/common/BehaviorShouldBegin.zh.md deleted file mode 100644 index 5f58bc73fef..00000000000 --- a/packages/site/docs/common/BehaviorShouldBegin.zh.md +++ /dev/null @@ -1,9 +0,0 @@ -## shouldBegin - -**类型**：`(event: IG6GraphEvent) => boolean;` - - - -**默认值**：`() => true` - -是否允许当前节点触发交互 diff --git a/packages/site/docs/common/BehaviorSpeedUpKey.en.md b/packages/site/docs/common/BehaviorSpeedUpKey.en.md deleted file mode 100644 index 6dc3fa08956..00000000000 --- a/packages/site/docs/common/BehaviorSpeedUpKey.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## speedUpKey - -**Type**: `string` - -**Default**: `'shift'` - -The key to speed \ No newline at end of file diff --git a/packages/site/docs/common/BehaviorSpeedUpKey.zh.md b/packages/site/docs/common/BehaviorSpeedUpKey.zh.md deleted file mode 100644 index e0b66f50cb5..00000000000 --- a/packages/site/docs/common/BehaviorSpeedUpKey.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## speedUpKey - -**类型**：`string` - -**默认值**：`'shift'` - -加速按键 diff --git a/packages/site/docs/common/ComboShapeStyles.en.md b/packages/site/docs/common/ComboShapeStyles.en.md deleted file mode 100644 index 4dcda0e8323..00000000000 --- a/packages/site/docs/common/ComboShapeStyles.en.md +++ /dev/null @@ -1,233 +0,0 @@ -## labelShape - -**Type**: `LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo. - */ - position?: - | 'top' - | 'bottom' - | 'left' - | 'right' - | 'left-top' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - /** - * The offset of the text shape from the key shape (keyShape) in the x-direction. - */ - offsetX?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the y-direction. - */ - offsetY?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the z-direction. - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * The rotation angle of the text (in radians). - */ - angle?: number; -}; -``` - -The related shape style can be referred to as [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md)。 - -
- -**Default**: `object` - -
- -object - -```json -{ - "position": "bottom", - "maxWidth": "200%" -} -``` - -
- -The text shape of the Combo. - -## labelBackgroundShape - -**Type**: `LabelBackgroundShapeStyle` - -
- -LabelBackgroundShapeStyle - -```typescript -type LabelBackgroundShapeStyle = ShapeStyle & { - /** - * The padding distance between the text and the background rectangle in all directions - */ - padding?: number | number[]; -}; -``` - -The related shape style can be referred to as RectStyleProps [`RectStyleProps`](../shape/RectStyleProps.en.md). - -
- -**Default**: `undefined` - -The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape. - -## haloShape - -**Type**: `HaloShapeStyle` - -
- -HaloShapeStyle - -```typescript -type HaloShapeStyle = ShapeStyle; -``` - -`ShapeStyle`, where the type of haloShape follows the key shape (keyShape). The configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](../shape/CircleStyleProps.en.md)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](../shape/RectStyleProps.en.md)). - -
- -**Default**: `undefined` - -In the built-in Combo and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the Combo in the `active` state (usually triggered when the mouse hovers) and `selected` state (usually triggered when selected). In the logic of the built-in Combo, the type and color of the `haloShape` follow the key shape (`keyShape`). - -## badgeShapes - -**Type**: `BadgeShapesStyle` - -
- -BadgeShapesStyle - -```typescript -type IBadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; - -type BadgeShapesStyle = { - /** - * The background color of the badge (applies to all badges, lower priority than the color setting of individual badges below) - */ - color?: string; - /** - * The color palette of the badge background, which means that the badges below will automatically take colors from this palette. - * Lower priority than the color setting of individual badges below. - */ - palette?: string[]; - /** - * The text color of the badge (applies to all badges, lower priority than the textColor setting of individual badges below) - */ - textColor?: string; - /** - * The style configuration of individual badges, which overrides the above configurations. - */ - [key: number]: ShapeStyle & { - /** - * The position of the badge, supported values are described below - */ - position?: IBadgePosition; - /** - * The background color of the badge - */ - color?: string; - /** - * The text color of the badge - */ - textColor?: string; - }; -}; -``` - -
- -**Default**: `undefined` - -The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. `badgeShapes` configures multiple badges. - -## anchorShapes - -**Type**: `AnchorShapesStyle` - -
- -AnchorShapesStyle - -```typescript -/** - * The outer layer configures the style of all anchor shapes (circles), with lower priority than the individual anchor shape configurations. - */ -type AnchorShapesStyle = StyleProps & { - /** - * Individual anchor shape configurations, with higher priority than the outer CircleStyleProps. - */ - [key: number]: CircleStyleProps & { - /** - * The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape. - */ - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -The style of the anchor shapes can be referred to as [CircleStyleProps](../shape/CircleStyleProps.en.md). - -
- -**Default**: `undefined` - -The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes. - -## otherShapes - -**Type**: `OtherShapesStyle` - -
- -OtherShapesStyle - -```typescript -type OtherShapesStyle = { - /** - * The key is the shape id, in the format of xxShape. - * The value is the shape style configuration (which varies depending on the shape, see the relevant documentation for each shape), as well as the animation of the shape. - */ - [shapeId: string]: ShapeStyleProps; -}; -``` - -The style configurations for different shapes can be referred to in the corresponding documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory. - -
- -**Default**: `undefined` - -The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/ComboShapeStyles.zh.md b/packages/site/docs/common/ComboShapeStyles.zh.md deleted file mode 100644 index cd03fa2403c..00000000000 --- a/packages/site/docs/common/ComboShapeStyles.zh.md +++ /dev/null @@ -1,229 +0,0 @@ -## labelShape - -**类型**: `LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = TextStyleProps & { - /** - * 文本相对于 Combo 主图形 (keyShape) 的位置，可指定方位以及在 combo 的内部或外部 - */ - position?: - | 'top' - | 'bottom' - | 'left' - | 'right' - | 'left-top' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; -}; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "position": "bottom", - "maxWidth": "200%" -} -``` - -
- -Combo 的文本图形 - -## labelBackgroundShape - -**类型**: `LabelBackgroundShapeStyle` - -
- -LabelBackgroundShapeStyle - -```typescript -type LabelBackgroundShapeStyle = ShapeStyle & { - /** - * 文本距离背景矩形四周的留白距离 - */ - padding?: number | number[]; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -## haloShape - -**类型**: `HaloShapeStyle` - -
- -HaloShapeStyle - -```typescript -type HaloShapeStyle = ShapeStyle; -``` - -`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 - -## badgeShapes - -**类型**: `BadgeShapesStyle` - -
- -BadgeShapesStyle - -```typescript -type IBadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; - -type BadgeShapesStyle = { - /** - * 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置） - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置） - */ - textColor?: string; - /** - * 单个徽标的样式配置，由县局高于上面的配置 - */ - [key: number]: ShapeStyle & { - /** - * 该徽标的位置，支持的取值见下文 - */ - position?: IBadgePosition; - /** - * 该徽标的背景色 - */ - color?: string; - /** - * 该徽标的文本色 - */ - textColor?: string; - }; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。 - -## anchorShapes - -**类型**: `AnchorShapesStyle` - -
- -AnchorShapesStyle - -```typescript -/** - * 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 - */ -type AnchorShapesStyle = StyleProps & { - /** - * 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - */ - [key: number]: StyleProps & { - /** - * 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - */ - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 - -## otherShapes - -**类型**：`OtherShapeStyle` - -
- -OtherShapeStyle - -```typescript -type OtherShapeStyle = { - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -}; -``` - -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 - -
- -**默认值**：`undefined` - -上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/ComboUserModel.en.md b/packages/site/docs/common/ComboUserModel.en.md deleted file mode 100644 index 69eb9c9bfd9..00000000000 --- a/packages/site/docs/common/ComboUserModel.en.md +++ /dev/null @@ -1,31 +0,0 @@ -### type - -**Type**: `string` - -The rendering type of the combo, which can be a combo type registered on the graph class. The built-in and default registered types are `'circle-combo'` and `'rect-combo'`. The default is `'circle-combo'`. - -### visible - -**Type**: `boolean` - -Whether the combo is displayed by default. - -### color - -**Type**: `string` - -The theme color of the key shape (`keyShape`) of the combo, with a value in hexadecimal string format. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including keyShape and various shape styles. - -### label - -**Type**: `string` - -The text content of the `labelShape` of the combo. More style configurations should be configured in the Combo mapper of the graph instance, including the `text` value of `labelShape` or other shape styles. - - - -### parentId - -**Type**: `string | number` - -The ID of the parent combo to which the combo belongs. `undefined` means it is a root. diff --git a/packages/site/docs/common/ComboUserModel.zh.md b/packages/site/docs/common/ComboUserModel.zh.md deleted file mode 100644 index 7589303ef5b..00000000000 --- a/packages/site/docs/common/ComboUserModel.zh.md +++ /dev/null @@ -1,31 +0,0 @@ -### type - -**类型**： `string` - -Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。默认为 `'circle-combo'`。 - -### visible - -**类型**： `boolean` - -Combo 是否默认展示出来。 - -### color - -**类型**： `string` - -该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 - -### label - -**类型**： `string` - -Combo `labelShape` 的文本内容。更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 `labelShape` 的 `text` 值或其他图形样式。 - - - -### parentId - -**类型**： `string | number` - -在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。`undefined` 表示当前 Combo 是一个根。 diff --git a/packages/site/docs/common/DataAnchorShapes.en.md b/packages/site/docs/common/DataAnchorShapes.en.md deleted file mode 100644 index 8b01366c936..00000000000 --- a/packages/site/docs/common/DataAnchorShapes.en.md +++ /dev/null @@ -1,24 +0,0 @@ -### anchorShapes - -**Type**: `AnchorShapes` - -
- - AnchorShapes - - -```ts -type AnchorShapes = CircleStyleProps & { - // Individual anchor shape configurations, with higher priority than the outer CircleStyleProps. - [key: number]: CircleStyleProps & { - // The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape. - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -
- -- [CircleStyleProps](/en/apis/shape/circle-style-props) - -The shape of connecting ports diff --git a/packages/site/docs/common/DataAnchorShapes.zh.md b/packages/site/docs/common/DataAnchorShapes.zh.md deleted file mode 100644 index 6220223f0d2..00000000000 --- a/packages/site/docs/common/DataAnchorShapes.zh.md +++ /dev/null @@ -1,24 +0,0 @@ -### anchorShapes - -**类型**：`AnchorShapes` - -
- - AnchorShapes - - -```ts -type AnchorShapes = CircleStyleProps & { - // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - [key: number]: CircleStyleProps & { - // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -
- -- [CircleStyleProps](/apis/shape/circle-style-props) - -连接桩形状 diff --git a/packages/site/docs/common/DataAnimates.en.md b/packages/site/docs/common/DataAnimates.en.md deleted file mode 100644 index 87778f70f68..00000000000 --- a/packages/site/docs/common/DataAnimates.en.md +++ /dev/null @@ -1,7 +0,0 @@ -### animates - -**Type**: `IAnimates` - - - -Configuration of shape animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). diff --git a/packages/site/docs/common/DataAnimates.zh.md b/packages/site/docs/common/DataAnimates.zh.md deleted file mode 100644 index 5353179693e..00000000000 --- a/packages/site/docs/common/DataAnimates.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -### animates - -**类型**：`IAnimates` - - - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) diff --git a/packages/site/docs/common/DataAttrTips.en.md b/packages/site/docs/common/DataAttrTips.en.md deleted file mode 100644 index 8f35cbfdf48..00000000000 --- a/packages/site/docs/common/DataAttrTips.en.md +++ /dev/null @@ -1,3 +0,0 @@ -:::info -The following content is the sub-properties of `data` -::: diff --git a/packages/site/docs/common/DataAttrTips.zh.md b/packages/site/docs/common/DataAttrTips.zh.md deleted file mode 100644 index a752c8bb428..00000000000 --- a/packages/site/docs/common/DataAttrTips.zh.md +++ /dev/null @@ -1,3 +0,0 @@ -:::info{title=提示} -下方内容为 `data` 子属性 -::: \ No newline at end of file diff --git a/packages/site/docs/common/DataBadge.en.md b/packages/site/docs/common/DataBadge.en.md deleted file mode 100644 index 0e1137377fe..00000000000 --- a/packages/site/docs/common/DataBadge.en.md +++ /dev/null @@ -1,17 +0,0 @@ -
- - Badges - - -```ts -type Badge = { - position: BadgePosition; - type: 'text' | 'icon'; - img?: string; // required when type is 'text' - text?: string; // required when type is 'icon' -}; -``` - - - -
diff --git a/packages/site/docs/common/DataBadge.zh.md b/packages/site/docs/common/DataBadge.zh.md deleted file mode 100644 index d12ce17b890..00000000000 --- a/packages/site/docs/common/DataBadge.zh.md +++ /dev/null @@ -1,17 +0,0 @@ -
- - Badges - - -```ts -type Badge = { - position: BadgePosition; - type: 'text' | 'icon'; - img?: string; // type 为 'text' 时需要提供 - text?: string; // type 为 'icon' 时需要提供 -}; -``` - - - -
\ No newline at end of file diff --git a/packages/site/docs/common/DataBadgePosition.en.md b/packages/site/docs/common/DataBadgePosition.en.md deleted file mode 100644 index d2ccbc4f149..00000000000 --- a/packages/site/docs/common/DataBadgePosition.en.md +++ /dev/null @@ -1,15 +0,0 @@ -```ts -type BadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; -``` diff --git a/packages/site/docs/common/DataBadgePosition.zh.md b/packages/site/docs/common/DataBadgePosition.zh.md deleted file mode 100644 index d2ccbc4f149..00000000000 --- a/packages/site/docs/common/DataBadgePosition.zh.md +++ /dev/null @@ -1,15 +0,0 @@ -```ts -type BadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; -``` diff --git a/packages/site/docs/common/DataBadgeShapes.en.md b/packages/site/docs/common/DataBadgeShapes.en.md deleted file mode 100644 index 44737553f2b..00000000000 --- a/packages/site/docs/common/DataBadgeShapes.en.md +++ /dev/null @@ -1,34 +0,0 @@ -### badgeShapes - -**Type**: `BadgeShapes` - -
- - BadgeShapes - - -```ts -type BadgeShapes = { - /** The background color of the badge */ - color?: string; - /** The background color of the badge, which takes effect when color is not set */ - palette?: string[]; - /** The text color of the badge */ - textColor?: string; - /** The style configuration of a single badge, which has a higher priority than the above configuration */ - [key: number]: ShapeStyle & { - /** The position of this badge */ - position?: IBadgePosition; - /** The background color of this badge */ - color?: string; - /** The text color of this badge */ - textColor?: string; - }; -}; -``` - - - -
- -The badges in the four corners, the badgeShapes configuration is multiple badges. diff --git a/packages/site/docs/common/DataBadgeShapes.zh.md b/packages/site/docs/common/DataBadgeShapes.zh.md deleted file mode 100644 index effa7b3ffd0..00000000000 --- a/packages/site/docs/common/DataBadgeShapes.zh.md +++ /dev/null @@ -1,34 +0,0 @@ -### badgeShapes - -**类型**：`BadgeShapes` - -
- - BadgeShapes - - -```ts -type BadgeShapes = { - /** 徽标的背景颜色 */ - color?: string; - /** 徽标背景颜色的色板，未设置 color 时生效 */ - palette?: string[]; - /** 徽标上文本的颜色 */ - textColor?: string; - /** 单个徽标的样式配置，优先级高于上面的配置 */ - [key: number]: ShapeStyle & { - /** 该徽标的位置，支持的取值见下文 */ - position?: IBadgePosition; - /** 该徽标的背景色 */ - color?: string; - /** 该徽标的文本色 */ - textColor?: string; - }; -}; -``` - - - -
- -四周的徽标，badgeShapes 配置的是多个徽标。 diff --git a/packages/site/docs/common/DataBadges.en.md b/packages/site/docs/common/DataBadges.en.md deleted file mode 100644 index d3cb786b312..00000000000 --- a/packages/site/docs/common/DataBadges.en.md +++ /dev/null @@ -1,9 +0,0 @@ -### badges - -**Type**: `Badge[]` - - - -The configuration of the badges around the node - -> More style configurations should be done in the node mapper of the graph instance, where the shape styles of the badgeShapes are configured diff --git a/packages/site/docs/common/DataBadges.zh.md b/packages/site/docs/common/DataBadges.zh.md deleted file mode 100644 index 352b2013d55..00000000000 --- a/packages/site/docs/common/DataBadges.zh.md +++ /dev/null @@ -1,9 +0,0 @@ -### badges - -**类型**：`Badge[]` - - - -节点四周的徽标配置 - -> 更多的样式配置应当在 Graph 实例的节点 mapper 中配置 `badgeShapes` 的图形样式 diff --git a/packages/site/docs/common/DataHaloShape.en.md b/packages/site/docs/common/DataHaloShape.en.md deleted file mode 100644 index c103aecff35..00000000000 --- a/packages/site/docs/common/DataHaloShape.en.md +++ /dev/null @@ -1,9 +0,0 @@ -### haloShape - -**Type**: `ShapeStyleProps` - -- [ShapeStyleProps](/en/apis/shape/overview) - -The style configuration of the halo shape, the shape is the same as the main shape by default. - -> Usually, the halo effect is displayed around the key shape in the `active` and `selected` states. diff --git a/packages/site/docs/common/DataHaloShape.zh.md b/packages/site/docs/common/DataHaloShape.zh.md deleted file mode 100644 index 51dd3adf571..00000000000 --- a/packages/site/docs/common/DataHaloShape.zh.md +++ /dev/null @@ -1,9 +0,0 @@ -### haloShape - -**类型**：`ShapeStyleProps` - -- [ShapeStyleProps](/apis/shape/overview) - -光晕形状的样式配置，形状默认和主图形一致 - -> 通常在 `active` 和 `selected` 状态下，主图形周围会展示光晕效果。 diff --git a/packages/site/docs/common/DataID.en.md b/packages/site/docs/common/DataID.en.md deleted file mode 100644 index 9bf46425f3d..00000000000 --- a/packages/site/docs/common/DataID.en.md +++ /dev/null @@ -1,5 +0,0 @@ -## id Required - -**Type**: `string | number` - -The unique ID of the element. Once the element is created, the ID cannot be changed. diff --git a/packages/site/docs/common/DataID.zh.md b/packages/site/docs/common/DataID.zh.md deleted file mode 100644 index 80cadb6e3ca..00000000000 --- a/packages/site/docs/common/DataID.zh.md +++ /dev/null @@ -1,5 +0,0 @@ -## id 必须 - -**类型**：`string | number` - -元素的唯一 ID，元素创建后，ID 不可被修改。 diff --git a/packages/site/docs/common/DataIcon.en.md b/packages/site/docs/common/DataIcon.en.md deleted file mode 100644 index 9b3637a656a..00000000000 --- a/packages/site/docs/common/DataIcon.en.md +++ /dev/null @@ -1,22 +0,0 @@ -### icon - -**Type**: `Icon` - -
- - Icon - - -```ts -type Icon = { - type: 'text' | 'icon'; - img?: string; // Required when type is 'text' - text?: string; // Required when type is 'icon' -}; -``` - -
- -The configuration of the icon - -> More style configurations should be configured in the Combo mapper of the graph instance, including the shape style of the iconShape diff --git a/packages/site/docs/common/DataIcon.zh.md b/packages/site/docs/common/DataIcon.zh.md deleted file mode 100644 index 7b276ec737e..00000000000 --- a/packages/site/docs/common/DataIcon.zh.md +++ /dev/null @@ -1,22 +0,0 @@ -### icon - -**类型**：`Icon` - -
- - Icon - - -```ts -type Icon = { - type: 'text' | 'icon'; - img?: string; // type 为 'text' 时需要提供 - text?: string; // type 为 'icon' 时需要提供 -}; -``` - -
- -图标配置 - -> 更多的样式配置应当在 Graph 实例的 mapper 中配置 iconShape 的图形样式。 diff --git a/packages/site/docs/common/DataIconShape.en.md b/packages/site/docs/common/DataIconShape.en.md deleted file mode 100644 index b467e535857..00000000000 --- a/packages/site/docs/common/DataIconShape.en.md +++ /dev/null @@ -1,28 +0,0 @@ -### iconShape - -**Type**: `IconShape` - -
- - IconShape - - -```ts -type IconShape = Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -
- -- [TextStyleProps](/en/apis/shape/text-style-props) - -- [ImageStyleProps](/en/apis/shape/image-style-props) - -Icon Shape, can be an image or text, with text supporting [iconfont](/en/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataIconShape.zh.md b/packages/site/docs/common/DataIconShape.zh.md deleted file mode 100644 index c3747a6e6b5..00000000000 --- a/packages/site/docs/common/DataIconShape.zh.md +++ /dev/null @@ -1,28 +0,0 @@ -### iconShape - -**类型**：`IconShape` - -
- - IconShape - - -```ts -type IconShape = Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -
- -- [TextStyleProps](/apis/shape/text-style-props) - -- [ImageStyleProps](/apis/shape/image-style-props) - -图标图形，可以是图片或文本，文本支持 [iconfont](/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataInnerModelTips.en.md b/packages/site/docs/common/DataInnerModelTips.en.md deleted file mode 100644 index 0d427c36ce6..00000000000 --- a/packages/site/docs/common/DataInnerModelTips.en.md +++ /dev/null @@ -1,3 +0,0 @@ -:::info{title=TIPS} -This is the data you consume anywhere later. -::: \ No newline at end of file diff --git a/packages/site/docs/common/DataInnerModelTips.zh.md b/packages/site/docs/common/DataInnerModelTips.zh.md deleted file mode 100644 index 5d5113aa910..00000000000 --- a/packages/site/docs/common/DataInnerModelTips.zh.md +++ /dev/null @@ -1,3 +0,0 @@ -:::info{title=提示} -后续在任意地方使用的都是这一份数据 -::: diff --git a/packages/site/docs/common/DataLabelBackgroundShape.en.md b/packages/site/docs/common/DataLabelBackgroundShape.en.md deleted file mode 100644 index 075ab862e50..00000000000 --- a/packages/site/docs/common/DataLabelBackgroundShape.en.md +++ /dev/null @@ -1,21 +0,0 @@ -### labelBackgroundShape - -**Type**: `LabelBackgroundShape` - -
- - LabelBackgroundShape - - -```ts -type LabelBackgroundShape = RectStyleProps & { - /** Inner padding of the background */ - padding?: number | number[]; -}; -``` - -
- -- [RectStyleProps](/apis/shape/rect-style-props) - -The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape. diff --git a/packages/site/docs/common/DataLabelBackgroundShape.zh.md b/packages/site/docs/common/DataLabelBackgroundShape.zh.md deleted file mode 100644 index 3488f617f93..00000000000 --- a/packages/site/docs/common/DataLabelBackgroundShape.zh.md +++ /dev/null @@ -1,21 +0,0 @@ -### labelBackgroundShape - -**类型**：`LabelBackgroundShape` - -
- - LabelBackgroundShape - - -```ts -type LabelBackgroundShape = RectStyleProps & { - /** 背景内边距 */ - padding?: number | number[]; -}; -``` - -
- -- [RectStyleProps](/apis/shape/rect-style-props) - -文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 diff --git a/packages/site/docs/common/DataLabelShape.en.md b/packages/site/docs/common/DataLabelShape.en.md deleted file mode 100644 index d527d59df37..00000000000 --- a/packages/site/docs/common/DataLabelShape.en.md +++ /dev/null @@ -1,52 +0,0 @@ -### labelShape - -**类型**：`LabelShape` - -
- - LabelShape - - -```ts -type LabelShape = TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo. - */ - position?: - | 'top' - | 'bottom' - | 'left' - | 'right' - | 'left-top' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - /** - * The offset of the text shape from the key shape (keyShape) in the x-direction. - */ - offsetX?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the y-direction. - */ - offsetY?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the z-direction. - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * The rotation angle of the text (in radians). - */ - angle?: number; -}; -``` - -
- -- [TextStyleProps](en/apis/shape/text-style-props) - -The text shape of the Combo, supported by built-in Combo or custom Combo that inherits the built-in Combo (without overriding related content) diff --git a/packages/site/docs/common/DataLabelShape.zh.md b/packages/site/docs/common/DataLabelShape.zh.md deleted file mode 100644 index c8720ebe9d8..00000000000 --- a/packages/site/docs/common/DataLabelShape.zh.md +++ /dev/null @@ -1,52 +0,0 @@ -### labelShape - -**类型**：`LabelShape` - -
- - LabelShape - - -```ts -type LabelShape = TextStyleProps & { - /** - * 文本相对于主图形 (keyShape) 的位置，可指定方位以及在内部或外部 - */ - position?: - | 'top' - | 'bottom' - | 'left' - | 'right' - | 'left-top' - | 'outside-top' - | 'outside-left' - | 'outside-right' - | 'outside-bottom'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; - /** - * 文本旋转角度（弧度制） - */ - angle?: number; -}; -``` - -
- -- [TextStyleProps](/apis/shape/text-style-props) - -Combo 的文本图形，内置 Combo 或继承内置 Combo（未复写相关内容）的自定义 Combo 均支持 diff --git a/packages/site/docs/common/DataOtherShapes.en.md b/packages/site/docs/common/DataOtherShapes.en.md deleted file mode 100644 index bbf78488076..00000000000 --- a/packages/site/docs/common/DataOtherShapes.en.md +++ /dev/null @@ -1,21 +0,0 @@ -### otherShapes - -**Type**: `OtherShapes` - -
- - OtherShapes - - -```ts -type OtherShapes = { - // key is the shape id, with the format of xxShape - // value is the shape style configuration and animation configuration - [shapeId: string]: ShapeStyleProps; -} -``` -
- -- [ShapeStyle](/en/apis/shape/overview) - -Shapes that may exist in custom nodes but not in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/DataOtherShapes.zh.md b/packages/site/docs/common/DataOtherShapes.zh.md deleted file mode 100644 index b888176f7f2..00000000000 --- a/packages/site/docs/common/DataOtherShapes.zh.md +++ /dev/null @@ -1,21 +0,0 @@ -### otherShapes - -**类型**：`OtherShapes` - -
- - OtherShapes - - -```ts -type OtherShapes = { - // key 为图形 id，规范格式为 xxShape - // value 为图形样式、动画配置 - [shapeId: string]: ShapeStyleProps; -} -``` -
- -- [图形样式](/apis/shape/overview) - -不在 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeShapeStyles.en.md b/packages/site/docs/common/EdgeShapeStyles.en.md deleted file mode 100644 index 2dbbaf24eb4..00000000000 --- a/packages/site/docs/common/EdgeShapeStyles.en.md +++ /dev/null @@ -1,158 +0,0 @@ -## iconShape - -**Type**: `IconShapeType` - -
- -IconShapeType - -```typescript -type IconShapeType = Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` Image Shape Style](../shape/ImageStyleProps.en.md). - -
- -**Default**: `undefined` - -The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont. - -## haloShape - -**Type**: `HaloShapeStyle` - -
- -HaloShapeStyle - -`ShapeStyle`. The graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'line-edge'` is `'line'`, refer to [Line Graphic Style](../shape/LineStyleProps.en.md); the main graphic of `'cubic-edge'` is `'path'`, refer to [Path Graphic Style](../shape/PathStyleProps.en.md). - -
- -**Default**: `undefined` - -In built-in edges and themes, haloShape refers to the halo effect graphic displayed around the main graphic (keyShape) of the edge in active (usually triggered when the mouse hovers) and selected (usually triggered in the selected state) states. In the logic of built-in edges, the graphic type and color of haloShape follow the main graphic (keyShape). - -## labelShape - -**Type**: `LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the edge, supports above, below, left, right, and center - */ - position?: 'start' | 'middle' | 'end'; - /** - * The x offset of the text shape relative to the key shape (keyShape) - */ - offsetX?: number; - /** - * The y offset of the text shape relative to the key shape (keyShape) - */ - offsetY?: number; - /** - * The z offset of the text shape relative to the key shape (keyShape) - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. - * If specified as a number, it represents the pixel value. - * If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size. - * The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape. - * If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * Specifies whether the text rotates with the edge. - */ - autoRotate?: boolean; -}; -``` - -For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md). - -
- -**Default**: `object` - -
- -object - -```json -{ - "position": "middle", - "maxWidth": "200%" -} -``` - -
- -The text shape of the edge. - -## labelBackgroundShape - -The background shape of the text of the edge. - -**Type**: `LabelBackgroundShapeStyle` - -
- -LabelBackgroundShapeStyle - -```typescript -type LabelBackgroundShapeStyle = ShapeStyle & { - /** - * The padding distance between the text and the background rectangle - */ - padding?: number | number[]; -}; -``` - -The related rectangle style type can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md). - -
- -**Default**: `undefined` - -## otherShapes - -All the xxShape(s) above are the possible shapes that exist in the G6 defined standard edge. Other shapes in custom nodes should be defined and configured in `otherShapes`. - -**Type**: `OtherShapesStyle` - -
- -OtherShapesStyle - -```typescript -type OtherShapesStyle = { - /** - * key is the shape id, in the format of xxShape specified by the specification - */ - /** - * value is the shape style configuration (different shapes have different configurations, see the relevant shape documents), and the animation of the shape - */ - [shapeId: string]: ShapeStyleProps; -}; -``` - -The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory. - -
- -**Default**: `undefined` diff --git a/packages/site/docs/common/EdgeShapeStyles.zh.md b/packages/site/docs/common/EdgeShapeStyles.zh.md deleted file mode 100644 index 89dc03e0b32..00000000000 --- a/packages/site/docs/common/EdgeShapeStyles.zh.md +++ /dev/null @@ -1,164 +0,0 @@ -## iconShape - -**类型**：`IconShapeStyle` - -
- -IconShapeStyle - -```typescript -type IconShapeStyle = Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - /** - * 图标图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 图标图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - lod?: number; - } ->; -``` - -`iconShape` 根据不同的展示形式，图形样式配置项不同。例如图标为文本，支持 **iconfont**，参考 [Text 图形样式](../../shape/TextStyleProps.zh.md)；图标为图片。参考 [Image 图形样式](../../shape/ImageStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -边的图标图形，位于文本前方。 - -## haloShape - -**类型**: `HaloShapeStyle` - -
- -HaloShapeStyle - -说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [Line 图形样式](../shape/LineStyleProps.zh.md)；`'cubic-edge'` 的主图形是 `'path'` 参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 - -## labelShape - -**类型**：`LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = TextStyleProps & { - /** - * 文本相对于边主图形 (keyShape) 的位置，支持在边的起始处、中央、结束处。 - */ - position?: 'start' | 'middle' | 'end'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量。 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 文本是否跟随边旋转 - */ - autoRotate?: boolean; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值。 - * 若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。 - * 默认值为 `'200%'`，表示文本图形的最大宽度不可以超过主图形宽度的两倍。 - * 若超过，则自动截断并在末尾增加省略号 `'...'` - **/ - maxWidth?: string | number; -}; -``` - -
- -**默认值**：`object` - -
- -object - -```json -{ - "position": "middle", - "offsetX": 0, - "offsetY": 0, - "autoRotate": true, - "maxWidth": "200%" -} -``` - -
- -边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。 - -## labelBackgroundShape - -**类型**：`LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = RectStyleProps & { - /** - * 文本距离背景矩形四周的内边距区域 - */ - padding?: number | number[]; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -## otherShapes - -**类型**: `OtherShapesStyle` - -
- -OtherShapesStyle - -```typescript -type OtherShapesStyle = { - /** - * key 为图形 id，规范格式为 xxShape - */ - /** - * value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - */ - [shapeId: string]: ShapeStyleProps; -}; -``` - -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 - -
- -**默认值**：`undefined` - -上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeUserModel.en.md b/packages/site/docs/common/EdgeUserModel.en.md deleted file mode 100644 index 6eae196f96a..00000000000 --- a/packages/site/docs/common/EdgeUserModel.en.md +++ /dev/null @@ -1,37 +0,0 @@ -### type - -**Type**: `string` - -The rendering type of the edge, which can be a registered edge type on the graph, with the built-in and default registered types being `'line-edge'` and `'loop-edge'`. The default value is `'line-edge'`. - -### visible - -**Type**: `boolean` - -Whether the edge is displayed by default. - -### color - -**Type**: `string` - -The theme color of the main shape (keyShape) of the edge, with a value in hexadecimal string format. - -### label - -**Type**: `string` - -The text content of the `labelShape` of the edge. - - - -### sourceAnchor - -**Type**: `number` - -The `anchorPoints` on the source node indicate the allowed positions where related edges can connect, and is an array. The `sourceAnchor` of the edge indicates which anchor point to connect to when the edge connects to the starting point, corresponding to the index of the corresponding position in the `anchorPoints` of the source node. - -### targetAnchor - -**Type**: `number` - -The `anchorPoints` on the target node indicate the allowed positions where related edges can connect, and is an array. The `targetAnchor` of the edge indicates which anchor point to connect to when the edge connects to the ending point, corresponding to the index of the corresponding position in the `anchorPoints` of the target node. diff --git a/packages/site/docs/common/EdgeUserModel.zh.md b/packages/site/docs/common/EdgeUserModel.zh.md deleted file mode 100644 index 13abb921798..00000000000 --- a/packages/site/docs/common/EdgeUserModel.zh.md +++ /dev/null @@ -1,37 +0,0 @@ -### type - -**类型**：`string` - -边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。默认为 `'line-edge'`。 - -### visible - -**类型**：`boolean` - -边是否默认展示出来。 - -### color - -**类型**：`string` - -该边的主图形（keyShape）的主题色，值为十六进制字符串。 - -### label - -**类型**：`string` - -边 labelShape 的文本内容。 - - - -### sourceAnchor - -**类型**：`number` - -起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 - -### targetAnchor - -**类型**：`number` - -终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 diff --git a/packages/site/docs/common/IAnimates.en.md b/packages/site/docs/common/IAnimates.en.md deleted file mode 100644 index d981440c50e..00000000000 --- a/packages/site/docs/common/IAnimates.en.md +++ /dev/null @@ -1,42 +0,0 @@ -
- - IAnimates - - -```ts -interface IAnimates { - /** Animations when certain graphics are created in the combo */ - buildIn?: IAnimate[]; - /** Animations when certain graphics are destroyed in the combo */ - buildOut?: IAnimate[]; - /** Animations when certain graphics transition from hidden to visible in the combo */ - show?: IAnimate[]; - /** Animations when certain graphics transition from visible to hidden in the combo */ - hide?: IAnimate[]; - /** Animations when certain graphics undergo data or state updates in the combo */ - update?: (IAnimate | IStateAnimate)[]; -} - -interface IAnimate { - /** The names of the graphic style properties related to this animation, for example ['fill', 'lineWidth'] */ - fields?: string[]; - /** The ID of the graphic on which the animation needs to be performed. If not specified, it represents the animation on the entire graphic group */ - shapeId?: string; - /** The order in which this animation is executed among IAnimate[], allowing for sequential playback of multiple animations during one update. Default: 0 */ - order?: number; - /** The execution time (ms) of this animation, default: 500 */ - duration?: number; - /** The number of times this animation is executed, -1 means loop execution, default: 1 */ - iterations?: number; - /** The easing effect of this animation, default: cubic-bezier(0.250, 0.460, 0.450, 0.940) */ - /** See https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing */ - easing?: string; -} - -interface IStateAnimate extends IAnimate { - /** The animation is executed when these states change */ - states: string[]; -} -``` - -
diff --git a/packages/site/docs/common/IAnimates.zh.md b/packages/site/docs/common/IAnimates.zh.md deleted file mode 100644 index 9dd24de103e..00000000000 --- a/packages/site/docs/common/IAnimates.zh.md +++ /dev/null @@ -1,42 +0,0 @@ -
- - IAnimates - - -```ts -interface IAnimates { - /** Combo 中某些图形创建时的动画 */ - buildIn?: IAnimate[]; - /** Combo 中某些图形销毁时的动画 */ - buildOut?: IAnimate[]; - /** Combo 中某些图形从隐藏变为显示时的动画 */ - show?: IAnimate[]; - /** Combo 中某些图形从显示变为隐藏时的动画 */ - hide?: IAnimate[]; - /** Combo 中某些图形在相关数据或状态更新时的动画 */ - update?: (IAnimate | IStateAnimate)[]; -} - -interface IAnimate { - /** 该动画相关的图形样式属性名称，例如 ['fill', 'lineWidth'] */ - fields?: string[]; - /** 该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画 */ - shapeId?: string; - /** 该动画在 IAnimate[] 中执行的顺序，借此可实现一次更新多个动画的顺序播放，默认值：0 */ - order?: number; - /** 该动画的执行时间(ms)，默认值：500 */ - duration?: number; - /** 该动画执行的次数，-1 代表循环执行，默认值：1 */ - iterations?: number; - /** 该动画的缓动效果，默认值：cubic-bezier(0.250, 0.460, 0.450, 0.940) */ - /** 可参考 https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing */ - easing?: string; -} - -interface IStateAnimate extends IAnimate { - /** 该动画在这些状态变更的时候执行 */ - states: string[]; -} -``` - -
diff --git a/packages/site/docs/common/IG6GraphEvent.en.md b/packages/site/docs/common/IG6GraphEvent.en.md deleted file mode 100644 index 11048c3926f..00000000000 --- a/packages/site/docs/common/IG6GraphEvent.en.md +++ /dev/null @@ -1,26 +0,0 @@ -
- - IG6GraphEvent - - -```ts -type IG6GraphEvent = { - /** The event occurs on which type of element; `undefined` indicates it occurs on a blank part of the canvas */ - itemType: 'node' | 'edge' | 'combo' | 'canvas'; - /** The id of the element where the event occurs; if it occurs on a blank part of the canvas, then it's `undefined` */ - itemId: ID; - /** The graph where the event occurs */ - target: Shape; - /** In keyboard events, the key that is pressed or released key */ - key: string; - /** The drawing coordinates on the canvas at the time of the event */ - canvas: { x: number; y: number; z: number }; - /** The coordinates on the window DOM at the time of the event */ - viewport: { x: number; y: number; z: number }; - /** The coordinates on the browser at the time of the event */ - client: { x: number; y: number; z: number }; - /** Prevents the browser's default event from occurring */ - preventDefault: () => void; -}; -``` -
\ No newline at end of file diff --git a/packages/site/docs/common/IG6GraphEvent.zh.md b/packages/site/docs/common/IG6GraphEvent.zh.md deleted file mode 100644 index f1760325a7a..00000000000 --- a/packages/site/docs/common/IG6GraphEvent.zh.md +++ /dev/null @@ -1,26 +0,0 @@ -
- - IG6GraphEvent - - -```ts -type IG6GraphEvent = { - /** 事件发生在哪一类元素上，`undefined` 表示发生在画布空白处 */ - itemType: 'node' | 'edge' | 'combo' | 'canvas'; - /** 事件发生在的元素的 id，发生在画布空白处则为 `undefined` */ - itemId: ID; - /** 事件发生在的图形 */ - target: Shape; - /** 键盘事件中，被按下或抬起的键盘 key */ - key: string; - /** 事件发生时画布上的绘制坐标 */ - canvas: { x: number; y: number; z: number }; - /** 事件发生时视窗 DOM 上的坐标 */ - viewport: { x: number; y: number; z: number }; - /** 事件发生时浏览器上的坐标 */ - client: { x: number; y: number; z: number }; - /** 阻止浏览器默认事件 */ - preventDefault: () => void; -}; -``` -
diff --git a/packages/site/docs/common/IPluginBaseConfig.en.md b/packages/site/docs/common/IPluginBaseConfig.en.md deleted file mode 100644 index b3f21f1f473..00000000000 --- a/packages/site/docs/common/IPluginBaseConfig.en.md +++ /dev/null @@ -1,25 +0,0 @@ -### container - -**Type**: `string | HTMLElement | null` - -**Default**: `null` - -Container of the plugin - -> If not set, a default container will be assigned - -### className - -**Type**: `string` - -**Default**: `''` - -The class name of the plugin container - -### graph - -**Type**: `Graph` - -**Default**: Current graph instance - -The graph instance that the plugin belongs to diff --git a/packages/site/docs/common/IPluginBaseConfig.zh.md b/packages/site/docs/common/IPluginBaseConfig.zh.md deleted file mode 100644 index 21bb7ed3a49..00000000000 --- a/packages/site/docs/common/IPluginBaseConfig.zh.md +++ /dev/null @@ -1,25 +0,0 @@ -### container - -**类型**：`string | HTMLElement | null` - -**默认值**：`null` - -插件容器 - -> 如果不设置，则会分配一个默认的容器 - -### className - -**类型**：`string` - -**默认值**：`''` - -插件容器的类名 - -### graph - -**类型**：`Graph` - -**默认值**：当前图实例 - -插件所属的图实例 diff --git a/packages/site/docs/common/LayoutNodeSize.en.md b/packages/site/docs/common/LayoutNodeSize.en.md deleted file mode 100644 index 3884705efc8..00000000000 --- a/packages/site/docs/common/LayoutNodeSize.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## nodeSize - - - -**Default**: `undefined` - -The size (diameter) of the nodes. It is used to prevent node overlap collision. \ No newline at end of file diff --git a/packages/site/docs/common/LayoutNodeSize.zh.md b/packages/site/docs/common/LayoutNodeSize.zh.md deleted file mode 100644 index 9d21ea99bab..00000000000 --- a/packages/site/docs/common/LayoutNodeSize.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## nodeSize - - - -**默认值**：`undefined` - -节点大小（直径）。用于防止节点重叠时的碰撞检测 \ No newline at end of file diff --git a/packages/site/docs/common/LayoutPreventOverlap.en.md b/packages/site/docs/common/LayoutPreventOverlap.en.md deleted file mode 100644 index cfec39fc3d4..00000000000 --- a/packages/site/docs/common/LayoutPreventOverlap.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## preventOverlap - -**Type**: `boolean` - -**Default**: `false` - -Whether to prevent node overlap. It needs to be used together with the `nodeSize` property or the `data.size `property in node model. Node overlap collision detection can only be effectively performed when the `nodeSize` value is set to the same size as the current node or when the `data.size` property is set in the data. \ No newline at end of file diff --git a/packages/site/docs/common/LayoutPreventOverlap.zh.md b/packages/site/docs/common/LayoutPreventOverlap.zh.md deleted file mode 100644 index a1e1fc9c318..00000000000 --- a/packages/site/docs/common/LayoutPreventOverlap.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -## preventOverlap - -**类型**：`boolean` - -**默认值**：`false` - -是否防止重叠，必须配合下面属性 nodeSize 或节点数据中的 `data.size` 属性，只有在数据中设置了 `data.size` 或在该布局中配置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 \ No newline at end of file diff --git a/packages/site/docs/common/LayoutSizeOrSpacing.en.md b/packages/site/docs/common/LayoutSizeOrSpacing.en.md deleted file mode 100644 index 88ddd55da56..00000000000 --- a/packages/site/docs/common/LayoutSizeOrSpacing.en.md +++ /dev/null @@ -1 +0,0 @@ -**Type**: `number | number[] | (nodeModel: NodeModel) => number` diff --git a/packages/site/docs/common/LayoutSizeOrSpacing.zh.md b/packages/site/docs/common/LayoutSizeOrSpacing.zh.md deleted file mode 100644 index 95edd74c3dd..00000000000 --- a/packages/site/docs/common/LayoutSizeOrSpacing.zh.md +++ /dev/null @@ -1 +0,0 @@ -**类型**：`number | number[] | (nodeModel: NodeModel) => number` diff --git a/packages/site/docs/common/LayoutWorkerEnabled.en.md b/packages/site/docs/common/LayoutWorkerEnabled.en.md deleted file mode 100644 index 3867c81d214..00000000000 --- a/packages/site/docs/common/LayoutWorkerEnabled.en.md +++ /dev/null @@ -1,11 +0,0 @@ -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. - -:::warning -When `workerEnabled: true`, all parameter types of functions are not supported. -::: diff --git a/packages/site/docs/common/LayoutWorkerEnabled.zh.md b/packages/site/docs/common/LayoutWorkerEnabled.zh.md deleted file mode 100644 index 369aa0e13ae..00000000000 --- a/packages/site/docs/common/LayoutWorkerEnabled.zh.md +++ /dev/null @@ -1,11 +0,0 @@ -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 - -:::warning{title=注意} -`workerEnabled: true` 时，不支持所有函数类型的参数。 -::: diff --git a/packages/site/docs/common/LodLevels.en.md b/packages/site/docs/common/LodLevels.en.md deleted file mode 100644 index 899b161f406..00000000000 --- a/packages/site/docs/common/LodLevels.en.md +++ /dev/null @@ -1,27 +0,0 @@ -### lodLevels - -**Type**: `LodLevel[]` - -
- - LodLevel - - -```ts -type LodLevel = { - /** The zoom level range defined by this level, when the zoom level of the graph satisfies zoomRange[0] <= zoom < zoomRange[1], it means that it is under this level */ - zoomRange: [number, number]; - /** Is this the primary level */ - primary: boolean; -}; -``` - -
- -Specifies the zoom level divisions - -- The primary level has an ordinal of 0 -- `zoomRange` less than the current level, the ordinal decreases -- `zoomRange` greater than the current level, the ordinal increases - -> The ordinal is the value corresponding to `lod` in the following graph configuration diff --git a/packages/site/docs/common/LodLevels.zh.md b/packages/site/docs/common/LodLevels.zh.md deleted file mode 100644 index bb5df3857d9..00000000000 --- a/packages/site/docs/common/LodLevels.zh.md +++ /dev/null @@ -1,27 +0,0 @@ -### lodLevels - -**类型**：`LodLevel[]` - -
- - LodLevel - - -```ts -type LodLevel = { - /** 本层级所定义的图缩放等级范围，当图缩放等级满足 zoomRange[0] <= zoom < zoomRange[1] 时，表示在该层级下 */ - zoomRange: [number, number]; - /** 是否为主层级 */ - primary: boolean; -}; -``` - -
- -设定图缩放等级的划分方式 - -- 主层级序数为 0 -- `zoomRange` 小于当前层级的，序号递减 -- `zoomRange` 大于当前层级的，序号递增 - -> 序数为在下面的图形配置中 `lod` 所对应的值 diff --git a/packages/site/docs/common/Marker.en.md b/packages/site/docs/common/Marker.en.md deleted file mode 100644 index b9f710b053e..00000000000 --- a/packages/site/docs/common/Marker.en.md +++ /dev/null @@ -1,39 +0,0 @@ -## markerStart - -**Type**: `DisplayObject` - -**Default**: `null` - -Marker at the start point - -## markerMid - -**Type**: `DisplayObject` - -**Default**: `null` - -Marker at the middle point - -## markerEnd - -**Type**: `DisplayObject` - -**Default**: `null` - -Marker at the end point - -## markerStartOffset - -**Type**: `number` - -**Default**: `0` - -The offset of the start marker - -## markerEndOffset - -**Type**: `number` - -**Default**: `0` - -The offset of the end marker diff --git a/packages/site/docs/common/Marker.zh.md b/packages/site/docs/common/Marker.zh.md deleted file mode 100644 index c15ac32ad61..00000000000 --- a/packages/site/docs/common/Marker.zh.md +++ /dev/null @@ -1,39 +0,0 @@ -## markerStart - -**类型**：`DisplayObject` - -**默认值**：`null` - -起点标记图形 - -## markerMid - -**类型**：`DisplayObject` - -**默认值**：`null` - -中点标记图形 - -## markerEnd - -**类型**：`DisplayObject` - -**默认值**：`null` - -终点标记图形 - -## markerStartOffset - -**类型**：`number` - -**默认值**：`0` - -起点标记图形在直线上的偏移量 - -## markerEndOffset - -**类型**：`number` - -**默认值**：`0` - -终点标记图形在直线上的偏移量 diff --git a/packages/site/docs/common/NodeShapeStyles.en.md b/packages/site/docs/common/NodeShapeStyles.en.md deleted file mode 100644 index af44707df4b..00000000000 --- a/packages/site/docs/common/NodeShapeStyles.en.md +++ /dev/null @@ -1,249 +0,0 @@ -## iconShape - -**Type**: `IconShapeStyle` - -
- -IconShapeStyle - -```typescript -type IconShapeStyle = type Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` Image Shape Style](../shape/ImageStyleProps.en.md). - -
- -**Default**: `undefined` - -The icon graphic at the center of the node (except for the built-in node type `'modelRect-node'`, which is supported by other built-in nodes and custom nodes that inherit from them without overriding the relevant content). It can be an image or text, with text supporting iconfont (assign `fontFamily: 'iconfont'`). - -## haloShape - -**Type**: `HaloShapeStyle` - -
- -HaloShapeStyle - -The graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'circle-node'` is `'circle'`, refer to [Circle Shape Style](../shape/CircleStyleProps.en.md); the main graphic of `'image-node'` is `'image'`, refer to [Image Shape Style](../shape/ImageStyleProps.en.md). - -
- -**Default**: `undefined` - -In built-in nodes and themes, `haloShape` refers to the halo effect graphic displayed around the main graphic (keyShape) of a node when it is in the `active` state (usually triggered when the mouse hovers) or `selected` state (usually triggered when it is selected). In the logic of built-in nodes, the graphic type and color of `haloShape` follow the main graphic (`keyShape`). - -## labelShape - -**Type**: `LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; - /** - * The x offset of the text shape relative to the key shape (keyShape) - */ - offsetX?: number; - /** - * The y offset of the text shape relative to the key shape (keyShape) - */ - offsetY?: number; - /** - * The z offset of the text shape relative to the key shape (keyShape) - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. - * If specified as a number, it represents the pixel value. - * If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size. - * The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape. - * If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * The rotation angle of the text (in radians) - */ - angle?: number; -}; -``` - -For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md). - -
- -**Default**:`object` - -
- -object - -```json -{ - "position": "center", - "maxWidth": "200%" -} -``` - -
- -The text shape of the node. - -## labelBackgroundShape - -**Type**: `LabelBackgroundShapeStyle` - -
- -LabelBackgroundShapeStyle - -```typescript -type LabelBackgroundShapeStyle = ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle -}; -``` - -The related rectangle style type can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md). - -
- -**Default**: `undefined` - -The background shape of the text of the node. - -## badgeShapes - -**Type**: `BadgeShapesStyle` - -
- -BadgeShapesStyle - -```typescript -type IBadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; -type BadgeShapesStyle = { - /** - * The background color of the badge - * (works for all badges, lower priority than the color setting of individual badges) - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * The color palette for the badge background color, - * which means the individual badges below will automatically use the colors in the palette. - * Lower priority than the color setting of individual badges - */ - textColor?: string; - /** - * The text color of the badge (works for all badges, - * lower priority than the textColor setting of individual badges) - */ - [key: number]: ShapeStyle & { - /** - * The position of this badge, supporting the values below - */ - position?: IBadgePosition; - /** - * The background color of this badge - */ - color?: string; - /** - * The text color of this badge - */ - textColor?: string; - }; -}; -``` - -Graphic Style Reference refer to [Rect](../shape/RectStyleProps.en.md). - -
- -**Default**: `undefined` - -The badges around the node. A single badge includes text and background shape. The badgeShapes configuration is for multiple badges. [Node Badge Example](/en/examples/item/defaultNodes/#circle). - -## anchorShapes - -**类型**：`AnchorShapesStyle` - -
- -KeyShapeStyle - -```typescript -// The outer circleStyleProps can be used to configure the style of all anchor shapes (circles), -// with lower priority than the individual anchor shape configuration -type AnchorShapesStyle = CircleStyleProps & { - // Individual anchor shape configuration, - // with higher priority than the outer circleStyleProps - [key: number]: CircleStyleProps & { - // The position of this anchor shape, can be configured as a string or number array representing the percentage position relative to the key shape (keyShape) bounding box, - // for example, [0.5, 1] means it is located in the middle right of the key shape - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md). - -
- -**Default**: `undefined` - -The circular shapes (anchor shapes) of the edges entering each side of the node. The anchorShapes configuration is for multiple anchor shapes. [Node Anchor Example](/en/examples/item/defaultNodes/#circle). - -## otherShapes - -**Type**: `OtherShapesStyle` - -
- -KeyShapeStyle - -```typescript -type OtherShapesStyle = { - // key is the shape id, in the format of xxShape specified by the specification - // value is the shape style configuration (different shapes have different configurations, see the relevant shape documents), and the animation of the shape - [shapeId: string]: ShapeStyleProps; -}; -``` - -The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory. - -
- -**Default**: `undefined` - -All the xxShape(s) above are the possible shapes that exist in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/NodeShapeStyles.zh.md b/packages/site/docs/common/NodeShapeStyles.zh.md deleted file mode 100644 index 5daf754ce00..00000000000 --- a/packages/site/docs/common/NodeShapeStyles.zh.md +++ /dev/null @@ -1,256 +0,0 @@ -## labelShape - -**类型**：`LabelShapeStyle` - -
- -LabelShapeStyle - -```typescript -type LabelShapeStyle = StyleProps & { - /** - * 文本相对于节点主图形 (keyShape) 的位置，支持在主图形的上方、下方、左方、右方、中间 - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; - /** - * 文本旋转角度（弧度制） - */ - angle?: number; -}; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 - -
- -**默认值**：`object` - -
- -object - -```json -{ - "position": "center", - "maxWidth": "200%" -} -``` - -
- -节点的文本图形 - -## labelBackgroundShape - -**类型**：`LabelBackgroundShapeStyle` - -
- -LabelBackgroundShapeStyle - -```typescript -type LabelBackgroundShapeStyle = ShapeStyle & { - /** - * 文本距离背景矩形四周的留白距离 - */ - padding?: number | number[]; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**： undefined - -节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -## iconShape - -**类型**: `IconShapeStyle` - -
- -IconShapeStyle - -```typescript -type IconShapeStyle = Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)，和 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 - -## haloShape - -**类型**: `HaloShapeStyle` - -
- -HaloShapeStyle - -```typescript -type HaloShapeStyle = ShapeStyle; -``` - -说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'image-node'` 的主图形是 `'image'` 参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -
- -**默认值**：`undefined` - -在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 - -## badgeShapes - -**类型**：`BadgeShapesStyle` - -
- -BadgeShapesStyle - -```typescript -type IBadgePosition = - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomRight' - | 'bottom' - | 'bottomLeft' - | 'leftBottom' - | 'left' - | 'leftTop' - | 'topLeft' - | 'top' - | 'topRight'; - -type BadgeShapesStyle = { - /** - * 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置） - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置） - */ - textColor?: string; - /** - * 单个徽标的样式配置，由县局高于上面的配置 - */ - [key: number]: ShapeStyle & { - /** - * 该徽标的位置，支持的取值见下文 - */ - position?: IBadgePosition; - /** - * 该徽标的背景色 - */ - color?: string; - /** - * 该徽标的文本色 - */ - textColor?: string; - }; -}; -``` - -其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -
- -**默认值**： undefined - -节点四周的徽标，单个徽标包括了文本和背景图形，`badgeShapes` 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。 - -## anchorShapes - -**类型**：`AnchorShapesStyle` - -
- -AnchorShapesStyle - -```typescript -/** - * 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 - */ -type AnchorShapesStyle = StyleProps & { - /** - * 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - */ - [key: number]: StyleProps & { - /** - * 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - */ - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 - -
- -**默认值**： undefined - -节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。 - -## otherShapes - -**类型**：`OtherShapesStyle` - -
- -OtherShapesStyle - -```typescript -type OtherShapesStyle = { - /** - * key 为图形 id，规范格式为 xxShape - */ - /** - * value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - */ - [shapeId: string]: ShapeStyleProps; -}; -``` - -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 - -
- -**默认值**： undefined - -上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中 diff --git a/packages/site/docs/common/NodeUserModel.en.md b/packages/site/docs/common/NodeUserModel.en.md deleted file mode 100644 index 254c23bae40..00000000000 --- a/packages/site/docs/common/NodeUserModel.en.md +++ /dev/null @@ -1,69 +0,0 @@ -### type - -**Type**: `string` - -Type: string The rendering type of the node. It can be a node type that has been registered with the graph class. Built-in and default registered types include `'circle-node'`, `'rect-node'`, and `'image-node'`. - -### x - -**Type**: `number` - -Type: number The x-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -### y - -**Type**: `number` - -The y-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -### z - -**Type**: `number` - -For 2D graphs, there is no need to specify the z value. If it is specified, it may cause the node to be invisible under the WebGL renderer. In 3D graphs, the z value is required and represents the z-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -### visible - -**Type**: `boolean` - -Whether the node is displayed by default. - -### color - -**Type**: `string` - -The main color of the primary shape (keyShape) of the node, expressed as a hexadecimal string. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the keyShape and various shape styles are configured. - -### label - -**Type**: `string` - -The text content of the label shape of the node. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the text value of the labelShape or other shape styles are configured. - - - - - -### anchorPoints - -**Type**: `number[][]` - -The positions where the edges are connected to the node. If not configured, the edges will automatically find the nearest positions on the edge of the node for connection. For example, `[[0,0.5],[1,0.5]]`, where the numbers indicate the percentage position relative to the primary shape (keyShape) of the node in the x or y direction. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the shape styles of the anchorShapes are configured. - -### parentId - -**Type**: `string | number` - -In a graph with combos, it indicates the ID of the combo to which the node belongs. - -### isRoot - -**Type**: `boolean` - -If you want to display the data as a tree diagram and use tree layout at the same time, specify whether this node is one of the root nodes of the tree. - -### preventPolylineEdgeOverlap - -**Type**: `boolean` - -Whether to treat this node as an obstacle and make it avoid the `'polyline-edge'` type of edges. The default value is `false`. diff --git a/packages/site/docs/common/NodeUserModel.zh.md b/packages/site/docs/common/NodeUserModel.zh.md deleted file mode 100644 index 7bdad1d74aa..00000000000 --- a/packages/site/docs/common/NodeUserModel.zh.md +++ /dev/null @@ -1,69 +0,0 @@ -### type - -**类型**：`string` - -节点的渲染类型，可以是已经注册到图类上的节点类型，内置并默认注册的有 `'circle-node'`，`'rect-node'`，`'image-node'`。 - -### x - -**类型**：`number` - -节点的 x 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -### y - -**类型**：`number` - -节点的 y 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -### z - -**类型**：`number` - -对于 2D 的图，不需要指定 z 值。若指定可能导致 WebGL 渲染器下节点看不见。在 3D 图中，z 值是必须的，代表节点的 z 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -### visible - -**类型**：`boolean` - -节点是否默认展示出来。 - -### color - -**类型**：`string` - -该节点主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 keyShape 以及各种图形的图形样式。 - -### label - -**类型**：`string` - -节点 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 labelShape 的 text 值或其他图形样式。 - - - - - -### anchorPoints - -**类型**：`number[][]` - -该节点四周连接图形的位置，也是边连入的位置。若不配置，边则自动寻找节点边缘最近的位置进行连接。例如 `[[0,0.5],[1,0.5]]`，数字表示在 x 或 y 方向上相对于节点主图形（keyShape）的百分比位置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 anchorShapes 的图形样式。 - -### parentId - -**类型**：`string | number` - -在有 combo 的图上表示该节点所属的 combo 的 id。 - -### isRoot - -**类型**：`boolean` - -若要将该份数据作为树图展示，同时使用树图布局时，指定该节点是否为树的根节点之一。 - -### preventPolylineEdgeOverlap - -**类型**：`boolean` - -是否将该节点作为一个障碍物，使 `'polyline-edge'` 类型的边躲避。默认为 `false`。 diff --git a/packages/site/docs/common/PluginAPIDestroy.en.md b/packages/site/docs/common/PluginAPIDestroy.en.md deleted file mode 100644 index dc89be366eb..00000000000 --- a/packages/site/docs/common/PluginAPIDestroy.en.md +++ /dev/null @@ -1,5 +0,0 @@ -### destroy - -**Type**: `() => void;` - -**Description**: Destroy the plugin instance diff --git a/packages/site/docs/common/PluginAPIDestroy.zh.md b/packages/site/docs/common/PluginAPIDestroy.zh.md deleted file mode 100644 index e39ab6956a7..00000000000 --- a/packages/site/docs/common/PluginAPIDestroy.zh.md +++ /dev/null @@ -1,5 +0,0 @@ -### destroy - -**类型**：`() => void;` - -**说明**：销毁插件实例 diff --git a/packages/site/docs/common/PluginGetContent.en.md b/packages/site/docs/common/PluginGetContent.en.md deleted file mode 100644 index b505b6534f0..00000000000 --- a/packages/site/docs/common/PluginGetContent.en.md +++ /dev/null @@ -1,9 +0,0 @@ -### getContent - -**Type**: `(event?: IG6GraphEvent) => string | HTMLElement | Promise` - - - -**Default**: `() => '...'` - -The callback function to get the content of the item diff --git a/packages/site/docs/common/PluginGetContent.zh.md b/packages/site/docs/common/PluginGetContent.zh.md deleted file mode 100644 index 5c385d7f9b3..00000000000 --- a/packages/site/docs/common/PluginGetContent.zh.md +++ /dev/null @@ -1,9 +0,0 @@ -### getContent - -**类型**：`(event?: IG6GraphEvent) => string | HTMLElement | Promise` - - - -**默认值**：`() => '...'` - -获取内容的回调函数 diff --git a/packages/site/docs/common/PluginLensBase.en.md b/packages/site/docs/common/PluginLensBase.en.md deleted file mode 100644 index ef3029ed433..00000000000 --- a/packages/site/docs/common/PluginLensBase.en.md +++ /dev/null @@ -1,69 +0,0 @@ -### delegateStyle - -**Type**: `ShapeStyle` - -**Default**: - -```json -{ - "stroke": "#000", - "strokeOpacity": 0.8, - "lineWidth": 2, - "fillOpacity": 0.1, - "fill": "#ccc" -} -``` - -**Required**: false - -**Description**: The style of the lens area - -### maxR - -**Type**: `number` - -**Default**: `100` - -The maximum value of the radius of the lens - -### minR - -**Type**: `number` - -**Default**: `50` - -The minimum value of the radius of the lens - -### r - -**Type**: `number` - -**Default**: `300` - -The radius of the lens - -### scaleRBy - -**Type**: `'wheel' | 'drag' | 'unset'` - -**Default**: `'drag'` - -The way to scale the radius of the lens - -> In the lens, the radius of the lens is scaled by mouse wheel or drag - -### showLabel - -**Type**: `boolean` - -**Default**: `true` - -Whether to show the label of items in the lens - -### trigger - -**Type**: `'mousemove' | 'click' | 'drag'` - -**Default**: `'mousemove'` - -The way to trigger the interaction diff --git a/packages/site/docs/common/PluginLensBase.zh.md b/packages/site/docs/common/PluginLensBase.zh.md deleted file mode 100644 index 278c145c505..00000000000 --- a/packages/site/docs/common/PluginLensBase.zh.md +++ /dev/null @@ -1,57 +0,0 @@ -### delegateStyle - -**类型**：`ShapeStyle` - -**默认值**：`{}` - -区域样式 - -### maxR - -**类型**：`number` - -**默认值**：`100` - -透镜半径的最大值 - -### minR - -**类型**：`number` - -**默认值**：`50` - -透镜半径的最小值 - -### r - -**类型**：`number` - -**默认值**：`300` - -透镜半径 - -### scaleRBy - -**类型**：`'wheel' | 'drag' | 'unset'` - -**默认值**：`'drag'` - -透镜半径的缩放方式 - -> 即在透镜中通过鼠标滚轮或者拖拽来缩放透镜半径 - -### showLabel - -**类型**：`boolean` - -**默认值**：`true` - -是否展示透镜区域内对象的 label - -### trigger - -**类型**：`'mousemove' | 'click' | 'drag'` - -**默认值**：`'mousemove'` - -触发交互的方式 diff --git a/packages/site/docs/common/PluginLoadingContent.en.md b/packages/site/docs/common/PluginLoadingContent.en.md deleted file mode 100644 index 6bee01d3bfa..00000000000 --- a/packages/site/docs/common/PluginLoadingContent.en.md +++ /dev/null @@ -1,7 +0,0 @@ -### loadingContent - -**Type**: `string | HTMLElement` - -**Default**: `'
'` - -The content of the loading state \ No newline at end of file diff --git a/packages/site/docs/common/PluginLoadingContent.zh.md b/packages/site/docs/common/PluginLoadingContent.zh.md deleted file mode 100644 index 0405da0499d..00000000000 --- a/packages/site/docs/common/PluginLoadingContent.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -### loadingContent - -**类型**：`string | HTMLElement` - -**默认值**：`'
'` - -加载时的显示内容 diff --git a/packages/site/docs/common/PluginMergedStyles.en.md b/packages/site/docs/common/PluginMergedStyles.en.md deleted file mode 100644 index cad0b3f3ecf..00000000000 --- a/packages/site/docs/common/PluginMergedStyles.en.md +++ /dev/null @@ -1,30 +0,0 @@ -### mergedStyles - -**类型**：`MergedStyles` - -
- -MergedStyles - -```ts -type MergedStyles = { - /** Style of the main shape */ - keyShape: ShapeStyle; - /** Style of the halo of the main shape */ - halo: ShapeStyle; - /** Text style */ - label: ShapeStyle; - /** Text background style */ - labelBackground: ShapeStyle; - /** Text icon style */ - labelIcon: ShapeStyle; - /** Badge style */ - badge: ShapeStyle; - /** Port style */ - anchor: ShapeStyle; -}; -``` - -
- -Style which is merged from user configuration and default style. diff --git a/packages/site/docs/common/PluginMergedStyles.zh.md b/packages/site/docs/common/PluginMergedStyles.zh.md deleted file mode 100644 index 249d4197745..00000000000 --- a/packages/site/docs/common/PluginMergedStyles.zh.md +++ /dev/null @@ -1,30 +0,0 @@ -### mergedStyles - -**类型**：`MergedStyles` - -
- -MergedStyles - -```ts -type MergedStyles = { - /** 主图形的样式 */ - keyShape: ShapeStyle; - /** 主图形的 halo 样式 */ - halo: ShapeStyle; - /** 文本样式 */ - label: ShapeStyle; - /** 文本背景样式 */ - labelBackground: ShapeStyle; - /** 文本图标样式 */ - labelIcon: ShapeStyle; - /** 徽标样式 */ - badge: ShapeStyle; - /** 连接桩样式 */ - anchor: ShapeStyle; -}; -``` - -
- -由用户配置和默认样式合并得到的样式 diff --git a/packages/site/docs/common/PluginShouldBegin.en.md b/packages/site/docs/common/PluginShouldBegin.en.md deleted file mode 100644 index 68777cf5967..00000000000 --- a/packages/site/docs/common/PluginShouldBegin.en.md +++ /dev/null @@ -1,9 +0,0 @@ -### shouldBegin - -**Type**: `(event: IG6GraphEvent) => boolean;` - - - -**Default**: `() => true` - -Whether to allow the current node to trigger the interaction diff --git a/packages/site/docs/common/PluginShouldBegin.zh.md b/packages/site/docs/common/PluginShouldBegin.zh.md deleted file mode 100644 index a0c57f1c115..00000000000 --- a/packages/site/docs/common/PluginShouldBegin.zh.md +++ /dev/null @@ -1,9 +0,0 @@ -### shouldBegin - -**类型**：`(event: IG6GraphEvent) => boolean;` - - - -**默认值**：`() => true` - -是否允许当前节点触发交互 diff --git a/packages/site/docs/common/PluginSize.en.md b/packages/site/docs/common/PluginSize.en.md deleted file mode 100644 index ae87a3fd56f..00000000000 --- a/packages/site/docs/common/PluginSize.en.md +++ /dev/null @@ -1,15 +0,0 @@ -### width - -**Type**: `number` - -**Default**: `0` - -width - -### height - -**Type**: `number` - -**Default**: `0` - -height diff --git a/packages/site/docs/common/PluginSize.zh.md b/packages/site/docs/common/PluginSize.zh.md deleted file mode 100644 index f75a82ec99b..00000000000 --- a/packages/site/docs/common/PluginSize.zh.md +++ /dev/null @@ -1,15 +0,0 @@ -### width - -**类型**：`number` - -**默认值**：`0` - -宽度 - -### height - -**类型**：`number` - -**默认值**：`0` - -高度 diff --git a/packages/site/docs/common/PluginUpsertShape.en.md b/packages/site/docs/common/PluginUpsertShape.en.md deleted file mode 100644 index 7ee3cb0ec11..00000000000 --- a/packages/site/docs/common/PluginUpsertShape.en.md +++ /dev/null @@ -1,30 +0,0 @@ -### upsertShape - -**Type**: `upsertShape` - -
- -upsertShape - -```typescript -type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group'; - -type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane'; - -type upsertShape = ( - /** Shape type, in lowercase */ - shapeType: string, - /** Shape id */ - shapeId: string, - /** Shape style */ - style: object, - /** Shape map, key is the shape id, value is the shape object */ - shapeMap: NodeShapeMap | EdgeShapeMap, - /** rendering data */ - model: NodeDisplayModel | EdgeDisplayModel, -) => DisplayObject; -``` - -
- -Add a [shape](/apis/shape) if it does not exist, or update it if it exists. diff --git a/packages/site/docs/common/PluginUpsertShape.zh.md b/packages/site/docs/common/PluginUpsertShape.zh.md deleted file mode 100644 index c4e7627a9de..00000000000 --- a/packages/site/docs/common/PluginUpsertShape.zh.md +++ /dev/null @@ -1,33 +0,0 @@ -### upsertShape - -**类型**：`upsertShape` - -
- -upsertShape - -```typescript -type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group'; - -type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane'; - -type upsertShape = ( - /** 图形类型，小写形式 */ - type: SHAPE_TYPE | SHAPE_TYPE_3D, - /** 图形 id */ - id: string, - /** 图形样式 */ - style: object, - /** 图形 map，key 为图形 id，value 为图形对象 */ - shapeMap: NodeShapeMap | EdgeShapeMap, - /** 渲染数据 */ - model: NodeDisplayModel | EdgeDisplayModel, -) => /** 图形对象 */ -DisplayObject; -``` - -其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 - -
- -新增[图形](/apis/shape)，如果已存在则更新图形 diff --git a/packages/site/docs/common/Position.en.md b/packages/site/docs/common/Position.en.md deleted file mode 100644 index 51be45c60f0..00000000000 --- a/packages/site/docs/common/Position.en.md +++ /dev/null @@ -1,15 +0,0 @@ -## x - -**Type**: `number` - -**Default**: `0` - -x position - -## y - -**Type**: `number` - -**Default**: `0` - -y position diff --git a/packages/site/docs/common/Position.zh.md b/packages/site/docs/common/Position.zh.md deleted file mode 100644 index 13373ee8b6b..00000000000 --- a/packages/site/docs/common/Position.zh.md +++ /dev/null @@ -1,15 +0,0 @@ -## x - -**类型**：`number` - -**默认值**：`0` - -x 坐标 - -## y - -**类型**：`number` - -**默认值**：`0` - -y 坐标 diff --git a/packages/site/docs/common/ShapeStyleProps.en.md b/packages/site/docs/common/ShapeStyleProps.en.md deleted file mode 100644 index 10e8ed20776..00000000000 --- a/packages/site/docs/common/ShapeStyleProps.en.md +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/site/docs/common/ShapeStyleProps.zh.md b/packages/site/docs/common/ShapeStyleProps.zh.md deleted file mode 100644 index 1c249b8fd06..00000000000 --- a/packages/site/docs/common/ShapeStyleProps.zh.md +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/site/docs/common/Size.en.md b/packages/site/docs/common/Size.en.md deleted file mode 100644 index 755020cc9be..00000000000 --- a/packages/site/docs/common/Size.en.md +++ /dev/null @@ -1,15 +0,0 @@ -## width - -**Type**: `number` - -**Default**: `0` - -width - -## height - -**Type**: `number` - -**Default**: `0` - -height diff --git a/packages/site/docs/common/Size.zh.md b/packages/site/docs/common/Size.zh.md deleted file mode 100644 index 27c891b05fe..00000000000 --- a/packages/site/docs/common/Size.zh.md +++ /dev/null @@ -1,15 +0,0 @@ -## width - -**类型**：`number` - -**默认值**：`0` - -宽度 - -## height - -**类型**：`number` - -**默认值**：`0` - -高度 diff --git a/packages/site/docs/common/Throttle.en.md b/packages/site/docs/common/Throttle.en.md deleted file mode 100644 index 446e553debb..00000000000 --- a/packages/site/docs/common/Throttle.en.md +++ /dev/null @@ -1,7 +0,0 @@ -## throttle - -**Type**: `number` - -**Default**: `16` - -The throttle of the trigger frequency, in milliseconds diff --git a/packages/site/docs/common/Throttle.zh.md b/packages/site/docs/common/Throttle.zh.md deleted file mode 100644 index f68206b21fe..00000000000 --- a/packages/site/docs/common/Throttle.zh.md +++ /dev/null @@ -1,8 +0,0 @@ - -## throttle - -**类型**：`number` - -**默认值**：`16` - -触发频率限制，单位：毫秒 \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/comboTheory.en.md b/packages/site/docs/manual/advanced/comboTheory.en.md deleted file mode 100644 index 653701a9660..00000000000 --- a/packages/site/docs/manual/advanced/comboTheory.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Combo -order: 3 ---- - -Coming soon... diff --git a/packages/site/docs/manual/advanced/comboTheory.zh.md b/packages/site/docs/manual/advanced/comboTheory.zh.md deleted file mode 100644 index cd2f118d39b..00000000000 --- a/packages/site/docs/manual/advanced/comboTheory.zh.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Combo -order: 3 ---- - -建设中... \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/coordinate-system.en.md b/packages/site/docs/manual/advanced/coordinate-system.en.md deleted file mode 100644 index 77b78302bea..00000000000 --- a/packages/site/docs/manual/advanced/coordinate-system.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Coordinate Systems -order: 0 ---- - -Coming soon... \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/coordinate-system.zh.md b/packages/site/docs/manual/advanced/coordinate-system.zh.md deleted file mode 100644 index 2f3fc420919..00000000000 --- a/packages/site/docs/manual/advanced/coordinate-system.zh.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 坐标系 -order: 0 ---- - -建设中... diff --git a/packages/site/docs/manual/advanced/custom-animation.en.md b/packages/site/docs/manual/advanced/custom-animation.en.md new file mode 100644 index 00000000000..f02b8007e55 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-animation.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Animation +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-animation.zh.md b/packages/site/docs/manual/advanced/custom-animation.zh.md new file mode 100644 index 00000000000..06a707c4b8a --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-animation.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义动画 +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-behavior.en.md b/packages/site/docs/manual/advanced/custom-behavior.en.md new file mode 100644 index 00000000000..7cebc8eac3a --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-behavior.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Behavior +order: 2 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-behavior.zh.md b/packages/site/docs/manual/advanced/custom-behavior.zh.md new file mode 100644 index 00000000000..0950aefad59 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-behavior.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义交互 +order: 2 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-element.en.md b/packages/site/docs/manual/advanced/custom-element.en.md new file mode 100644 index 00000000000..71ce2b452b0 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-element.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Element +order: 0 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-element.zh.md b/packages/site/docs/manual/advanced/custom-element.zh.md new file mode 100644 index 00000000000..1cceac1eaed --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-element.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义元素 +order: 0 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-layout.en.md b/packages/site/docs/manual/advanced/custom-layout.en.md new file mode 100644 index 00000000000..40b6e2f83e6 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-layout.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Layout +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-layout.zh.md b/packages/site/docs/manual/advanced/custom-layout.zh.md new file mode 100644 index 00000000000..a52bd54339e --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-layout.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义布局 +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-palette.en.md b/packages/site/docs/manual/advanced/custom-palette.en.md new file mode 100644 index 00000000000..e478567aa1c --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-palette.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Palette +order: 6 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-palette.zh.md b/packages/site/docs/manual/advanced/custom-palette.zh.md new file mode 100644 index 00000000000..d1f31620e59 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-palette.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义色板 +order: 6 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-plugin.en.md b/packages/site/docs/manual/advanced/custom-plugin.en.md new file mode 100644 index 00000000000..a0d5711b37b --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-plugin.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Plugin +order: 3 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-plugin.zh.md b/packages/site/docs/manual/advanced/custom-plugin.zh.md new file mode 100644 index 00000000000..e2c300599a1 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-plugin.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义插件 +order: 3 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-theme.en.md b/packages/site/docs/manual/advanced/custom-theme.en.md new file mode 100644 index 00000000000..08ff66cfdbb --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-theme.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Theme +order: 4 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-theme.zh.md b/packages/site/docs/manual/advanced/custom-theme.zh.md new file mode 100644 index 00000000000..060ac8fd132 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-theme.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义主题 +order: 4 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-transform.en.md b/packages/site/docs/manual/advanced/custom-transform.en.md new file mode 100644 index 00000000000..9855e8eda79 --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-transform.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Data Transform +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/custom-transform.zh.md b/packages/site/docs/manual/advanced/custom-transform.zh.md new file mode 100644 index 00000000000..561f3d2e17e --- /dev/null +++ b/packages/site/docs/manual/advanced/custom-transform.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义数据转换 +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/event.en.md b/packages/site/docs/manual/advanced/event.en.md new file mode 100644 index 00000000000..c84a77bb25c --- /dev/null +++ b/packages/site/docs/manual/advanced/event.en.md @@ -0,0 +1,4 @@ +--- +title: Event +order: 8 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/event.zh.md b/packages/site/docs/manual/advanced/event.zh.md new file mode 100644 index 00000000000..fcdfde6fb8d --- /dev/null +++ b/packages/site/docs/manual/advanced/event.zh.md @@ -0,0 +1,4 @@ +--- +title: 事件 +order: 8 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/advanced/iconfont.en.md b/packages/site/docs/manual/advanced/iconfont.en.md deleted file mode 100644 index e5434046002..00000000000 --- a/packages/site/docs/manual/advanced/iconfont.en.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Use Iconfont -order: 10 ---- - -## Install - - - -Refer diff --git a/packages/site/docs/manual/advanced/iconfont.zh.md b/packages/site/docs/manual/advanced/iconfont.zh.md deleted file mode 100644 index 56c672ed697..00000000000 --- a/packages/site/docs/manual/advanced/iconfont.zh.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: 使用 Iconfont -order: 10 ---- - - - -## 引入 - -参考[帮助文档](https://www.iconfont.cn/help/detail?helptype=code) 中 **unicode 引用** 一项将 Iconfont 引入项目。 - -## 使用 - -创建文本图形过程中，将 `fontFamily` 设置为 `'iconfont'` 即可。例如： - -```ts -public drawLabelShape( - model: NodeDisplayModel, - shapeMap: NodeShapeMap, -): DisplayObject { - return this.upsertShape( - 'text', - 'labelShape', - { - text: '&#....;', // 图标代码 - fontFamily: 'iconfont' - }, - shapeMap, - model, - ); -} -``` diff --git a/packages/site/docs/manual/advanced/mode-and-custom-behavior.en.md b/packages/site/docs/manual/advanced/mode-and-custom-behavior.en.md deleted file mode 100644 index 8f94568d6c1..00000000000 --- a/packages/site/docs/manual/advanced/mode-and-custom-behavior.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Using multiple modes -order: 7 ---- - -Coming soon... diff --git a/packages/site/docs/manual/advanced/mode-and-custom-behavior.zh.md b/packages/site/docs/manual/advanced/mode-and-custom-behavior.zh.md deleted file mode 100644 index 578524042b5..00000000000 --- a/packages/site/docs/manual/advanced/mode-and-custom-behavior.zh.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 使用多种交互模式 -order: 7 ---- - -建设中... diff --git a/packages/site/docs/manual/advanced/remote-data.en.md b/packages/site/docs/manual/advanced/remote-data.en.md deleted file mode 100644 index 41a63bdd0bf..00000000000 --- a/packages/site/docs/manual/advanced/remote-data.en.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Remote Data Source ---- - -If your data is not local but on a remote server, you can handle it in the following two ways: - -## Method 1: Wait for the remote data to load before creating the graph instance - -```ts -import { Graph } from '@antv/g6'; - -async function init() { - const data = await fetch('data source url').then((res) => res.json()); - - const graph = new Graph({ - // ... Other configurations - data, - }); -} -``` - -## Method 2: Load remote data after the graph instance is created - -```ts -import { Graph } from '@antv/g6'; - -const graph = new Graph({ - // ... Other configurations -}); - -fetch('data source url') - .then((res) => res.json()) - .then((data) => { - // Load data - graph.read(data); - }); -``` diff --git a/packages/site/docs/manual/advanced/remote-data.zh.md b/packages/site/docs/manual/advanced/remote-data.zh.md deleted file mode 100644 index 5d0645ff53b..00000000000 --- a/packages/site/docs/manual/advanced/remote-data.zh.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 远程数据源 ---- - -如果你的数据不是在本地，而是在远程服务器上，你可以采取下列两种方式处理： - -## 方式一：等待远程数据加载完成后再创建图实例 - -```ts -import { Graph } from '@antv/g6'; - -async function init() { - const data = await fetch('data source url').then((res) => res.json()); - - const graph = new Graph({ - // ... 其他配置项 - data, - }); -} -``` - -## 方式二：在图实例创建完成后再加载远程数据 - -```ts -import { Graph } from '@antv/g6'; - -const graph = new Graph({ - // ... 其他配置项 -}); - -fetch('data source url') - .then((res) => res.json()) - .then((data) => { - // 加载数据 - graph.read(data); - }); -``` diff --git a/packages/site/docs/manual/cases/edgeBundling.en.md b/packages/site/docs/manual/cases/edgeBundling.en.md deleted file mode 100644 index 7af23af804f..00000000000 --- a/packages/site/docs/manual/cases/edgeBundling.en.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Edge Bundling -order: 2 ---- - -## Background - -Most graphs are visualized as node-link diagram, which is appropriate for traffic network with geographical information on nodes, e.g. migration graph and ariline network.
img img - -> (Left) Figure 1. The airlines of France. (Right) Figure 2. The airlines of United States. - - - - -> (Left) Figure 3. The world IXP peering network. (Right) Figure 4. The American immigration network. - -## Problem - -Though the node-link diagram is intuitive, the severe visual clutter problem still exists when the graph has large amount of data. The visual clutter of the node-link diagram mostly moes from the edge crossings and congestion. As shown in Figure 1~4, in the traffic networks, the positions of the node often have well-defined geographical meanings, which means the node positions are usually non-editable for reducing the visual clutter. Lots of research works focus on the methods to improve the visual clustter on edges, where the Edge Bundling is a widely used way to achieve it. The researches about edge bundlings are summarized 「HERE」. - -Here goes a example with complicated American flights data, where the nodes represent the cities with latitute and longitute; the edges represent the flights: - -```json -{ - "nodes": [ - { - "x": -922.24444, - "y": 347.29444, - "id": "0", - "lon": -92.224444, - "lat": 34.729444 - }, - { - "x": -922.24444, - "y": 347.29444, - "id": "1", - "lon": -92.224444, - "lat": 34.729444 - } - // ... Other nodes - ], - "edges": [ - { - "source": "0", - "target": "21", - "id": "e0" - }, - { - "source": "2", - "target": "13", - "id": "e1" - } - // ... Other edges - ] -} -``` - -Render the nodes and edges by G6 directly, we will obtain the result:
img - -> Figure 5. Render the source data by G6. - -Figure 5 shows the result with chaotic crossings which is hard for users to figure out the details and global trends. - -## Expected Effect - -We wish to improve the visual clutter of Figure 5 by edge bundling to show the global trends and structures and highlight the important cities with many flights. These cities might be the important traffic pivots. We also try to illustrate some statistical informations for analysis. Powered by G6, we are able to achive the result with: Bundling the edges, Mapping the edge directions to gradient colors(departure-orange, arrival-cyan) of the edge; Mapping the total number of flights about the cities to the size of the node; Adding interactions of hover; Utilizing the tooltip to show the longitute and latitute. - -
-img - -> The expected effect and the tooltip. - -## Implement Steps - -### Statistics Information - -First, we count the total degrees of each node based on the data by simple JavaScript code. The `degree` of a node indicates the total number of the flights arriving and leaving the city; The `outDegree` indicates the leaving flights; The `inDegree` indicates the arriving flights. - -```javascript -const nodes = data.nodes; -const edges = data.edges; -nodes.forEach((n) => { - n.y = -n.y; - n.degree = 0; - n.inDegree = 0; - n.outDegree = 0; -}); -// Compute the degree of each node -const nodeIdMap = new Map(); -nodes.forEach((node) => { - nodeIdMap.set(node.id, node); -}); -edges.forEach((e) => { - const source = nodeIdMap.get(e.source); - const target = nodeIdMap.get(e.target); - source.outDegree++; - target.inDegree++; - source.degree++; - target.degree++; -}); -let maxDegree = -9999, - minDegree = 9999; -nodes.forEach((n) => { - if (maxDegree < n.degree) maxDegree = n.degree; - if (minDegree > n.degree) minDegree = n.degree; -}); -const sizeRange = [1, 20]; -const degreeDataRange = [minDegree, maxDegree]; -// The range of the degree is degreeDataRange, now we map it onto sizeRange and write the 'size' into node data. -scaleNodeProp(nodes, 'size', 'degree', degreeDataRange, sizeRange); -``` - -`scaleNodeProp()` maps the node property `refPropName` to another property `propName` with the range `outRange`: - -```javascript -/** - * Mapping properties - * @param {array} nodes The array of nodes - * @param {string} propName The name of the property to be writed - * @param {string} refPropName The name of the property to be normalized - * @param {array} dataRange The range of the property to be normalized, [min, max] - * @param {array} outRange The arange of the property to be writed, [min, max] - */ -function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) { - const outLength = outRange[1] - outRange[0]; - const dataLength = dataRange[1] - dataRange[0]; - nodes.forEach((n) => { - n[propName] = ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0]; - }); -} -``` - -Now, we have normalized the degrees onto the `size`s of nodes. - -### Instantiate the Bundling Plugin - -The edge bunlding technique in G6 is implemented according to the paper FEDB (Force-Directed Edge Bundling for Graph Visualization). By tuning the configurations, you can adjust the bundling result easily. - -```javascript -const edgeBundling = new Bundling({ - bundleThreshold: 0.6, // The tolerance of bundling. Lower number, the higher similarity of the bundled edges is required, the smaller number of edges to be bundled together. - K: 100, // The strength of the bundling -}); -``` - -### Custom Pie Node - -In the first step, we have mapped the degrees of nodes onto their size. To demonstrate the ratio of leaving and arriving flights, we design a pie-chart node for each city. For example, img, the orange fan represents the number of arriving flights, and the cyan fan represents the number of leaving flights. The built-in nodes in G6 do not meet such requirement. Thus, we now register a custom node by the custom mechanism of G6: - -```javascript -const lightBlue = 'rgb(119, 243, 252)'; -const lightOrange = 'rgb(230, 100, 64)'; - -// Register a type of custom node named pie-node -G6.registerNode( - 'pie-node', - { - drawShape: (cfg, group) => { - const radius = cfg.size / 2; // The radius the of node - const inPercentage = cfg.inDegree / cfg.degree; // The percentage of the inDegree - const inAngle = inPercentage * Math.PI * 2; // The angle of the fan of inDegree - const outAngle = Math.PI * 2 - inAngle; // The angle of the fan of outDegree - const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; // The end point of the inDegree fan - let isInBigArc = 1, - isOutBigArc = 0; - if (inAngle > Math.PI) { - isInBigArc = 0; - isOutBigArc = 1; - } - // The inDegree fan - const fanIn = group.addShape('path', { - attrs: { - path: [ - ['M', radius, 0], - ['A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1]], - ['L', 0, 0], - ['B'], - ], - lineWidth: 0, - fill: lightOrange, - }, - // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type - name: 'in-fan-shape', - }); - // The outDegree fan - const fanOut = group.addShape('path', { - attrs: { - path: [ - ['M', inArcEnd[0], inArcEnd[1]], - ['A', radius, radius, 0, isOutBigArc, 0, radius, 0], - ['L', 0, 0], - ['B'], - ], - lineWidth: 0, - fill: lightBlue, - }, - // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type - name: 'out-fan-shape', - }); - // return the keyshape - return fanIn; - }, - }, - 'single-node', -); -``` - -The code above registers a 'pie-node' type node. - -### Instantiate the Graph - -Now, we are going to register a graph and assign the Edge Bundling plugin, node type ('pie-node'), and item styles for it. - -```javascript -const edgeBundling = new Bundling({ - bundleThreshold: 0.6, // The tolerance of bundling. Lower number, the higher similarity of the bundled edges is required, the smaller number of edges to be bundled together. - K: 100, // The strength of the bundling -}); -const graph = new Graph({ - container: 'mountNode', - width: 1000, - height: 800, - plugins: [edgeBundling], // Add the plugin - fitView: true, - defaultNode: { - size: 3, - color: 'steelblue', - fill: 'steelblue', - }, - nodeStyle: { - default: { - lineWidth: 0, - fill: 'steelblue', - }, - }, - edgeStyle: { - default: { - lineWidth: 0.7, - strokeOpacity: 0.1, // The opacity of the edge. The transparency of the gathered edges will be superimposed, which has the effect of highlighting high-density areas - stroke: 'l(0) 0:' + llightBlue16 + ' 1:' + llightOrange16, - }, - }, -}); -``` - -The edge begin with `llightBlue16` color and end with `llightOrange16` color: - -```javascript -const llightBlue16 = '#C8FDFC'; -const llightOrange16 = '#FFAA86'; -``` - -Set the background of the body to be black to reach a better visual effect: - -```html - -``` - -### Execute the Bundling and Render - -The Graph and the Edge Bundling Plugin have been instantiated to `graph` and `edgeBundling`. The following code executes the bundling and load the data, render the graph: - -```javascript -edgeBundling.bundling(data); // Execute the bundling -graph.data(data); -graph.render(); -``` - -#### Configure Tooltip and Interactions - -Tooltip shows the detail information when the mouse hovers on a node. We first configure the style for the tooltip in HTML: - -```html - -``` - -Then, we add a configuration `modes` onto the graph in the code about instantiating the Graph. As shown below, the `drag-canvas`, `zoom-canvas`, and `tooltip` are activated. The content of the `tooltip` is defined in `formatText`: - -```javascript - modes: { - default: [ 'drag-canvas', 'zoom-canvas', { - type: 'tooltip', - formatText(model) { - const text = 'Longitude: ' + model.lon + '\n Latitude: ' + model.lat; - return text; - }, - shouldUpdate: e => { - return true; - } - }] - } -``` - -After these configurations, the `tooltip` with longitude and latitude will show up when mouse hovers a node:
img - -> tooltip - -In the same time, the canvas is draggable and zoomable:
img - -> Drag and zoom the canvas - -## Analysis - -img - -> The final result. The size of the node indicates the total flights about the city. The pie node indicates the ratio of leaving flights and arriving flights (orange for arriving, cyan for leaving). The gradient color of an edge indicates its direction (cyan for start, orange for end). - -Now, let's analyze the final result: - -- Large nodes are mainly concentrated in the east-central region. According to the positions, It can be speculated that these cities are: Atlanta, New York, Chicago, Houston, Kansas, etc. All these cities are important transportation hubs in the United States; -- There are lots of orange edges in the east American, which means there are more arriving flights in east American; -- In contrast, there are more leaving flights from western cities; -- Flight directions are start from east and end in west overall; -- The eastern flights are also denser and more frequent than the western ones; -- There are more flights on the west coast from Seattle and Portland to Los Angeles. - -The above findings can be easily explained: The eastern United States is the economic and political concentration region of the United States. diff --git a/packages/site/docs/manual/cases/edgeBundling.zh.md b/packages/site/docs/manual/cases/edgeBundling.zh.md deleted file mode 100644 index 4dc62a50003..00000000000 --- a/packages/site/docs/manual/cases/edgeBundling.zh.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Edge Bundling -order: 2 ---- - -## 背景 - -大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。
img img - -> （左）图 1. 法国航线图。（右）图 2. 美国航线图。 - -img -img - -> （左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。 - -## 问题 - -虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱（Visual Clutter）很快成为严重的问题。点-线图中的视觉混乱通常是边缘拥塞的直接结果，而在如交通网络一类数据中，节点位置通常具有明确定义的含义，并不总是可以修改节点位置以减少视觉混乱，如图 1 ～ 4 四个例子。因此，学术界诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中边绑定（Edge Bundling）方法被广泛研究和应用。各种边绑定的方法总结在「链接」。 - -例如下面这一个复杂的美国航线数据集，节点代表美国城市，带有坐标和经纬度信息；一条边代表一条航线： - -```json -{ - "nodes": [ - { - "x": -922.24444, - "y": 347.29444, - "id": "0", - "lon": -92.224444, - "lat": 34.729444 - }, - { - "x": -922.24444, - "y": 347.29444, - "id": "1", - "lon": -92.224444, - "lat": 34.729444 - } - // ... 其他节点 - ], - "edges": [ - { - "source": "0", - "target": "21", - "id": "e0" - }, - { - "source": "2", - "target": "13", - "id": "e1" - } - // ... 其他边 - ] -} -``` - -如果使用 G6 简单地将节点和边渲染出来，将会得到如下结果：
img - -> 图 5. G6 渲染原始数据结果 - -我们发现简单地将该数据渲染后的结果航线纵横交错，穿梭在密集的城市当中，视觉上十分混乱，即难以看清细节，也不能发现航线的总体趋势。 - -## 期待效果 - -我们希望可以通过边绑定的方法降低图 5 的视觉混乱，从而清晰图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。借助 G6，我们可以实现如下效果。通过边绑定，边的交错混乱情况被降低，颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。
img - -> 期待效果图及 tooltip 效果。 - -## 实现步骤 - -### 统计必要信息 - -首先，我们使用简单的 JS 根据数据统计每个节点的总度数（degree，即出入该城市的航线总数）、出度（outDegree，即飞出该城市的航线数）、入度（inDegree，即飞入该城市成航线数），为后续映射到节点上做好准备。 - -```javascript -const nodes = data.nodes; -const edges = data.edges; -nodes.forEach((n) => { - n.y = -n.y; - n.degree = 0; - n.inDegree = 0; - n.outDegree = 0; -}); -// compute the degree of each node -const nodeIdMap = new Map(); -nodes.forEach((node) => { - nodeIdMap.set(node.id, node); -}); -edges.forEach((e) => { - const source = nodeIdMap.get(e.source); - const target = nodeIdMap.get(e.target); - source.outDegree++; - target.inDegree++; - source.degree++; - target.degree++; -}); -let maxDegree = -9999, - minDegree = 9999; -nodes.forEach((n) => { - if (maxDegree < n.degree) maxDegree = n.degree; - if (minDegree > n.degree) minDegree = n.degree; -}); -const sizeRange = [1, 20]; -const degreeDataRange = [minDegree, maxDegree]; -// 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后， -// 写入到 nodes 中元素的 ‘size’ 属性中 -scaleNodeProp(nodes, 'size', 'degree', degreeDataRange, sizeRange); -``` - -`scaleNodeProp()` 方法将指定的节点属性 `refPropName` 根据给定数值范围 `outRange` 归一化，映射到另一个属性 `propName` 上： - -```javascript -/** - * 映射属性 - * @param {array} nodes 对象数组 - * @param {string} propName 写入的属性名称 - * @param {string} refPropName 被归一化的属性名称 - * @param {array} dataRange 被归一化的属性的值范围 [min, max] - * @param {array} outRange 写入的属性的值范围 [min, max] - */ -function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) { - const outLength = outRange[1] - outRange[0]; - const dataLength = dataRange[1] - dataRange[0]; - nodes.forEach((n) => { - n[propName] = ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0]; - }); -} -``` - -通过上面两段代码，我们已经将归一化的度数映射到节点大小 `size` 上。 - -### 实例化边绑定插件 - -G6 中提供的边绑定插件是基于 FEDB（Force-Directed Edge Bundling for Graph Visualization）一文的实现。可以通过调节参数调整边绑定的效果。 - -```javascript -const edgeBundling = new Bundling({ - bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。 - K: 100, // 绑定的强度 -}); -``` - -### 自定义饼图节点 - -在第一步中，我们已经为节点大小 size 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例，我们希望在每个节点上显示一个类似于饼图的效果。例如img ，桔红色扇形代表飞入该城市的航班比例，青色代表飞出该城市的航班比例。G6 内置的 circle 、rect 等节点形状不能满足这一需求，但 G6 提供了节点的扩展机制，通过下面的代码片段，可以在 G6 中注册一个自定义的节点： - -```javascript -const lightBlue = 'rgb(119, 243, 252)'; -const lightOrange = 'rgb(230, 100, 64)'; - -// 注册自定义名为 pie-node 的节点类型 -G6.registerNode( - 'pie-node', - { - drawShape: (cfg, group) => { - const radius = cfg.size / 2; // 节点半径 - const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例 - const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小 - const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小 - const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; // 入度饼图弧结束位置 - let isInBigArc = 1, - isOutBigArc = 0; - if (inAngle > Math.PI) { - isInBigArc = 0; - isOutBigArc = 1; - } - // 定义代表入度的扇形形状 - const fanIn = group.addShape('path', { - attrs: { - path: [ - ['M', radius, 0], - ['A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1]], - ['L', 0, 0], - ['B'], - ], - lineWidth: 0, - fill: lightOrange, - }, - // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 - name: 'in-fan-shape', - }); - // 定义代表出度的扇形形状 - const fanOut = group.addShape('path', { - attrs: { - path: [ - ['M', inArcEnd[0], inArcEnd[1]], - ['A', radius, radius, 0, isOutBigArc, 0, radius, 0], - ['L', 0, 0], - ['B'], - ], - lineWidth: 0, - fill: lightBlue, - }, - // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 - name: 'out-fan-shape', - }); - // 返回 keyshape - return fanIn; - }, - }, - 'single-node', -); -``` - -这样，我们就在 G6 中注册了一个名为  pie-node 的节点类型。 - -### 实例化图 - -在这一步中，我们在实例化图时，并为之指定边绑定插件、节点类型（刚才自定义的 pie-node）、节点样式、边样式（渐变色）。 - -```javascript -const edgeBundling = new Bundling({ - bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。 - K: 100, // 绑定的强度 -}); -const graph = new Graph({ - container: 'mountNode', - width: 1000, - height: 800, - plugins: [edgeBundling], // 加入插件 - fitView: true, - defaultNode: { - size: 3, - color: 'steelblue', - fill: 'steelblue', - }, - nodeStyle: { - default: { - lineWidth: 0, - fill: 'steelblue', - }, - }, - edgeStyle: { - default: { - lineWidth: 0.7, - strokeOpacity: 0.1, // 设置边透明度，在边聚集的部分透明度将会叠加，从而具备突出高密度区域的效果 - stroke: 'l(0) 0:' + llightBlue16 + ' 1:' + llightOrange16, - }, - }, -}); -``` - -这里出发端的颜色为 `llightBlue16`，结束端的颜色为 `llightOrange16`： - -```javascript -const llightBlue16 = '#C8FDFC'; -const llightOrange16 = '#FFAA86'; -``` - -为了配合节点和边的颜色，这里将页面的 body 的颜色设置为黑色： - -```html - -``` - -### 执行绑定和渲染 - -有了 graph 实例和 edgeBundling 实例后，我们执行下面代码进行绑定操作和图的数据读入及渲染： - -```javascript -edgeBundling.bundling(data); // 执行插件的绑定操作 -graph.data(data); -graph.render(); -``` - -#### 设置 tooltip 与交互操作 - -使用 tooltip，可以在鼠标 hover 到节点上时展示该节点的其他属性值。首先在 HTML 中设定 tooltip 的样式： - -```html - -``` - -然后，在上一步实例化 `graph` 时，增加一个名为 `modes` 的配置项到参数中，如下写法启动了 `drag-canvas` 画图拖动操作、`zoom-canvas` 画布放缩操作，以及 `tooltip`，在  `formatText` 函数中指定了 `tooltip` 显示的文本内容： - -```javascript - modes: { - default: [ 'drag-canvas', 'zoom-canvas', { - type: 'tooltip', - formatText(model) { - const text = 'Longitude: ' + model.lon + '\n Latitude: ' + model.lat; - return text; - }, - shouldUpdate: e => { - return true; - } - }] - } -``` - -这样，当鼠标移动到节点上时，带有经纬度信息的 `tooltip` 将会出现：
img - -> tooltip - -同时，可以拖拽和放缩画布： img - -> 缩放和拖动画布 - -## 分析 - -img - -> 最终效果图。节点大小代表飞入及飞出该城市航线总数。节点饼图展示飞出与飞入航线比例统计信息（橙红色为飞入，青色为飞出）。边的渐变色代表航班的飞行方向。起始端：青色；结束端：橙红色。 - -最后，让我们一起分析如下的最终结果图给我们带来的信息： - -- 大节点主要集中在中偏东部，根据其经纬度，可以推测这些城市有：亚特兰大、纽约、芝加哥、休斯顿、堪萨斯等，这些城市都是美国重要的交通枢纽； -- 美国东部的线桔红色居多，说明东部城市的飞入航班较多； -- 相反，西部城市的飞出航班较多； -- 整体飞行方向从东至西； -- 东部的航线也较之于西部更加密集、频繁； -- 西海岸由西雅图和波特兰飞往洛杉矶的航班较多。 - -上述发现很容易被解释：美国东部是美国的经济、政治集中区域。 diff --git a/packages/site/docs/manual/cases/relations.en.md b/packages/site/docs/manual/cases/relations.en.md deleted file mode 100644 index a3f388aba82..00000000000 --- a/packages/site/docs/manual/cases/relations.en.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Relationship Analysis Powered by G6 -order: 1 ---- - -## Background - -Social network is an important scenario of graph visualization. The relationships between people and people, people and organization are getting complicated. It is hard to meet the analyzing requirements by the classical methods. Therefore, graph visualization and analysis become important. - -## Functional Overview - -It is a graph analysis application powered by G6. It simulates a relation analysis scenario with mock data, and demonstrates the analyzing abilities of G6: - -- Expand the Relationships; -- Relationship Prediction; -- Relationship Clustering; -- Circle Detection; -- Circle Query; -- Efficient Analysis: - - Data Filtering; - - Mark the Node and Edge; - - Hide / Show Node; - - Hide / Show Label. - -img - -## Expand the Relationships - -Users can query a person by inputing some keywords into the syste, and then do some analysis by expanding the 1-6 degree relationships of the person. The relationships between the person and other organizations can be obtained too. - -**Applicable Scene:** The 1-degree relationships indicate the friends of one person in the social network, 2-degree relationships indicate the friends' friend of the person. - -img - -## Relationship Prediction - -The types of relationships are various in social network with large data. For example, we suppose that we know that A is a friend of B. We do not know whether C and D belong to og too; How will the graph transform if we add C and D onto the current graph; How will the graph transform if we add a 'prediction' type edge to C and D. Relationship prediction helps us to explore the unknown information. - -img - -**Applicable Scene:** In social network, we want to know how the graph transform when there is a new connection added to two unrelated nodes. - -img - -## Relationship Clustering - -There might be multiple 'colleague' type relationships betwenn node A and B, e.g. A and B are colleague in company1 and company2. These two 'colleague' relationships have different timestamp. We do not render all the similar relationships onto the graph, but render a clustered edge which can be expanded by clicking. - -**Applicable Scene:** Cluster relationships with same type into one edge to reduce the visual clutter. - -## Circle Detection - -Suppose that we know a circle of friends: A is a friend of B, B is a friend of C, C is a friend of A. Now we want to figure out if D and E are related to the known circle. Input D and E into circle detection, D and E will show up if they are related to the circle. - -**Applicable Scene:** Detect the existence and relationships of a node in a known circle. - -img - -## Circle Query - -For the known circles, we are able to query to nodes and relationships about them. - -**Applicable Scene:** Query the person and relationships in the circles of friends. - -img - -## Efficient Analysis - -To improve the efficiency of analyzing, we provides data filtering, node/edge marking, node/edge hiding/showing, label hiding/showing, etc. - -### Data Filtering - -It is hard for users to explore a graph with large amount of nodes and edges. By utilizing data filtering, the unconcerned items will be hided. - -img - -### Mark the Node and Edge - -Marking the important nodes and edges helps users analyze the information about the focus items. - -img - -This function is appropriate for the exploration on complex network. - -img - -### Hide / Show Node - -During the analysis process, we can selectively hide unimportant nodes and their related edges, so that we can focus on the important nodes. When the analysis is completed, we can choose to display all hidden items. - -img - -### Hide / Show Label - -When the number of edges is particularly large, the labels on the edges overlap each other, affecting our further analysis. At this point, you can choose to hide the labels on the edges. - -img - -## Conclusion - -This application uses simulated social network data as an example to demonstrate a graph analysis application powered by G6. In actual scenarios, it is not limited to social network data. Any relational data can be analyzed using graph analysis techniques, such as risk control, anti-money laundering, credit card fraud, and other business fields. G6 is an open source graph visualization engine that focuses on the demonstration and the analysis of relational data, and it is appropriate for building graph analysis applications. - -## Application Address - -
Official website of G6: https://g6.antv.antgroup.com/
GitHub of G6: https://github.com/antvis/g6 diff --git a/packages/site/docs/manual/cases/relations.zh.md b/packages/site/docs/manual/cases/relations.zh.md deleted file mode 100644 index 56a4a6bf3fb..00000000000 --- a/packages/site/docs/manual/cases/relations.zh.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 基于 G6 的图分析应用 -order: 1 ---- - -## 背景 - -社交网络分析是图可视化中一个重要的应用场景。
随着社交网络越来越流行，人与人、人与组织之间的关系变得越来越复杂，使用传统的分析手段，已经很难满足我们的分析需求。在这种情况下，图分析及图可视化显得愈发重要。 - -## 功能概述 - -基于 G6 实现一个图分析应用，模拟了一个关系分析场景，使用模拟数据，来展示在图分析应用中我们可以做的一些事情： - -- 关系扩散； -- 关系预判； -- 关系聚合； -- 圈检测； -- 圈查询； -- 高效分析； - - 数据过滤； - - 实时标记； - - 隐藏 / 显示 Label； - - 隐藏 / 显示节点。 - -img - -## 关系扩散 - -通过输入的方式查询到具体的个人后，可以针对个人做 1-6 度的关系扩散，也可以进一步分析与他相关的人或组织的关系。 - -适用场景：在社交网络中，通过 A 的一度关系可以查询到他的所有朋友，通过二度关系，可以查询到他的朋友的朋友，通过分析相关动态，可以了解到关于 A 的更多的信息。 - -img - -## 关系预判 - -在海量数据的社交网络中，人与人、人与组织之间会存在多种类型的关系。假设已知，如 A 是 B 的朋友，B 属于 og 组织。未知：C 与 D 是否也属于 og 组织；如果加入 C 和 D 点到当前图上，网络会如何变化；为 C 和 D 增加“预测”类型的关系，网络会如何变化。为了解这些未知的信息，我们使用关系预判功能。 - -img - -适用场景：在社交网络中，为两个原本不相关的节点增加预测边，查看网络发生的变化，以确定该操作对图产生的效果。 - -img - -## 关系聚合 - -A 和 B 之间可能会存在多个同事关系，如 A 和 B 在 company1 公司是同事，在 company2 公司也是同事，只是两条同事关系的时间戳不同。对于这种情况，我们没必要将全有的关系都绘制到页面上，可以将同类型的关系合并成一条关系，点击时再展开。 - -适用场景：为了降低视觉干扰，将多条同类型的关系合并成一条。 - -## 圈检测 - -在社交网络数据中，假设我们已知朋友圈：A 是 B 的朋友，B 是 C 的朋友，C 又是 A 的朋友。此时，我们想知道 D 和 E 是否与我们已知的朋友圈相关。使用圈检测的功能，输入 D 或 E，若他们存在于已知的朋友圈中，则会被展示出来。 - -适用场景：检测用户是否存在于已知的朋友圈中。 - -img - -## 圈查询 - -对于已知的圈，我们可以查询每个圈中包含的节点，以及它们之间的关系。 - -适用场景：查询指定朋友圈中所有的用户以及用户之间的关系。 - -img - -## 高效分析 - -图分析应用中，为了提升分析的效率，我们提供了数据过滤、标记重点节点和边、隐藏 / 显示 Label 等辅助功能，可帮助用户更快更好地进行分析。 - -### 数据过滤 - -当画布上存在大量的节点及边时，想要进行高效分析是件很困难的事情，我们可以通过过滤的功能，将暂时不需要关注的类型的节点和边先隐藏起来，以便我们将精力放在重点的节点和边上面。 - -img - -### 标记节点及边 - -在分析过程中，将重点需要关注的节点和边进行标记，可以在复杂的网络关系中很清晰地呈现出我们需要重点关注的内容。 - -img - -该功能尤其适用于探索特别复杂的网络中。 - -img - -### 隐藏 / 显示节点 - -在分析过程中，我们可以选择性地隐藏不重要的节点及其相关边，方便我们将注意力集中在重点的节点上面。当分析完成以后，可以选择将隐藏的节点全部显示出来。 - -img - -### 隐藏 / 显示 Label - -当边的数量特别大时，边上的 label 相互重叠，影响我们进一步的分析。此时，可以选择将边上的 label 隐藏。 - -img - -## 总结 - -本应用以模拟的社交网络数据为例，演示了使用 G6 构建的一个图分析的应用。在实际的场景中，不局限于社交网络数据，任何重关系类的数据，都可使用图分析的技术进行分析，如风控、反洗钱、信用卡诈骗等金融领域；商品、商家及卖家等电商领域。G6 是一款开源的图可视化引擎，专注于关系数据的展示与分析，非常适合用于构建重型的图分析应用。 - -## 应用地址 - -
G6 官网：https://g6.antv.antgroup.com/
G6 GitHub：https://github.com/antvis/g6 diff --git a/packages/site/docs/manual/cases/sequenceTime.en.md b/packages/site/docs/manual/cases/sequenceTime.en.md deleted file mode 100644 index 5e7fa4cd94e..00000000000 --- a/packages/site/docs/manual/cases/sequenceTime.en.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Dynamic Relationship Analysis Powered by G6 -order: 0 ---- - -## Background - -With the rapid development of Internet business, the business and application systems, middleware and their relationships and dependencies have become more and more complex. It is hard for the developers, testing personnel, architect, and maintenance personnel to control and maintain the super complex relationships between the applications and middleware. Once a problem occurs online, the entire process from the occurrence of a failure to the organization for emergency requires multiple parties to participate. They use multiple system tools and platforms to query and synchronize information. There are breaks between multiple stages of the process, the impact assessment and change retrospection take a long time, and the requirements for emergency personnel are relatively high. There is no efficient and systematic solution for the overall failure emergency response. For example, after receiving an online alarm, the impact area and source of change cannot be located quickly. It is difficult to make accurate decisions. And it is not possible to quickly minimize online failures. - -Based on this background, we try to provide a set of emergency plan visualizations to solve a series of emergency decision-making assistance information and methods such as processes, influence areas, emergency plans, ..., to quickly stop bleeding to reduce and avoid failure upgrades. - -## Feature Design - -### 1. Demonstration of Emergency - -The demonstration of emergency is the main view after users enter the emergency mode. It contains six features:
1）Shows the node where the exception occurred on, the nodes that have a calling relationship with the abnormal node, and the calling relationship link;
2）Shows the remark information about paths or nodes;
3）The interaction abilities: show detail information when mouse hover or click a node;
4）Combines with the left panel to display;
5）Allows the menu of the node to be extended;
6）Time series analysis: time bar with bar chart to show the error counts in different time slots, allows refreshing the graph by clicking a bar.
- -### 2. Affect Area Panel - -The affect area: The impact of each anomaly. On the one hand, it is a bussiness affect area if it happens on bussiness; On the other hand, it is a front-end affect area if it happens on the front-end; If it happens on the specific applications, it will be a application affect area.
The affect area is shown in the left panel with the features:
1）Open / close the affect area panel;
2）Show the list of affect area;
3）Swich to bussiness affect area / front-end affect area / application affect area;
4）Show the affect trends;
5）Show the list of logs;
6）The information view is collapsible;
7）Basic architecture dependencies.
- -### 3. Operation Panel - -The entrance of the operation panel is the detail link of the list of affect area.
The operations include:
1）Show and manipulate the summary information;
2）The list of emergency assistances and operations with pop-up icons;
3）Open / close the affect area panel;
4）The information view is collapsible.
- -### 4. Details Ppanel Extensions - -There are some extensions in the detail view of the app:
1）Log demonstration;
2）Emergency assistances.
- -### 5. Other Features - -1. Share links. The links have timestamps for going back to the abnormal place; -2. Be able to limit the flow; -3. Highlight the key words. Use regular to match some keywords and process the HTML text to be displayed. - -## Implementation of Main Technologies - -### Demonstration of Emergency - -The demonstration of emergency is an architecture graph with states, which aims to visualize and analyze the relationships between systems and showing the abnormal states for operation and maintenance. Users can find the abnormal nodes easily by viewing the demonstration of emergency.
We provide two views for the demonstration of emergency: flow and path.
- -img - -img - -
The flow view looks fantastic at first glance, but there are lots of redundant information in actual emergency works. It is not helpful for handling the key problem quickly. Therefore, we use the path view on the emergency workbench to show the graph more clearly. The core data of these two views are the same. The path view bundles the flow paths.
- -### Time Series Analysis - -Actually, a graph can only map the state profile of the actual system at a moment. The problem does not occur instantaneously, but more like the undulating waters of a lake. To understand the state of the system at any time, we need to use the ability of timing analysis. It can be achieved by the time series analysis tool:
img - -This tool has three levels of time control: minutes -> hour -> day. The user switches between different days through the date selection control, analyzes the 24-hour fluctuation trend through the time axis throughout the day, and selects the specific time period to determine the minute-level analysis to be performed. Finally, the analysis is performed by selecting the specific aspect.
- -img - -The timing analysis module has added a time axis. By default, a bar chart of the total number of errors per hour in the last hour is displayed. Clicking the bar chart indicates that a certain time point is selected. After selection, all function request interfaces are triggered to refresh all functions.
After selecting a specific time point, all functions in the page need to be refreshed again. Therefore, the data model layer of the selection time is relatively global in this page module, and all submodules that need to be changed based on this data should listen to this data during the life cycle. The demonstration also needs to be updated after new data is requested. After handling the above details, our demonstration has a very powerful timing analysis capability. - -### Node Information Extensions - -From the perspective of experience, when we deal with emergency work, what we want to do most is that users do not rely on other applications, and can directly find the most fundamental cause of the problem on our demonstation. However, due to the limitations of the current graph visualization, all the information currently converges to a "node" color block, and the information that can be mapped is very limited. Therefore, a natural idea is to expand the node expression ability.
Thanks to G6's rendering capabilities, we can easily expand the expressions we want on the nodes. Through the following example, you can see that the node extension capability of G6 is very powerful. - -img - -
The abilities after extend: - -img - -We achieve these features by G6: - - - -
With such a foundation, node styles are not limited to simple geometric shapes, but instead map representative information to nodes so that the shape of a node can roughly reflect the characteristics of a node at a glance. This is also meaningful in some scenarios where multiple nodes need to be compared.

In this emergency workbench, the error data within one hour is selected to expand the node information. The specific solution is to distribute these time series information on the circumference of the original node, and the size of the information value is mapped with a radial histogram.
- -img - -### Complete Demo - - - -## Conclusion & Future Work - -In general, the emergency workbench is deeply focused on business scenarios, providing complete functions, reasonable logic, and complete processes. There are many things that can be deepened in the future. For example, the extension of node information can be more abundant, and richer data properties can be mapped into the node shapes; The current layout is based on the hierarchical layout: Dagre, some complex paths are not clear enough; Although the current emergency workbench is based on the previous Nebula demonstration, it has discarded the 'location' information of nodes in the entire domain architecture. All these problems should be optimized continually in the future. - -## Demo Address - -Code: https://github.com/scaletimes/g6-flow-demo
Official website of G6: https://g6.antv.antgroup.com/
GitHub of G6: https://github.com/antvis/g6 diff --git a/packages/site/docs/manual/cases/sequenceTime.zh.md b/packages/site/docs/manual/cases/sequenceTime.zh.md deleted file mode 100644 index f49cf7f4936..00000000000 --- a/packages/site/docs/manual/cases/sequenceTime.zh.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 基于 G6 的关系时序分析应用 -order: 0 ---- - -## 背景分析 - -随着互联网业务不断快速发展，业务和应用系统、中间件及其之间的关系、依赖变得越来越复杂。不论是研发、测试还是架构、运维人员，对公司线上的应用、中间件等超级复杂关系的整体把控越来越无力维护。一旦线上出现问题，从故障发生到组织应急和应急的整个过程需要多方参与并使用多个系统工具和平台来回查询、不停同步信息。过程的多个阶段之间有断裂，影响面评估和变更追溯耗时较长，且对应急人员的要求有较高的门槛。整体故障应急缺乏高效的、系统的解决方案。例如，线上告警后不能快速定位影响面和变更源，很难准确进行决策，不能迅速最小化的处理线上故障。 - -基于这样的背景，我们尝试提一套应急方案可视化，解决应急过程中流程、影响面、应急预案等一系列应急决策辅助信息和手段，快速止血以减少和避免故障升级。 - -## 功能设计 - -### 1. 应急模式大图展示 - -应急模式大图是应急模式进入后的主页面，大图应该包括的功能点有：
1）本次发生异常的节点、与异常节点的有调用关系的其他节点，以及其调用关系链路展示；
2）链路或者节点的一些备注信息展示；
3）节点上有交互能力：比如 hover 或者 click 之后有详细信息展示；
4）与左侧影响面中选择项联动展示大图；
5）节点的展开菜单扩展；
6）时序分析功能，时间轴，展示最近一小时每分钟的错误总数柱形图，点击柱形图表示选择某时间点，选择后可触发全部功能请求接口，刷新全部功能。
- -### 2. 影响面面板功能 - -影响面的概念是指：每一次发生异常产生的影响。这个影响一方面体现在业务层面，是业务影响面；另一方面体现在更具体的前端页面上，叫前端影响面；体现在具体应用，是应用影响面。
影响面以悬浮面板的形式吸附在页面边缘（左侧），应该具有的功能有：
1）打开 / 收起影响面面板；
2）展示影响面列表信息；
3）切换业务影响面/前端影响面/应用影响面；
4）影响趋势图；
5）日志查看列表；
6）信息模块可折叠；
7）基础架构依赖。
- -### 3. 执行操作面板功能 - -执行操作面板的入口是：点击查看影响面列表中的详情。
执行操作含的功能有：
1）概要信息列表展示和操作功能；
2）应急辅助的列表展示以及操作功能（有弹出展示图标）；
3）打开 / 收起影响面面板；
4）信息模块可折叠。
- -### 4. APP 详情面板扩展功能 - -在原有的 APP 详情页上有添加一些扩展功能：
1）日志展示；
2）应急辅助。
- -### 5. 其他功能 - -1. 链接分享，分享的链接中带有时间参数，用以回到异常现场； -2. 可以限流； -3. 关键字高亮，使用正则去匹配部分关键字并处理待显示的 HTML 文本。 - -## 主要技术实现 - -### 应急大图 - -应急大图是一幅有状态的架构大图，主要目的是其一展示系统间关系，分析系统或接口间依赖，其二，除架构上的相关信息外，整个系统集群在某时刻的正常或异常状态的展示和分析，从运维的角度看则更具备意义。通过大图用户就能直观看到业务链路上那个节点出了问题。
我们提供了两种模式的应急大图：流量视角和链路视角。
- -img - -img - -
流量视角的大家第一眼看起来会觉得很酷炫，但实际在应急工作中有太多的冗余信息，对快速把握问题的核心原因没有帮助，所以在应急工作台上大图的构建采用了更加清晰的链路视图。二者的核心数据是一致的，只是链路视图是将流量线做了合并。
- -### 大图的时序分析 - -实际上，一张图上某一时刻只能映射出实际系统某一刻的状态剖面。但问题的发生不是瞬时抖动的，而更像是湖面波澜起伏的湖水时高时低。想要了解任意时刻系统的状态，这个时候我们就需要借助时序分析的能力，这个就是通过下面时序分析的工具来实现的：
img - -这个工具对时间的控制分为了三个层次：分 -> 小时 -> 天。用户通过日期选择控件在不同日期间切换，通过全天的时间轴分析 24 小时波动趋势，并选择具体时段确定要进行分析分钟级切面，最终通过选择具体切面来进行分析。
- -img - -时序分析模块增加了时间轴，默认展示最近一小时每分钟的错误总数柱形图，点击柱形图表示选择某时间点，选择后可触发全部功能请求接口，刷新全部功能。
当选择出具体时间点后，页面中所有功能需要重新刷新。所以，选择时间的数据模型层在本页面模块相对全局的位置，而所有需要依据此数据而变化的子模块应该在生命周期中监听该数据。大图数据当然也需要在请求到新的数据后更新。
处理好以上细节后，我们的大图就有了一个非常强大的时序分析能力。 - -### 节点信息扩展 - -从体验上考虑，当我们处理应急工作时最想做到的是用户能够不依赖其他应用，直接在我们的图上能够找到问题最根本的原因。但是受限于目前图可视化的局限，目前所有的信息都收敛到一个“node”的色块上，能够映射上去的信息非常有限。所以，一个自然的思路是对节点表达能力进行扩展。
得益于 G6 的渲染能力，我们可以比较容易的在节点上扩展出我们想要的表达方式。通过下面的示例，可以看到 G6 的节点扩展能力是非常强悍的。 - -img - -
我们再来看看扩展后的交互能力： - -img - -接下来，我们将使用 G6 实现下面的功能： - - - -
有了这样的基础后，节点样式不局限于简单的几何形状，而是把具有代表意义的信息映射到节点上，从而使节点的形状一眼看上就能大致反应某节点的特点。这样在某些多个节点需要对比的场景下也是具有意义的。

本次应急工作台，先选用一小时内的错误量数据来扩展节点信息。具体方案是，将这些时序信息分布到原有节点的圆周上，信息值的大小用放射状的柱状图来映射。
- -img - -### 完整的应用演示 - - - -## 总结展望 - -总体来讲，应急工作台深度聚焦业务场景，提供的功能齐备、逻辑合理、流程完整。未来可以深入的事情还有很多，比如，节点信息的扩展可以更加丰富，有更多更丰富的数据属性可以被映射到节点图形中；当前布局是基于 Dagre 的有向图层次布局，在布局复杂链路的时候可能还是存在不够清晰的情况；当前的应急工作台尽管基于此前的星云大图，但是却舍弃了节点在整个域架构中的“位置”信息。我们将持续深入优化这些问题。 - -## 应用地址 - -源码：https://github.com/scaletimes/g6-flow-demo
G6 官网：https://g6.antv.antgroup.com/
G6 GitHub：https://github.com/antvis/g6 diff --git a/packages/site/docs/manual/core-concept/animation.en.md b/packages/site/docs/manual/core-concept/animation.en.md new file mode 100644 index 00000000000..ef3fc93fb11 --- /dev/null +++ b/packages/site/docs/manual/core-concept/animation.en.md @@ -0,0 +1,4 @@ +--- +title: Animation +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/animation.zh.md b/packages/site/docs/manual/core-concept/animation.zh.md new file mode 100644 index 00000000000..44079220fd3 --- /dev/null +++ b/packages/site/docs/manual/core-concept/animation.zh.md @@ -0,0 +1,4 @@ +--- +title: Animation 动画 +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/behavior.en.md b/packages/site/docs/manual/core-concept/behavior.en.md new file mode 100644 index 00000000000..d397ba5800a --- /dev/null +++ b/packages/site/docs/manual/core-concept/behavior.en.md @@ -0,0 +1,4 @@ +--- +title: Behavior +order: 4 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/behavior.zh.md b/packages/site/docs/manual/core-concept/behavior.zh.md new file mode 100644 index 00000000000..bbdd62afeec --- /dev/null +++ b/packages/site/docs/manual/core-concept/behavior.zh.md @@ -0,0 +1,4 @@ +--- +title: Behavior 交互 +order: 4 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/data.en.md b/packages/site/docs/manual/core-concept/data.en.md new file mode 100644 index 00000000000..24c379c9dcd --- /dev/null +++ b/packages/site/docs/manual/core-concept/data.en.md @@ -0,0 +1,4 @@ +--- +title: Data +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/data.zh.md b/packages/site/docs/manual/core-concept/data.zh.md new file mode 100644 index 00000000000..e8419d301d3 --- /dev/null +++ b/packages/site/docs/manual/core-concept/data.zh.md @@ -0,0 +1,4 @@ +--- +title: Data 数据 +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/element.en.md b/packages/site/docs/manual/core-concept/element.en.md new file mode 100644 index 00000000000..59c5dfce005 --- /dev/null +++ b/packages/site/docs/manual/core-concept/element.en.md @@ -0,0 +1,4 @@ +--- +title: Element +order: 2 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/element.zh.md b/packages/site/docs/manual/core-concept/element.zh.md new file mode 100644 index 00000000000..377a973425a --- /dev/null +++ b/packages/site/docs/manual/core-concept/element.zh.md @@ -0,0 +1,4 @@ +--- +title: Element 元素 +order: 2 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/graph.en.md b/packages/site/docs/manual/core-concept/graph.en.md new file mode 100644 index 00000000000..2164568cdfe --- /dev/null +++ b/packages/site/docs/manual/core-concept/graph.en.md @@ -0,0 +1,4 @@ +--- +title: Graph +order: 0 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/graph.zh.md b/packages/site/docs/manual/core-concept/graph.zh.md new file mode 100644 index 00000000000..b9b6aed6b43 --- /dev/null +++ b/packages/site/docs/manual/core-concept/graph.zh.md @@ -0,0 +1,4 @@ +--- +title: Graph 图 +order: 0 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/layout.en.md b/packages/site/docs/manual/core-concept/layout.en.md new file mode 100644 index 00000000000..084fbb87117 --- /dev/null +++ b/packages/site/docs/manual/core-concept/layout.en.md @@ -0,0 +1,4 @@ +--- +title: Layout +order: 3 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/layout.zh.md b/packages/site/docs/manual/core-concept/layout.zh.md new file mode 100644 index 00000000000..33900fd67c5 --- /dev/null +++ b/packages/site/docs/manual/core-concept/layout.zh.md @@ -0,0 +1,4 @@ +--- +title: Layout 布局 +order: 3 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/palette.en.md b/packages/site/docs/manual/core-concept/palette.en.md new file mode 100644 index 00000000000..fac3502f00a --- /dev/null +++ b/packages/site/docs/manual/core-concept/palette.en.md @@ -0,0 +1,4 @@ +--- +title: Palette +order: 6 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/palette.zh.md b/packages/site/docs/manual/core-concept/palette.zh.md new file mode 100644 index 00000000000..30f23655663 --- /dev/null +++ b/packages/site/docs/manual/core-concept/palette.zh.md @@ -0,0 +1,4 @@ +--- +title: Palette 色板 +order: 6 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/plugin.en.md b/packages/site/docs/manual/core-concept/plugin.en.md new file mode 100644 index 00000000000..d1b1696a5d5 --- /dev/null +++ b/packages/site/docs/manual/core-concept/plugin.en.md @@ -0,0 +1,4 @@ +--- +title: Plugin +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/core-concept/plugin.zh.md b/packages/site/docs/manual/core-concept/plugin.zh.md new file mode 100644 index 00000000000..0205b475b31 --- /dev/null +++ b/packages/site/docs/manual/core-concept/plugin.zh.md @@ -0,0 +1,4 @@ +--- +title: Plugin 插件 +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/customize/behaviorExtension.en.md b/packages/site/docs/manual/customize/behaviorExtension.en.md deleted file mode 100644 index 0625b829b44..00000000000 --- a/packages/site/docs/manual/customize/behaviorExtension.en.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Custom Behavior -order: 3 ---- - -Interaction is an important concept in G6, which refers to the process of user interaction with the canvas or graphics. G6 has built-in some interactions, such as drag and drop, zoom, box selection, mouse hover, etc. At the same time, G6 also supports user-defined interactions. - -Custom interactions by inheriting the [Behavior](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/types/behavior.ts#L11) class. - -```ts -import { Behavior } from '@antv/g6'; - -class CustomBehavior extends Behavior { - // Override method - // Class method -} -``` - -## Override method - -### getEvents Required - -**Type**: `() => { [key in string]: string }` - -Get the event listener for the interaction - -## Example - -Here is an example of a custom interaction. When the mouse double-clicks the canvas, the canvas content is scaled to the appropriate size. - -```ts -import { Graph as BaseGraph, Behavior, extend } from '@antv/g6'; - -class ClickFitView extends Behavior { - getEvents() { - return { - 'canvas:dblclick': this.fitView, - }; - } - - fitView() { - this.graph.fitView(); - } -} - -const Graph = extend(BaseGraph, { - behaviors: { - clickFitView: ClickFitView, - }, -}); - -const graph = new Graph({ - container: 'container', - width: 500, - height: 500, - // Enable clickFitView interaction - modes: { - default: ['clickFitView'], - }, -}); -``` diff --git a/packages/site/docs/manual/customize/behaviorExtension.zh.md b/packages/site/docs/manual/customize/behaviorExtension.zh.md deleted file mode 100644 index 6cc019d11c4..00000000000 --- a/packages/site/docs/manual/customize/behaviorExtension.zh.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 自定义交互 -order: 3 ---- - -交互是 G6 中的一个重要概念，它是指用户与画布或图形进行交互的过程。G6 内置了一些交互，例如拖拽、缩放、框选、鼠标 hover 等。同时，G6 也支持用户自定义交互。 - -通过继承 [Behavior](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/types/behavior.ts#L11) 类来自定义交互。 - -```ts -import { Behavior } from '@antv/g6'; - -class CustomBehavior extends Behavior { - // 覆写方法 - // 类方法 -} -``` - -## 覆写方法 - -### getEvents 必选 - -**类型**：`() => { [key in string]: string }` - -获取交互的事件监听器 - -## 示例 - -这里给出一个自定义交互例子，当鼠标双击画布时，将画布内容缩放到合适大小。 - -```ts -import { Graph as BaseGraph, Behavior, extend } from '@antv/g6'; - -class ClickFitView extends Behavior { - getEvents() { - return { - 'canvas:dblclick': this.fitView, - }; - } - - fitView() { - this.graph.fitView(); - } -} - -const Graph = extend(BaseGraph, { - behaviors: { - clickFitView: ClickFitView, - }, -}); - -const graph = new Graph({ - container: 'container', - width: 500, - height: 500, - // 启用 clickFitView 交互 - modes: { - default: ['clickFitView'], - }, -}); -``` diff --git a/packages/site/docs/manual/customize/layoutExtension.en.md b/packages/site/docs/manual/customize/layoutExtension.en.md deleted file mode 100644 index 92c5718f6fb..00000000000 --- a/packages/site/docs/manual/customize/layoutExtension.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Custom Layout Extension -order: 6 ---- - -Coming soon... diff --git a/packages/site/docs/manual/customize/layoutExtension.zh.md b/packages/site/docs/manual/customize/layoutExtension.zh.md deleted file mode 100644 index 2c2a79f48d8..00000000000 --- a/packages/site/docs/manual/customize/layoutExtension.zh.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 自定义布局 -order: 6 ---- - -文档正在开发中... diff --git a/packages/site/docs/manual/customize/overview.en.md b/packages/site/docs/manual/customize/overview.en.md deleted file mode 100644 index 2ad60ebed24..00000000000 --- a/packages/site/docs/manual/customize/overview.en.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Overview -order: 0 ---- - -G6 provides a free extension mechanism. In addition to Graph itself, all other capabilities are G6's "extensions". - -The extension categories in G6 5.0 are as follows: - -- Node -- Edge -- Combo -- Data Transformer -- Behavior -- Layout -- Plugin -- Theme - -To reduce the package size, G6 5.0 uses on-demand loading. Only when a certain extension is used will the corresponding code be imported. Taking the node extension as an example: - -```javascript -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; - -/** - * To extend the Graph and register the required built-in functionalities, you can use the extend method. The second parameter of this method is the registry. - */ -const Graph = extend(BaseGraph, { - nodes: { - 'custom-node': Extensions.RectNode, - }, -}); - -// Instantiate using the extended class -const graph = new Graph({ - node: { - type: 'custom-edge', - }, -}); -``` - -:::warning -In addition to the default registered extensions, other extensions need to be registered to Graph through the `extend` method before they can be used. -::: - -## Built-in Extensions - -### 1. nodes - -| type | Import from | Registered by Default | Demo | API | Note | -| :--------------- | :----------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :--------------------------- | -| 'circle-node' | Extensions.CircleNode | ✅ Yes | [DEMO](/en/examples/item/defaultNodes/#circle) | [API](/en/apis/item/node/circle-node) | | -| 'rect-node' | Extensions.RectNode | ✅ Yes | [Rect DEMO](/en/examples/item/defaultNodes/#rect)，[Round Rect DEMO](/en/examples/item/defaultNodes/#radiusRect) | [API](/en/apis/item/node/circle-node) | | -| 'image-node' | Extensions.ImageNode | ✅ Yes | [DEMO](/en/examples/item/defaultNodes/#image) | [API](/en/apis/item/node/image-node) | | -| 'donut-node' | Extensions.DonutNode | No | [DEMO](/en/examples/item/defaultNodes/#donut) | [API](/en/apis/item/node/donut-node) | | -| 'diamond-node' | Extensions.DiamondNode | No | [DEMO](/en/examples/item/defaultNodes/#diamond) | [API](/en/apis/item/node/diamond-node) | | -| 'hexagon-node' | Extensions.HexagonNode | No | [DEMO](/en/examples/item/defaultNodes/#hexagon) | [API](/en/apis/item/node/hexagon-node) | | -| 'star-node' | Extensions.StarNode | No | [DEMO](/en/examples/item/defaultNodes/#star) | [API](/en/apis/item/node/star-node) | | -| 'triangle-node' | Extensions.TriangleNode | No | [DEMO](/en/examples/item/defaultNodes/#triangle) | [API](/en/apis/item/node/triangle-node) | | -| 'ellipse-node' | Extensions.EllipseNode | No | [DEMO](/en/examples/item/defaultNodes/#ellipse) | [API](/en/apis/item/node/ellipse-node) | | -| 'modelRect-node' | Extensions.ModelRectNode | No | [DEMO](/en/examples/item/defaultNodes/#modelRect) | [API](/en/apis/item/node/model-rect-node) | | -| 'sphere-node' | Extensions.SphereNode | No | [DEMO](/en/examples/item/defaultNodes/#3d-node) | [API](/en/apis/item/node/sphere-node) | available only when renderer | -| 'cube-node' | Extensions.CubeNode | No | [DEMO](/en/examples/item/defaultNodes/#3d-node) | [API](/en/apis/item/node/cube-node) | available only when renderer | - -### 2. edges - -| type | Import from | Registered by Default | Demo | API | Note | -| :---------------------- | :----------------------------- | :-------------------- | :------------------------------------------------------ | :---------------------------------------------- | :--- | -| 'line-edge' | Extensions.LineEdge | ✅ Yes | [DEMO](/en/examples/item/defaultEdges/#line) | [API](/en/apis/item/edge/line-edge) | | -| 'loop-edge' | Extensions.LoopEdge | ✅ Yes | [DEMO](/en/examples/item/defaultEdges/#loop) | [API](/en/apis/item/edge/loop-edge) | | -| 'quadratic-edge' | Extensions.QuadraticEdge | No | [DEMO](/en/examples/item/defaultEdges/#quadratic) | [API](/en/apis/item/edge/quadratic-edge) | | -| 'cubic-edge' | Extensions.CubicEdge | No | [DEMO](/en/examples/item/defaultEdges/#cubic) | [API](/en/apis/item/edge/cubic-edge) | | -| 'polyline-edge' | Extensions.PolylineEdge | No | [DEMO](/en/examples/item/defaultEdges/#polyline) | [API](/en/apis/item/edge/polyline-edge) | | -| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | No | [DEMO](/en/examples/item/defaultEdges/#horizontalCubic) | [API](/en/apis/item/edge/cubic-horizontal-edge) | | -| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | No | [DEMO](/en/examples/item/defaultEdges/#verticalCubic) | [API](/en/apis/item/edge/cubic-vertical-edge) | | - -### 3. combos - -| type | Import from | Registered by Default | Demo | API | Note | -| :------------- | :--------------------- | :-------------------- | :---------------------------------------------- | :-------------------------------------- | :--- | -| 'circle-combo' | Extensions.CircleCombo | ✅ Yes | [DEMO](/en/examples/item/defaultCombos/#circle) | [API](/en/apis/item/combo/circle-combo) | | -| 'rect-combo' | Extensions.RectCombo | ✅ Yes | [DEMO](/en/examples/item/defaultCombos/#rect) | [API](/en/apis/item/combo/rect-combo) | | - -### 4. transforms - -It is called after the raw data is input into the graph and is used for data processing. If there are multiple data processors, they are executed in the order specified by the configuration array. - -| type | Import from | Registered by Default | Demo | Note | -| :------------------ | :------------------------- | :-------------------- | :--- | :--- | -| 'transform-v4-data' | Extensions.TransformV4Data | ✅ Yes | | | -| 'map-node-size' | Extensions.MapNodeSize | ✅ Yes | | | - -### 5. behaviors - -All built-in and custom interactions should inherit from `Extensions.BaseBehavior` or other existing interactions. - -| type | Import from | Registered by Default | Demo | API | Note | -| :---------------------- | :----------------------------- | :-------------------- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------- | -| 'drag-canvas' | Extensions.DragCanvas | ✅ Yes | [DEMO](/en/examples/interaction/moveCanvas/#dragCanvas) | [API](/en/apis/behaviors/drag-canvas-options) | | -| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ Yes | [DEMO](/en/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/en/apis/behaviors/zoom-canvas-options) | | -| 'drag-node' | Extensions.DragNode | ✅ Yes | [DEMO](/en/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/en/apis/behaviors/drag-node-options) | | -| 'drag-combo' | Extensions.DragCombo | ✅ Yes | [DEMO](/en/examples/net/comboLayout/#comboCombined) | [API](/en/apis/behaviors/drag-combo-options) | | -| 'click-select' | Extensions.ClickSelect | ✅ Yes | [DEMO](/en/examples/interaction/select/#click) | [API](/en/apis/behaviors/click-select-options) | | -| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ Yes | [DEMO](/en/examples/interaction/combo/#circle) | [API](/en/apis/behaviors/collapse-expand-combo-options) | | -| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ Yes | [DEMO](/en/examples/net/dendrogram/#basicDendrogram) | [API](/en/apis/behaviors/collapse-expand-tree-options) | | -| 'activate-relations' | Extensions.ActivateRelations | No | [DEMO](/en/examples/interaction/highlight/#activateRelations) | [API](/en/apis/behaviors/activate-relations-options) | -| 'hover-activate' | Extensions.HoverActivate | No | [DEMO](/en/examples/interaction/label#update) | [API](/en/apis/behaviors/hover-activate-options) | | -| 'brush-select' | Extensions.BrushSelect | No | [DEMO](/en/examples/interaction/select/#brush) | [API](/en/apis/behaviors/brush-select-options) | | -| 'lasso-select' | Extensions.LassoSelect | No | [DEMO](/en/examples/interaction/select/#lasso) | [API](/en/apis/behaviors/lasso-select-options) | | -| 'create-edge' | Extensions.CreateEdge | No | [DEMO](/en/examples/interaction/createEdge/#createEdgeByDragging) | [API](/en/apis/behaviors/create-edge-options) | | -| 'shortcuts-call' | Extensions.ShortcutsCall | No | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | [API](/en/apis/behaviors/shortcuts-call-options) | | -| 'scroll-canvas' | Extensions.ScrollCanvas | No | [DEMO](/en/examples/interaction/shortcutsCall/#shortcuts-fitView) | [API](/en/apis/behaviors/scroll-canvas-options) | | -| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/orbit-canvas3-d-options) | available only when renderer | -| 'track-canvas-3d' | Extensions.TrackCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/track-canvas3-d-options) | available only when renderer | -| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/zoom-canvas3-d-options) | available only when renderer | - -### 5. layouts - -| type | Import from | Registered by Default | Demo | API | Note | -| :-------------- | :----------------------------- | :-------------------- | :----------------------------------------------------------- | :--------------------------------------------------- | :--- | -| 'force' | Extensions.ForceLayout | ✅ Yes | [DEMO](/en/examples/net/forceDirected/#basicForce) | [API](/en/apis/layout/force-layout-options) | | -| 'grid' | Extensions.GridLayout | ✅ Yes | [DEMO](/en/examples/net/gridLayout/#grid) | [API](/en/apis/layout/grid-layout-options) | | -| 'circular' | Extensions.CircularLayout | ✅ Yes | [DEMO](/en/examples/net/circular/#circular) | [API](/en/apis/layout/circular-layout-options) | | -| 'concentric' | Extensions.ConcentricLayout | ✅ Yes | [DEMO](/en/examples/net/concentricLayout/#basicConcentric) | [API](/en/apis/layout/concentric-layout-options) | | -| 'random' | Extensions.RandomLayout | No | | [API]() | | -| 'mds' | Extensions.MDSLayout | No | [DEMO](/en/examples/net/mdsLayout/#basicMDS) | [API](/en/apis/layout/mds-layout-options) | | -| 'radial' | Extensions.RadialLayout | No | [DEMO](/en/examples/net/radialLayout/#basicRadial) | [API](/en/apis/layout/radial-layout-options) | | -| 'fruchterman' | Extensions.FruchtermanLayout | No | [DEMO](/en/examples/net/furchtermanLayout/#basicFruchterman) | [API](/en/apis/layout/fruchterman-layout-options) | | -| 'd3-force' | Extensions.D3ForceLayout | No | | [API](/en/apis/layout/d3-force-layout-options) | | -| 'force-atlas-2' | Extensions.ForceAtlas2Layout | No | [DEMO](/en/examples/net/forceDirected/#basicFA2) | [API](/en/apis/layout/force-atlas2-layout-options) | | -| 'dagre' | Extensions.DagreLayout | No | [DEMO](/en/examples/net/dagreFlow/#dagre) | [API](/en/apis/layout/dagre-layout-options) | | -| 'comboCombined' | Extensions.ComboCombinedLayout | No | [DEMO](/en/examples/net/comboLayout/#comboCombined) | [API](/en/apis/layout/combo-combined-layout-options) | | -| 'compactBox' | Extensions.compactBox | No | [DEMO](/en/examples/net/compactBox/#basicCompactBox) | [API](/en/apis/layout/compact-box-layout-options) | | -| 'dendrogram' | Extensions.compactBox | No | [DEMO](/en/examples/net/dendrogram/#basicDendrogramx) | [API](/en/apis/layout/dendrogram-layout-options) | | -| 'indented' | Extensions.compactBox | No | [DEMO](/en/examples/net/indented/#intendAlignTop) | [API](/en/apis/layout/indented-layout-options) | | -| 'mindmap' | Extensions.mindmap | No | [DEMO](/en/examples/net/mindmap/#hMindmap) | [API](/en/apis/layout/mindmap-layout-options) | | -| | - -### 6. plugins - -All built-in and custom plugins should inherit from Extensions.BasePlugin or other existing plugins. - -| type | Import from | Registered by Default | Demo | API | Note | -| :------------ | :--------------------- | :-------------------- | :----------------------------------------------------- | :-------------------------------------- | :-------------------------------- | -| 'toolbar' | Extensions.Toolbar | No | [DEMO](/en/examples/tool/toolbar/#toolbar) | [API](/en/apis/plugins/toolbar-config) | | -| 'tooltip' | Extensions.Tooltip | No | [DEMO](/en/examples/tool/tooltip/#tooltipPlugin) | [API](/en/apis/plugins/tooltip-config) | | -| 'minimap' | Extensions.Minimap | No | [DEMO](/en/examples/tool/minimap/#minimap) | [API](/en/apis/plugins/mini-map-config) | | -| 'grid' | Extensions.Grid | No | [DEMO](/en/examples/tool/grid/#default) | [API](/en/apis/plugins/grid-config) | | -| 'menu' | Extensions.Menu | No | [DEMO](/en/examples/tool/contextMenu/#contextMenu) | [API](/en/apis/plugins/menu-config) | | -| 'fisheye' | Extensions.Fisheye | No | [DEMO](/en/examples/tool/fisheye/#fisheye) | [API](/en/apis/plugins/fisheye-config) | | -| 'legend' | Extensions.Legend | No | [DEMO](/en/examples/tool/legend/#legend) | [API](/en/apis/plugins/legend-config) | | -| 'timebar' | Extensions.Timebar | No | [DEMO](/en/examples/tool/timebar/#timebar-time) | [API](/en/apis/plugins/time-bar) | | -| 'hull' | Extensions.Hull | No | [DEMO](/en/examples/tool/hull/#hull) | [API](/en/apis/plugins/hull) | | -| 'snapline' | Extensions.Snapline | No | [DEMO](/en/examples/tool/snapline/#snapline) | [API](/en/apis/plugins/snapline) | | -| 'watermarker' | Extensions.WaterMarker | No | [DEMO](/en/examples/tool/watermarker/#textWaterMarker) | [API](/en/apis/plugins/water-marker) | Supports images or multiple texts | diff --git a/packages/site/docs/manual/customize/overview.zh.md b/packages/site/docs/manual/customize/overview.zh.md deleted file mode 100644 index b9b27160866..00000000000 --- a/packages/site/docs/manual/customize/overview.zh.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 概述 -order: 0 ---- - -G6 提供了自由的扩展机制，除了 Graph 本身以外，其他能力都是 G6 的“扩展（Extensions）”。G6 5.0 的扩展分类为： - -- 节点 -- 边 -- combo -- 数据转换器 -- 交互 -- 布局算法 -- 插件 -- 主题 - -为了减少包体积，G6 5.0 采用了按需加载的方式，只有在使用到某个扩展时才会引入对应的代码，以引入节点扩展为例： - -```js -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; - -/** - * 扩展 Graph，注册需要使用的内置功能，第二个参数是注册表 - */ -const Graph = extend(BaseGraph, { - nodes: { - 'custom-node': Extensions.RectNode, - }, -}); - -// 使用扩展后的类进行实例化 -const graph = new Graph({ - node: { - type: 'custom-edge', - }, -}); -``` - -:::warning{title=注意} -除了默认注册的扩展，其他扩展都需要通过 `extend` 方法注册到 Graph 上后才能使用 -::: - -## 内置的扩展 - -### 1. 节点（nodes） - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :--------------- | :----------------------- | :----------- | :------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :--------------------------------- | -| 'circle-node' | Extensions.CircleNode | ✅ 是 | [DEMO](/zh/examples/item/defaultNodes/#circle) | [API](/zh/apis/item/node/circle-node) | | -| 'rect-node' | Extensions.RectNode | ✅ 是 | [矩形 DEMO](/zh/examples/item/defaultNodes/#rect)，[圆角矩形 DEMO](/zh/examples/item/defaultNodes/#radiusRect) | [API](/zh/apis/item/node/circle-node) | | -| 'image-node' | Extensions.ImageNode | ✅ 是 | [DEMO](/zh/examples/item/defaultNodes/#image) | [API](/zh/apis/item/node/image-node) | | -| 'donut-node' | Extensions.DonutNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#donut) | [API](/zh/apis/item/node/donut-node) | | -| 'diamond-node' | Extensions.DiamondNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#diamond) | [API](/zh/apis/item/node/diamond-node) | | -| 'hexagon-node' | Extensions.HexagonNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#hexagon) | [API](/zh/apis/item/node/hexagon-node) | | -| 'star-node' | Extensions.StarNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#star) | [API](/zh/apis/item/node/star-node) | | -| 'triangle-node' | Extensions.TriangleNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#triangle) | [API](/zh/apis/item/node/triangle-node) | | -| 'ellipse-node' | Extensions.EllipseNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#ellipse) | [API](/zh/apis/item/node/ellipse-node) | | -| 'modelRect-node' | Extensions.ModelRectNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#modelRect) | [API](/zh/apis/item/node/model-rect-node) | | -| 'sphere-node' | Extensions.SphereNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#3d-node) | [API](/zh/apis/item/node/sphere-node) | 仅在 renderer: 'webgl-3d' 时可使用 | -| 'cube-node' | Extensions.CubeNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#3d-node) | [API](/zh/apis/item/node/cube-node) | 仅在 renderer: 'webgl-3d' 时可使用 | - -### 2. 边（edges） - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :---------------------- | :----------------------------- | :----------- | :------------------------------------------------------ | :---------------------------------------------- | :--- | -| 'line-edge' | Extensions.LineEdge | ✅ 是 | [DEMO](/zh/examples/item/defaultEdges/#line) | [API](/zh/apis/item/edge/line-edge) | | -| 'loop-edge' | Extensions.LoopEdge | ✅ 是 | [DEMO](/zh/examples/item/defaultEdges/#loop) | [API](/zh/apis/item/edge/loop-edge) | | -| 'quadratic-edge' | Extensions.QuadraticEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#quadratic) | [API](/zh/apis/item/edge/quadratic-edge) | | -| 'cubic-edge' | Extensions.CubicEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#cubic) | [API](/zh/apis/item/edge/cubic-edge) | | -| 'polyline-edge' | Extensions.PolylineEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#polyline) | [API](/zh/apis/item/edge/polyline-edge) | | -| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#horizontalCubic) | [API](/zh/apis/item/edge/cubic-horizontal-edge) | | -| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#verticalCubic) | [API](/zh/apis/item/edge/cubic-vertical-edge) | | - -### 3. Combo (combos) - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :------------- | :--------------------- | :----------- | :---------------------------------------------- | :-------------------------------------- | :--- | -| 'circle-combo' | Extensions.CircleCombo | ✅ 是 | [DEMO](/zh/examples/item/defaultCombos/#circle) | [API](/zh/apis/item/combo/circle-combo) | | -| 'rect-combo' | Extensions.RectCombo | ✅ 是 | [DEMO](/zh/examples/item/defaultCombos/#rect) | [API](/zh/apis/item/combo/rect-combo) | | - -### 4. 数据转换器 (transforms) - -用于处理数据，在原始数据输入图后被调用。若有多个，按其配置的数组顺序执行）。 - -| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 | -| :------------------ | :------------------------- | :----------- | :--- | :--- | -| 'transform-v4-data' | Extensions.TransformV4Data | ✅ 是 | | | -| 'map-node-size' | Extensions.MapNodeSize | ✅ 是 | | | - -### 5. 交互 (behaviors) - -所有内置、自定义交互应当继承 `Extensions.BaseBehavior` 或其他已有的交互。 - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :---------------------- | :----------------------------- | :----------- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------- | -| 'drag-canvas' | Extensions.DragCanvas | ✅ 是 | [DEMO](/zh/examples/interaction/moveCanvas/#dragCanvas) | [API](/zh/apis/behaviors/drag-canvas-options) | | -| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ 是 | [DEMO](/zh/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/zh/apis/behaviors/zoom-canvas-options) | | -| 'drag-node' | Extensions.DragNode | ✅ 是 | [DEMO](/zh/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/zh/apis/behaviors/drag-node-options) | | -| 'drag-combo' | Extensions.DragCombo | ✅ 是 | [DEMO](/zh/examples/net/comboLayout/#comboCombined) | [API](/zh/apis/behaviors/drag-combo-options) | | -| 'click-select' | Extensions.ClickSelect | ✅ 是 | [DEMO](/zh/examples/interaction/select/#click) | [API](/zh/apis/behaviors/click-select-options) | | -| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ 是 | [DEMO](/zh/examples/interaction/combo/#circle) | [API](/zh/apis/behaviors/collapse-expand-combo-options) | | -| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ 是 | [DEMO](/zh/examples/net/dendrogram/#basicDendrogram) | [API](/zh/apis/behaviors/collapse-expand-tree-options) | | -| 'activate-relations' | Extensions.ActivateRelations | 否 | [DEMO](/zh/examples/interaction/highlight/#activateRelations) | [API](/zh/apis/behaviors/activate-relations-options) | -| 'hover-activate' | Extensions.HoverActivate | 否 | [DEMO](/zh/examples/interaction/label#update) | [API](/zh/apis/behaviors/hover-activate-options) | | -| 'brush-select' | Extensions.BrushSelect | 否 | [DEMO](/zh/examples/interaction/select/#brush) | [API](/zh/apis/behaviors/brush-select-options) | | -| 'lasso-select' | Extensions.LassoSelect | 否 | [DEMO](/zh/examples/interaction/select/#lasso) | [API](/zh/apis/behaviors/lasso-select-options) | | -| 'create-edge' | Extensions.CreateEdge | 否 | [DEMO](/zh/examples/interaction/createEdge/#createEdgeByDragging) | [API](/zh/apis/behaviors/create-edge-options) | | -| 'shortcuts-call' | Extensions.ShortcutsCall | 否 | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | [API](/zh/apis/behaviors/shortcuts-call-options) | | -| 'scroll-canvas' | Extensions.ScrollCanvas | 否 | [DEMO](/zh/examples/interaction/shortcutsCall/#shortcuts-fitView) | [API](/zh/apis/behaviors/scroll-canvas-options) | | -| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/orbit-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 | -| 'track-canvas-3d' | Extensions.TrackCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/track-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 | -| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/zoom-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 | - -### 5. 布局算法 (layouts) - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :-------------- | :----------------------------- | :----------- | :----------------------------------------------------------- | :--------------------------------------------------- | :--- | -| 'force' | Extensions.ForceLayout | ✅ 是 | [DEMO](/zh/examples/net/forceDirected/#basicForce) | [API](/zh/apis/layout/force-layout-options) | | -| 'grid' | Extensions.GridLayout | ✅ 是 | [DEMO](/zh/examples/net/gridLayout/#grid) | [API](/zh/apis/layout/grid-layout-options) | | -| 'circular' | Extensions.CircularLayout | ✅ 是 | [DEMO](/zh/examples/net/circular/#circular) | [API](/zh/apis/layout/circular-layout-options) | | -| 'concentric' | Extensions.ConcentricLayout | ✅ 是 | [DEMO](/zh/examples/net/concentricLayout/#basicConcentric) | [API](/zh/apis/layout/concentric-layout-options) | | -| 'random' | Extensions.RandomLayout | 否 | | [API]() | | -| 'mds' | Extensions.MDSLayout | 否 | [DEMO](/zh/examples/net/mdsLayout/#basicMDS) | [API](/zh/apis/layout/mds-layout-options) | | -| 'radial' | Extensions.RadialLayout | 否 | [DEMO](/zh/examples/net/radialLayout/#basicRadial) | [API](/zh/apis/layout/radial-layout-options) | | -| 'fruchterman' | Extensions.FruchtermanLayout | 否 | [DEMO](/zh/examples/net/furchtermanLayout/#basicFruchterman) | [API](/zh/apis/layout/fruchterman-layout-options) | | -| 'd3-force' | Extensions.D3ForceLayout | 否 | | [API](/zh/apis/layout/d3-force-layout-options) | | -| 'force-atlas-2' | Extensions.ForceAtlas2Layout | 否 | [DEMO](/zh/examples/net/forceDirected/#basicFA2) | [API](/zh/apis/layout/force-atlas2-layout-options) | | -| 'dagre' | Extensions.DagreLayout | 否 | [DEMO](/zh/examples/net/dagreFlow/#dagre) | [API](/zh/apis/layout/dagre-layout-options) | | -| 'comboCombined' | Extensions.ComboCombinedLayout | 否 | [DEMO](/zh/examples/net/comboLayout/#comboCombined) | [API](/zh/apis/layout/combo-combined-layout-options) | | -| 'compactBox' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/compactBox/#basicCompactBox) | [API](/zh/apis/layout/compact-box-layout-options) | | -| 'dendrogram' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/dendrogram/#basicDendrogramx) | [API](/zh/apis/layout/dendrogram-layout-options) | | -| 'indented' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/indented/#intendAlignTop) | [API](/zh/apis/layout/indented-layout-options) | | -| 'mindmap' | Extensions.mindmap | 否 | [DEMO](/zh/examples/net/mindmap/#hMindmap) | [API](/zh/apis/layout/mindmap-layout-options) | | - -### 6. 插件 (plugins) - -所有内置、自定义插件应当继承 `Extensions.BasePlugin` 或其他已有的插件。 - -| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 | -| :------------ | :--------------------- | :----------- | :----------------------------------------------------- | :-------------------------------------- | :--------------- | -| 'toolbar' | Extensions.Toolbar | 否 | [DEMO](/zh/examples/tool/toolbar/#toolbar) | [API](/zh/apis/plugins/toolbar-config) | | -| 'tooltip' | Extensions.Tooltip | 否 | [DEMO](/zh/examples/tool/tooltip/#tooltipPlugin) | [API](/zh/apis/plugins/tooltip-config) | | -| 'minimap' | Extensions.Minimap | 否 | [DEMO](/zh/examples/tool/minimap/#minimap) | [API](/zh/apis/plugins/mini-map-config) | | -| 'grid' | Extensions.Grid | 否 | [DEMO](/zh/examples/tool/grid/#default) | [API](/zh/apis/plugins/grid-config) | | -| 'menu' | Extensions.Menu | 否 | [DEMO](/zh/examples/tool/contextMenu/#contextMenu) | [API](/zh/apis/plugins/menu-config) | | -| 'fisheye' | Extensions.Fisheye | 否 | [DEMO](/zh/examples/tool/fisheye/#fisheye) | [API](/zh/apis/plugins/fisheye-config) | | -| 'legend' | Extensions.Legend | 否 | [DEMO](/zh/examples/tool/legend/#legend) | [API](/zh/apis/plugins/legend-config) | | -| 'timebar' | Extensions.Timebar | 否 | [DEMO](/zh/examples/tool/timebar/#timebar-time) | [API](/zh/apis/plugins/time-bar) | | -| 'hull' | Extensions.Hull | 否 | [DEMO](/zh/examples/tool/hull/#hull) | [API](/zh/apis/plugins/hull) | | -| 'snapline' | Extensions.Snapline | 否 | [DEMO](/zh/examples/tool/snapline/#snapline) | [API](/zh/apis/plugins/snapline) | | -| 'watermarker' | Extensions.WaterMarker | 否 | [DEMO](/zh/examples/tool/watermarker/#textWaterMarker) | [API](/zh/apis/plugins/water-marker) | 支持图片或多文本 | diff --git a/packages/site/docs/manual/customize/pluginExtension.en.md b/packages/site/docs/manual/customize/pluginExtension.en.md deleted file mode 100644 index 1f4ef976277..00000000000 --- a/packages/site/docs/manual/customize/pluginExtension.en.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Custom Plugin -order: 7 ---- - -Custom plugins by inheriting the [PluginBase](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/types/plugin.ts#L15) class. - -```ts -import { PluginBase } from '@antv/g6'; - -class CustomPlugin extends PluginBase { - // Override method - // Class method -} -``` - -## Override method - -### init - -**Type**: `() => void` - -Initialize the plugin, you need to call the `super.init()` method - -### getDefaultCfgs - -**Type**: `() => object` - -Get the default configuration item of the plugin - -### updateCfgs - -**Type**: `(cfgs: object) => void` - -Update the configuration item of the plugin, the parameter is the current configuration item - -### getEvents - -**Type**: `() => { [key in string]: string }` - -Get the event listener of the plugin - -For example, when the mouse enters the node, trigger the plugin class method `handleNodeMouseenter`: - -```typescript -getEvents() { - return { - 'node:mouseenter': this.handleNodeMouseenter, - }; -} -``` - -### destroy - -**Type**: `() => void` - -Destroy the plugin, you need to call the `super.destroy()` method - -## Example - -Here is an example of a simple plugin that creates a text label to display the number of nodes and edges in the current canvas. - -```ts -import { Graph as BaseGraph, PluginBase, extend } from '@antv/g6'; - -class Counter extends PluginBase { - private label = document.createElement('span'); - - private get container() { - if (typeof this.options.container === 'string') { - return document.querySelector(this.options.container); - } - return this.options.container; - } - - init(graph) { - super.init(graph); - // Add text label to DOM - this.container.appendChild(this.label); - // Set style - Object.assign(this.label.style, this.options.fontStyle); - this.updateCounter(); - } - - getDefaultCfgs() { - return { - key: 'counter' + Math.random(), - container: 'body', - fontStyle: { - color: '#000', - 'font-size': '12px', - }, - }; - } - - getEvents() { - return { - // Listen for node and edge add/remove events on the canvas - afteritemchange: this.updateCounter, - }; - } - - updateCounter() { - const { graph } = this; - this.label.innerHTML = `Nodes: ${graph.getAllNodesData().length}, Edges: ${graph.getAllEdgesData().length}`; - } -} - -const Graph = extend(BaseGraph, { - plugins: { - counter: Counter, - }, -}); - -const graph = new Graph({ - container: 'container', - width: 500, - height: 500, - // Enable counter plugin - plugins: [ - { - type: 'counter', - key: 'counter', - fontStyle: { color: 'red', 'font-size': '16px' }, - }, - ], -}); -``` diff --git a/packages/site/docs/manual/customize/pluginExtension.zh.md b/packages/site/docs/manual/customize/pluginExtension.zh.md deleted file mode 100644 index e18137a796f..00000000000 --- a/packages/site/docs/manual/customize/pluginExtension.zh.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 自定义插件 -order: 7 ---- - -通过继承 [PluginBase](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/types/plugin.ts#L15) 类来实现一个插件。 - -```ts -import { PluginBase } from '@antv/g6'; - -class CustomPlugin extends PluginBase { - // 覆写方法 - // 插件类方法 -} -``` - -## 覆写方法 - -### init - -**类型**：`() => void` - -初始化插件，需要调用 `super.init()` 方法 - -### getDefaultCfgs - -**类型**：`() => object` - -获取插件的默认配置项 - -### updateCfgs - -**类型**：`(cfgs: object) => void` - -更新插件的配置项，参数为当前配置项 - -### getEvents - -**类型**：`() => { [key in string]: string }` - -获取插件的事件监听器 - -例如当鼠标移入节点时，触发插件类方法 `handleNodeMouseenter`： - -```typescript -getEvents() { - return { - 'node:mouseenter': this.handleNodeMouseenter, - }; -} -``` - -### destroy - -**类型**：`() => void` - -销毁插件，需要调用 `super.destroy()` 方法 - -## 示例 - -这里以实现一个简单的插件为例，该插件创建一个文本标签，用于显示当前画布中的节点和边数量。 - -```ts -import { Graph as BaseGraph, PluginBase, extend } from '@antv/g6'; - -class Counter extends PluginBase { - private label = document.createElement('span'); - - private get container() { - if (typeof this.options.container === 'string') { - return document.querySelector(this.options.container); - } - return this.options.container; - } - - init(graph) { - super.init(graph); - // 将文本标签添加到 DOM 中 - this.container.appendChild(this.label); - // 设置样式 - Object.assign(this.label.style, this.options.fontStyle); - this.updateCounter(); - } - - getDefaultCfgs() { - return { - key: 'counter' + Math.random(), - container: 'body', - fontStyle: { - color: '#000', - 'font-size': '12px', - }, - }; - } - - getEvents() { - return { - // 监听画布上节点和边的增删事件 - afteritemchange: this.updateCounter, - }; - } - - updateCounter() { - const { graph } = this; - this.label.innerHTML = `节点数量：${graph.getAllNodesData().length}, 边数量：${graph.getAllEdgesData().length}`; - } -} - -const Graph = extend(BaseGraph, { - plugins: { - counter: Counter, - }, -}); - -const graph = new Graph({ - container: 'container', - width: 500, - height: 500, - // 启用 counter 插件 - plugins: [ - { - type: 'counter', - key: 'counter', - fontStyle: { color: 'red', 'font-size': '16px' }, - }, - ], -}); -``` diff --git a/packages/site/docs/manual/customize/themeExtension.en.md b/packages/site/docs/manual/customize/themeExtension.en.md deleted file mode 100644 index b756720f81d..00000000000 --- a/packages/site/docs/manual/customize/themeExtension.en.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Custom Theme Extension -order: 5 ---- - -G6 allows extension of existing themes. - -- **Theme** is responsible for defining the visual style of the diagram. -- **Theme Processor (ThemeSolver)** is a functional component responsible for generating the final theme style specifications based on the provided configuration. - -The following are examples of the two built-in topic processor types and their configuration options: - -| Features | SpecThemeSolver (Specification Theme Processor) | SubjectThemeSolver (Subject Theme Processor) | -| --------------------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| **Customization level** | Fine-grained, for specific components (such as nodes, edges) | Coarse-grained, overall chart theme | -| **Swatch Application** | Dynamically apply color swatches and styles based on data type | Apply basic colors and simplified swatch configurations | -| **Style Definition** | Define the visual style of each data type in detail | Unify the visual style of the overall theme | -| **Applicable scenarios** | Data-driven style customization, suitable for complex and specific visual needs | Theme style consistency, suitable for simple visual needs | -| **Difference** | Provides detailed customization capabilities, with different visual displays for different data segments | Provides macro theme adjustment capabilities, focusing on the overall appearance rather than details | -| **Configuration item type** | `SpecThemeCfg` | `SubjectThemeCfg` | - -
- -SpecThemeCfg - -```typescript -type SpecThemeCfg = { type: 'spec' } & SpecThemeSolverOptions; - -/** - * The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value. - */ -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -type SpecThemeSolverOptions = { - /** - * The built-in theme that the custom theme is based on, defaults to 'light' - */ - base: 'light' | 'dark'; - specification: { - [itemType: ITEM_TYPE]: { - /** - * The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification. - */ - dataTypeField: string; - /** - * Swatches - */ - palette: Palette; - /** - * Customize the style of the graphics corresponding to the color palette - */ - getStyleSets: (palette: Palette) => { - default: { - [shapeId: string]: ShapeStyle; - }; - [stateName: string]: { - [shapeId: string]: ShapeStyle; - }; - }; - }; - canvas?: { - /** - * Configuration of the canvas background color. If not configured, it will follow the default color of base. - */ - backgroundColor: string; - [cssName: string]: unknown; - }; - }; -}; -``` - -
- -
- -SubjectThemeCfg - -```typescript -type SubjectThemeCfg = { type: 'subject' } & SubjectThemeSolverOptions; - -/** - * The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value. - */ -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -type SubjectThemeSolverOptions = { - /** - * The built-in theme that the custom theme is based on, defaults to 'light' - */ - base: 'light' | 'dark'; - baseColor: string; - specification?: { - [itemType: ITEM_TYPE]: { - /** - * The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification. - */ - dataTypeField: string; - /** - * Swatches - */ - palette: Palette; - }; - canvas?: { - /** - * Configuration of the canvas background color. If not configured, it will follow the default color of base. - */ - backgroundColor: string; - [cssName: string]: unknown; - }; - }; -}; -``` - -
- -## Example - -Here we take the implementation of a simple theme as an example, and the theme tone is blue. - -```javascript -import { Graph } from '@antv/g6'; - -const graph = new Graph({ - theme: { - type: 'spec', - base: 'light', - specification: { - canvas: { - backgroundColor: '#f3faff', - }, - node: { - dataTypeField: 'cluster', - palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], - }, - }, - }, -}); -``` diff --git a/packages/site/docs/manual/customize/themeExtension.zh.md b/packages/site/docs/manual/customize/themeExtension.zh.md deleted file mode 100644 index 9d928c0d256..00000000000 --- a/packages/site/docs/manual/customize/themeExtension.zh.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: 自定义主题 -order: 5 ---- - -G6 允许扩展已有的主题。 - -- **主题（Theme）** 负责定义图的视觉样式。 -- **主题处理器（ThemeSolver）** 则是一个功能组件，负责根据提供的配置生成最终的主题样式规格。 - -以下是两种内置的主题处理器类型及其配置选项示例： - -| 特征 | SpecThemeSolver（规范主题处理器） | SubjectThemeSolver（主题主题处理器） | -| -------------- | ------------------------------------------------------ | ---------------------------------------------- | -| **定制层级** | 细粒度，针对具体组件（如节点、边） | 粗粒度，整体图表主题 | -| **色板应用** | 根据数据类型动态应用色板和样式 | 应用基础颜色及简化的色板配置 | -| **样式定义** | 详细定义每种数据类型的视觉样式 | 统一定义整体主题的视觉样式 | -| **适用场景** | 数据驱动的样式定制，适合复杂和具体的视觉需求 | 主题风格一致性，适合简单的视觉需求 | -| **区别** | 提供详尽的自定义能力，针对数据不同细分有不同的视觉展示 | 提供宏观的主题调整能力，着重于整体外观而非细节 | -| **配置项类型** | `SpecThemeCfg` | `SubjectThemeCfg` | - -
- -SpecThemeCfg - -```typescript -type SpecThemeCfg = { type: 'spec' } & SpecThemeSolverOptions; - -/** - * 色板的类型，可以是十六进制颜色字符串数组，也可以是对象形式 key 为数据类型名，value 为十六进制颜色值 - */ -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -type SpecThemeSolverOptions = { - /** - * 自定义主题基于的内置主题，默认为 'light' - */ - base: 'light' | 'dark'; - specification: { - [itemType: ITEM_TYPE]: { - /** - * 节点/边/ combo 的数据类型字段，例如节点根据 'cluster' 字段分类，则可指定 dataTypeField: 'cluster'，后续将根据此分类从色板中取色 - */ - dataTypeField: string; - /** - * 色板 - */ - palette: Palette; - /** - * 自定义色板对应图形的样式 - */ - getStyleSets: (palette: Palette) => { - default: { - [shapeId: string]: ShapeStyle; - }; - [stateName: string]: { - [shapeId: string]: ShapeStyle; - }; - }; - }; - canvas?: { - /** - * 画布背景色的配置，不配置则跟随 base 的默认色 - */ - backgroundColor: string; - [cssName: string]: unknown; - }; - }; -}; -``` - -
- -
- -SubjectThemeCfg - -```typescript -type SubjectThemeCfg = { type: 'subject' } & SubjectThemeSolverOptions; - -/** - * 色板的类型，可以是十六进制颜色字符串数组，也可以是对象形式 key 为数据类型名，value 为十六进制颜色值 - */ -type Palette = string[] | { [dataType: string]: string }; -type ITEM_TYPE = 'node' | 'edge' | 'combo'; -type SubjectThemeSolverOptions = { - /** - * 自定义主题基于的内置主题，默认为 'light' - */ - base: 'light' | 'dark'; - baseColor: string; - specification?: { - [itemType: ITEM_TYPE]: { - /** - * 节点/边/ combo 的数据类型字段，例如节点根据 'cluster' 字段分类，则可指定 dataTypeField: 'cluster'，后续将根据此分类从色板中取色 - */ - dataTypeField: string; - /** - * 色板 - */ - palette: Palette; - }; - canvas?: { - /** - * 画布背景色的配置，不配置则跟随 base 的默认色 - */ - backgroundColor: string; - [cssName: string]: unknown; - }; - }; -}; -``` - -
- -## 示例 - -这里以实现一个简单的主题为例，主题基调为蓝色。 - -```javascript -import { Graph } from '@antv/g6'; - -const graph = new Graph({ - theme: { - type: 'spec', - base: 'light', - specification: { - canvas: { - backgroundColor: '#f3faff', - }, - node: { - dataTypeField: 'cluster', - palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], - }, - }, - }, -}); -``` diff --git a/packages/site/docs/manual/customize/transformExtension.en.md b/packages/site/docs/manual/customize/transformExtension.en.md deleted file mode 100644 index 3a665bc0c57..00000000000 --- a/packages/site/docs/manual/customize/transformExtension.en.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Custom Transform Extension -order: 4 ---- - -> Before customizing the data processor, make sure you are familiar with G6 data flows and data structures. For relevant content, please refer to [Data Introduction Document](../../apis/data/DataIntro.zh.md). - -A custom data processor is essentially a function that is responsible for converting user data into a format that G6 can understand and process internally (inner data). - -**Type**: `CustomDataTransformFn` - -```typescript -type CustomDataTransformFn = ( - data: GraphDataChanges, - options: Record, - graphCore?: GraphCore, -) => GraphDataChanges; -``` - -`GraphDataChanges` is defined as follows: - -G6 will automatically divide data changes into three parts based on the type of operation: data to be added (`dataAdded`), updated (`dataUpdated`) and deleted (`dataRemoved`). - -```typescript -typeGraphData = { - nodes?: NodeUserModel[]; - edges?: EdgeUserModel[]; - combos?: ComboUserModel[]; -}; - -type GraphDataChanges = { - dataAdded: GraphData; - dataUpdated: GraphData; - dataRemoved: GraphData; -}; -``` - -Among them, the input data types refer to [NodeUserModel input data](./NodeUserModel.zh.md), [EdgeUserModel input data](./EdgeUserModel.zh.md) and [ComboUserModel input data](./ComboUserModel.zh.md) . - -Please ensure that the data returned by your processor strictly adheres to the `GraphDataChanges` type definition to ensure that the processor can be smoothly embedded in G6's data processing flow. - -## Example - -Here we take the implementation of a simple data processing as an example. The purpose of the data processor is to cluster the given node data. - -```typescript -const clusteringNodes = (dataAUR = {}, options = {}, graphCore) => { - const { dataAdded = {}, dataUpdated = {}, dataRemoved = {} } = dataAUR; - const handler = (data = {}, options = {}, core) => { - if (!Algorithm?.labelPropagation || !data.nodes?.length) return data; - const nodes = graphCore ? core.getAllNodes() : data.nodes; - const edges = graphCore ? core.getAllEdges() : data.edges; - const clusteredData = Algorithm.labelPropagation({ nodes, edges }, false); - clusteredData.clusters.forEach((cluster, i) => { - cluster.nodes.forEach((node) => { - node.data.cluster = `c${i}`; - }); - }); - return data; - }; - return { - dataAdded: handler(dataAdded, options, graphCore), - dataUpdated: handler(dataUpdated, options, graphCore), - dataRemoved: dataRemoved || {}, - }; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'clustering-node': clusteringNodes, - }, -}); - -const graph = new ExtGraph({ - // ...other configuration - transforms: [ - 'map-node-size', - { - type: 'clustering-node', - activeLifecycle: ['read', 'changeData'], - }, - ], -}); -``` diff --git a/packages/site/docs/manual/customize/transformExtension.zh.md b/packages/site/docs/manual/customize/transformExtension.zh.md deleted file mode 100644 index 022a6b2b9e9..00000000000 --- a/packages/site/docs/manual/customize/transformExtension.zh.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 自定义数据处理 -order: 4 ---- - -> 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](../../apis/data/DataIntro.zh.md)。 - -自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data)。 - -**类型**：`CustomDataTransformFn` - -```typescript -type CustomDataTransformFn = ( - data: GraphDataChanges, - options: Record, - graphCore?: GraphCore, -) => GraphDataChanges; -``` - -`GraphDataChanges` 定义如下： - -G6 会根据操作类型，将数据变更自动划分为三个部分：待添加（`dataAdded`）、更新（`dataUpdated`）和删除（`dataRemoved`）数据。 - -```typescript -type GraphData = { - nodes?: NodeUserModel[]; - edges?: EdgeUserModel[]; - combos?: ComboUserModel[]; -}; - -type GraphDataChanges = { - dataAdded: GraphData; - dataUpdated: GraphData; - dataRemoved: GraphData; -}; -``` - -其中，输入数据类型参考 [NodeUserModel 输入数据](./NodeUserModel.zh.md)，[EdgeUserModel 输入数据](./EdgeUserModel.zh.md) 和 [ComboUserModel 输入数据](./ComboUserModel.zh.md)。 - -请确保您的处理器返回的数据严格遵守 `GraphDataChanges` 类型定义，以保证处理器能顺利嵌入 G6 的数据处理流程中。 - -## 示例 - -这里以实现一个简单的数据处理为例，该数据处理器目的是对给定的节点数据进行聚类处理。 - -```typescript -const clusteringNodes = (dataAUR = {}, options = {}, graphCore) => { - const { dataAdded = {}, dataUpdated = {}, dataRemoved = {} } = dataAUR; - const handler = (data = {}, options = {}, core) => { - if (!Algorithm?.labelPropagation || !data.nodes?.length) return data; - const nodes = graphCore ? core.getAllNodes() : data.nodes; - const edges = graphCore ? core.getAllEdges() : data.edges; - const clusteredData = Algorithm.labelPropagation({ nodes, edges }, false); - clusteredData.clusters.forEach((cluster, i) => { - cluster.nodes.forEach((node) => { - node.data.cluster = `c${i}`; - }); - }); - return data; - }; - return { - dataAdded: handler(dataAdded, options, graphCore), - dataUpdated: handler(dataUpdated, options, graphCore), - dataRemoved: dataRemoved || {}, - }; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'clustering-node': clusteringNodes, - }, -}); - -const graph = new ExtGraph({ - // ...其他配置 - transforms: [ - 'map-node-size', - { - type: 'clustering-node', - activeLifecycle: ['read', 'changeData'], - }, - ], -}); -``` diff --git a/packages/site/docs/manual/faq.en.md b/packages/site/docs/manual/faq.en.md new file mode 100644 index 00000000000..29be0d4cc22 --- /dev/null +++ b/packages/site/docs/manual/faq.en.md @@ -0,0 +1,4 @@ +--- +title: FAQ +order: 6 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/faq.zh.md b/packages/site/docs/manual/faq.zh.md new file mode 100644 index 00000000000..55ca30dd32f --- /dev/null +++ b/packages/site/docs/manual/faq.zh.md @@ -0,0 +1,6 @@ +--- +title: 常见问题 +order: 6 +--- + +### Extension 和 Plugin 有什么区别？ \ No newline at end of file diff --git a/packages/site/docs/manual/feature.en.md b/packages/site/docs/manual/feature.en.md new file mode 100644 index 00000000000..3b99d1c8257 --- /dev/null +++ b/packages/site/docs/manual/feature.en.md @@ -0,0 +1,4 @@ +--- +title: Feature +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/feature.zh.md b/packages/site/docs/manual/feature.zh.md new file mode 100644 index 00000000000..1138ec11723 --- /dev/null +++ b/packages/site/docs/manual/feature.zh.md @@ -0,0 +1,4 @@ +--- +title: 特性 +order: 1 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/glossary.en.md b/packages/site/docs/manual/glossary.en.md new file mode 100644 index 00000000000..5aef1f0e1dc --- /dev/null +++ b/packages/site/docs/manual/glossary.en.md @@ -0,0 +1,4 @@ +--- +title: Glossary +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/glossary.zh.md b/packages/site/docs/manual/glossary.zh.md new file mode 100644 index 00000000000..494641ededa --- /dev/null +++ b/packages/site/docs/manual/glossary.zh.md @@ -0,0 +1,4 @@ +--- +title: 术语表 +order: 7 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/introduction.en.md b/packages/site/docs/manual/introduction.en.md index 6df4b25a957..d8ff9fbb849 100644 --- a/packages/site/docs/manual/introduction.en.md +++ b/packages/site/docs/manual/introduction.en.md @@ -2,84 +2,3 @@ title: Introduction order: 0 --- - -![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png) - -[![travis-ci](https://img.shields.io/travis/antvis/g6/master.svg)](https://travis-ci.org/antvis/g6) [![codecov](https://codecov.io/gh/antvis/G6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/G6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 'Percentage of issues still open') - -[中文 README](README.md) - -[G6](https://github.com/antvis/g6) is a graph visualization engine. It provides a set of basic mechanisms, help developers to build your own graph visualization analysis application or graph visualization modeling application. - - - -## 🎉 New G6 5.0 - -G6 is a professional graph visualization engine with the following features: - -- Easy to extend, support custom elements, interactions, layouts, renderers, etc. - - - Rich elements: built-in rich node and edge elements, free configuration, support custom - - Convenient components: optimize the built-in component functions and performance - - Support TreeShaking to reduce package size - - - -- New style and animation design specifications, support information layer display - - - -> Animation specification and information layer display [View original image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original) - -- Provide built-in light and dark themes, themes can be customized, and animation configuration is simple - - - -> Built-in theme and custom theme - -- High-performance layout, built-in 10+ commonly used graph layouts, support GPU, Rust parallel computing, and customizable layout -- Customizable interaction, built-in 10+ interactive behaviors, support custom interaction -- Developer friendly, providing complete TypeScript type support -- Runtime renderer switching, support Canvas, SVG, WebGL multiple rendering methods -- Support 3D large graph display - - - -> 3D large graph [View original image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original) - -Furthermore, elements, interactions, and layouts all have a highly scalable custom mechanism. - -## Contributing - -Please let us know what is your contribution and what problem you want to solve. Before submitting a PR, please make sure that you have submitted an [issue](https://github.com/antvis/g6/issues) and describe the bug or feature request. - -```bash -# Install dependencies - -$ pnpm install - -# Enter the g6 package directory from the project root directory -$ cd packages/g6 - -# Build -$ npm run build - -# Start the integration test demo -$ npm run dev - -# Lint -$ npm run lint - -# Lint fix -$ npm run fix - -# Run all unit tests -$ npm run test:integration - -# Run a single unit test: Modify the test file directory specified by the test:integration_one command in package.json, and then execute: -$ npm run test:integration_one -``` - -## License - -[MIT license](./LICENSE). diff --git a/packages/site/docs/manual/introduction.zh.md b/packages/site/docs/manual/introduction.zh.md index 1b58c9c9de4..07ac01a9dbf 100644 --- a/packages/site/docs/manual/introduction.zh.md +++ b/packages/site/docs/manual/introduction.zh.md @@ -2,84 +2,3 @@ title: 简介 order: 0 --- - -![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png) - -[![travis-ci](https://img.shields.io/travis/antvis/g6.svg)](https://travis-ci.org/antvis/g6) [![codecov](https://codecov.io/gh/antvis/G6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/G6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 'Percentage of issues still open') - -[English README](README.en-US.md) - -[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化能力。旨在为开发者提供一套简单易用、专业可靠、可高度定制的图可视化开发工具。 - - - -## 🎉 全新 G6 5.0 - -G6 作为一款专业的图可视化引擎，具有以下特性： - -- 易于扩展，支持自定义元素、交互、布局、渲染器等 - - - 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义 - - 便捷的组件：优化内置组件功能及性能 - - 支持 TreeShaking 减少包体积 - - - -- 全新样式和动画设计规范，支持信息分层显示 - - - -> 动画规范与信息分层 [查看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original) - -- 提供内置的亮色和暗色主题，主题可定制，动画配置简便 - - - -> 内置主题与自定义主题 - -- 高性能布局，内置 10+ 常用的图布局，支持 GPU、Rust 并行计算，并可自定义布局 -- 可定制交互，内置 10+ 交互行为，支持自定义交互 -- 开发者友好，提供完整 TypeScript 类型支持 -- 运行时渲染器切换，支持 Canvas、SVG、WebGL 多种渲染方式 -- 支持 3D 大图显示 - - - -> 3D 大图 [查看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original) - -除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。 - -## 参与贡献 - -请让我们知道您要解决或贡献什么，在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议 - -```bash -# 安装依赖 - -$ pnpm install - -# 从项目根目录进入到 g6 包文件目录下 -$ cd packages/g6 - -# 构建 -$ npm run build - -# 启动集成测试 demo -$ npm run dev - -# 测试 lint -$ npm run lint - -# 修复 lint -$ npm run fix - -# 运行所有单元测试 -$ npm run test:integration - -# 运行单个单元测试：修改 package.json 中 test:integration_one 命令指定的测试文件目录，然后执行： -$ npm run test:integration_one -``` - -## License - -[MIT license](./LICENSE). diff --git a/packages/site/docs/manual/quick-start.en.md b/packages/site/docs/manual/quick-start.en.md new file mode 100644 index 00000000000..250a187b53d --- /dev/null +++ b/packages/site/docs/manual/quick-start.en.md @@ -0,0 +1,4 @@ +--- +title: Quick Start +order: 2 +--- diff --git a/packages/site/docs/manual/quick-start.zh.md b/packages/site/docs/manual/quick-start.zh.md new file mode 100644 index 00000000000..9b796559296 --- /dev/null +++ b/packages/site/docs/manual/quick-start.zh.md @@ -0,0 +1,4 @@ +--- +title: 快速开始 +order: 2 +--- diff --git a/packages/site/docs/manual/tutorial/animation.en.md b/packages/site/docs/manual/tutorial/animation.en.md deleted file mode 100644 index 67bb1a9d3b3..00000000000 --- a/packages/site/docs/manual/tutorial/animation.en.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Animation* -order: 6 ---- - -[Animation Configuration DEMO](/examples/scatter/changePosition/#itemAnimates) - -G6 5.0 provides a standardized way to describe animations. You can configure animations for different elements in different scenarios when instantiating the graph. You can specify the `animates` field in the `node` / `edge` / `combo` field of the graph configuration mentioned above: - -```typescript -const graph = new Graph({ - node: { - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } -}) -``` - -Or use the functional mapping method for `node` / `edge` / `combo`: - -```typescript -const graph = new Graph({ - node: model => { - const { id, data } = model - return { - id, - data: { - ...data, - // ...Other style configurations - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } - } - } -}) -``` - -We have standardized the animation into five scenarios that occur at different times for different shapes: buildIn, buildOut, update (data/state update), show (appearance, relative to hide), and hide (hide). For each scenario, you can specify different animations for different shapes and fields, and you can also specify the animation configuration and execution order. For example, the following code specifies various animations for different shapes during updates: - -```typescript -update: [ - { - // Animate the entire node (shapeId: 'group') when x and y change - fields: ['x', 'y'], - shapeId: 'group', - duration: 500, - }, - { - // Animate the opacity of haloShape when the selected or active state changes - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - duration: 500, - }, - // Animate the fill and r of the keyShape in the order specified by the 'order' field, achieving sequential animation effects - { - fields: ['fill'], - shapeId: 'keyShape', - order: 0, - }, - { - fields: ['r'], - shapeId: 'keyShape', - order: 1, - }, -]; -``` diff --git a/packages/site/docs/manual/tutorial/animation.zh.md b/packages/site/docs/manual/tutorial/animation.zh.md deleted file mode 100644 index f7dca6d5312..00000000000 --- a/packages/site/docs/manual/tutorial/animation.zh.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 动画 -order: 6 ---- - -[动画配置 DEMO](/examples/scatter/changePosition/#itemAnimates) - -G6 5.0 提供了规范化的动画描述方式，您可以在实例化图时，为各个元素配置不同场景下的动画。您可以在上面介绍的 graph 配置的 `node` / `edge` / `combo` 字段中指定 `animates` 字段： - -```typescript -const graph = new Graph({ - node: { - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } -}) -``` - -或 `node` / `edge` / `combo` 的函数式映射方式： - -```typescript -const graph = new Graph({ - node: model => { - const { id, data } = model - return { - id, - data: { - ...data, - // ... 其他样式配置 - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } - } - } -}) -``` - -我们规范了动画的五个场景，发生在各个图形的不同时机：入场（buildId）、出场（buildOut）、update（数据/状态更新）、show（出现，相对于 hide）、hide（隐藏）。每个场景的可以为不同的图形、不同的字段指定动画，还可以指定动画的配置和执行顺序。例如，下面表达了指定各类更新时的各种图形的动画： - -```typescript -update: [ - { - // 整个节点（shapeId: 'group'）在 x、y 发生变化时，动画更新 - fields: ['x', 'y'], - shapeId: 'group', - duration: 500, - }, - { - // 在 selected 和 active 状态变化导致的 haloShape opacity 变化时，使 opacity 带动画地更新 - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - duration: 500, - }, - // 当 keyShape 的 fill、r 同时发生变化时，按照 order 指定的顺序带动画地更新，可以实现依次动画的效果 - { - fields: ['fill'], - shapeId: 'keyShape', - order: 0, - }, - { - fields: ['r'], - shapeId: 'keyShape', - order: 1, - }, -]; -``` diff --git a/packages/site/docs/manual/tutorial/behavior.en.md b/packages/site/docs/manual/tutorial/behavior.en.md deleted file mode 100644 index 886d8cfe96d..00000000000 --- a/packages/site/docs/manual/tutorial/behavior.en.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Interaction Behavior -order: 4 ---- - -G6 encapsulates a series of interaction methods for users to use directly. This article will add simple interactions to the **Tutorial example**: clicking on nodes, clicking on edges, selecting nodes by dragging a box, zooming the canvas, and dragging the canvas. The target effect for this section is as follows: - -img - -> Figure 1: Interaction effects of the Tutorial example. - -## Basic Concepts - -### Interaction Behaviors - -The interaction behaviors in G6. G6 provides a series of **built-in** interaction behaviors that users can use directly. Essentially, these behaviors can be activated with a single click: - -- `drag-canvas`: Drags the canvas. -- `zoom-canvas`: Zooms the canvas. - -For more information, see [Interaction Behaviors](/apis/behaviors/activate-relations-options). - -### Interaction Modes - -Modes are the management mechanism for interaction behaviors in G6. A mode is a combination of multiple interaction behaviors and allows users to manage these behaviors by switching different modes. Due to the complexity of this concept, readers do not need to understand it in depth in this tutorial. For more information, see [Interaction Modes](/apis/graph/i-graph). - -### Interaction States - -States are the state machine mechanism in G6. Users can set different states for elements (nodes/edges) in the graph and define different styles for these states. When the state changes, G6 automatically updates the style of the elements. For example, you can set the state `'click'` of a node to `true` or `false`, and set the style of the node in the `'click'` state to have a bold border. When the `'click'` state is switched to `true`, the border of the node becomes bold. When the `'click'` state is switched to `false`, the style of the node returns to the default state. The following usage examples will provide specific illustrations. - -## Usage Method - -### Dragging and Zooming - Built-in Interaction Behaviors - -Using the built-in behaviors in G6 is very simple. You only need to configure `modes` when instantiating the graph. To manage bundle size, some built-in interactions are not registered to the Graph instance in advance, and need to be registered as follows: - -```javascript -const { Graph: BaseGraph, extend, Extensions } = G6; -const Graph = extend(BaseGraph, { - behaviors: { - // 'brush-select' is a built-in interaction, it is not registered in advance and needs to be imported from Extensions and registered as follows: - 'brush-select': Extensions.BrushSelect, - }, -}); -``` - -You can view all the built-in interactions in [Interaction Behaviors](/apis/behaviors/activate-relations-options). Apart from the interactions that are registered in advance, other interactions need to be registered using the above method. - -```javascript -// Pre-registered interactions -{ - 'drag-canvas': DragCanvas, // Drag the canvas - 'zoom-canvas': ZoomCanvas, // Zoom the canvas - 'drag-node': DragNode, // Drag nodes - 'drag-combo': DragCombo, // Drag combos - 'collapse-expand-combo': CollapseExpandCombo, // Expand/collapse combos - 'collapse-expand-tree': CollapseExpandTree, // Expand/collapse subtree - 'click-select': ClickSelect, // Click to select -} -``` - -```javascript -// Note that the Graph returned by extend is used here -const graph = new Graph({ - // ...Other configurations - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'click-select', 'brush-select'], - // Allow dragging canvas, zooming canvas, dragging nodes, clicking to select nodes, and brushing to select nodes - }, -}); -``` - -In addition to using the built-in interaction names directly, you can also configure parameters for the behavior, such as the sensitivity of zooming the canvas and the maximum/minimum zoom level. For specific usage, see [Behavior](/apis/behaviors/zoom-canvas-options). - -The modes in the above code defines the `modes` of G6. `default` is the default mode, and other modes can also be allowed, such as the `edit` mode edit. Different modes allow different user behaviors. For example, the default mode allows dragging the canvas, while the edit mode does not allow dragging the canvas: - -```javascript -// Example explaining different modes -modes: { - default: ['drag-canvas'], - edit: [] -} -``` - -### Define the Interaction Styles - -Sometimes we want to change the element style to a specific style through interaction. As shown in Figure 1, the style changes when the mouse hovers over a node, clicks a node, or clicks an edge. This involves the concept of states in G6. In simple terms, whether `hover`, `click`, or any operation (can be a self-defined state name), can be called a state. Users can freely set the element style under different states. To achieve interactive style change, two steps are required: - -- Step 1: Set the element style under each state; -- Step 2: Listen to events and switch element states. - -#### Set the element style under each state - -When instantiating the graph, the `nodeState` and `edgeState` configurations can be used to configure the element styles under different states. G6 provides some preset state styles: 'selected', 'highlight', 'active', 'inactive', 'disable'. In the 'click-select' and 'brush-select' interactions, the default triggered state for nodes and edges is 'selected'. Therefore, even if `nodeState` and `edgeState` are not configured, we can see the selected state style response. If you need to customize the state style, you can configure `selectedState` as a custom string for 'click-select' and 'brush-select', and then configure the corresponding styles in the `nodeState` and `edgeState` configurations, for example: - -```javascript -const graph = new Graph({ - // ...Other configurations - // Node state styles - nodeState: { - // Custom state name - customstatename1: { - // Configure for different shapes - keyShape: { - lineWidth: 2, - stroke: 'red', - }, - labelShape: { - fontWeight: 500, - }, - }, - // Custom state name - customstatename2: { - keyShape: { - lineDash: [2, 2], - lineWidth: 4, - stroke: 'blue', - }, - }, - }, - // Configure edgeState similarly -}); -``` - -#### Listen to events and switch element states - -In addition to the built-in interactions, you can also call `graph.setItemState` to set the state of an element whenever needed. For example, when double-clicking a node: - -```javascript -graph.on('node:dblclick', (e) => { - graph.setItemState(e.itemId, 'customstatename1', true); -}); -graph.on('canvas:click', (e) => { - // Find the node IDs in the 'customstatename1' state - const stateNodeIds = graph.findIdByState('node', 'customstatename1', true); - // Batch cancel the state - graph.setItemState(stateNodeIds, 'customstatename1', false); -}); -``` - -All element listeners in G6 are mounted on the `graph` instance. In the code below, the graph object is an instance of Graph, and the `graph.on()` function listens for a specific event (`click`/`mouseenter`/`mouseleave`, etc.) on a certain type of element (node/edge). - -```javascript -// Listeners on graph -graph.on('ItemType:EventName', (e) => { - // do something -}); -``` - -## Complete Code - -Here is the complete code: - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -**⚠️ Note:** 
If you need to replace the data, please replace  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'` with the new data file address. diff --git a/packages/site/docs/manual/tutorial/behavior.zh.md b/packages/site/docs/manual/tutorial/behavior.zh.md deleted file mode 100644 index 5c8c332c845..00000000000 --- a/packages/site/docs/manual/tutorial/behavior.zh.md +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: 交互 -order: 4 ---- - -G6 封装了一系列交互方法，方便用户直接使用。本文将在上一节案例的基础上增加简单的交互：点击节点、点击边、框选节点、放缩画布、拖拽画布。本节目标效果如下： - -img - -> 图 1 交互效果 - -## 基本概念 - -### 交互行为 Behavior - -G6 中的交互行为。G6 **内置**了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为： - -- `drag-canvas`：拖拽画布； -- `zoom-canvas`：缩放画布。 - -更多详见：[交互行为 Behavior](/apis/behaviors/activate-relations-options) - -### 交互管理 Mode - -Mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 [交互模式 Mode](/apis/graph/i-graph)。 - -### 交互状态 State - -状态是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 `'click'` 为 `true` 或 `false`，并为节点设置 `'click'` 的样式为加粗节点边框。当 `'click'` 状态被切换为 `true` 时，节点的边框将会被加粗，`'click'` 状态被切换为 `false` 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。 - -## 使用方法 - -### 拖拽、缩放 —— 内置的交互行为 - -在 G6 中使用内置 Behavior 的方式非常简单，只需要在图实例化时配置 `modes`。为了包体积管理，部分内置交互没有提前注册到 Graph 上，需要如下注册方式： - -```javascript -const { Graph: BaseGraph, extend, Extensions } = G6; - -const Graph = extend(BaseGraph, { - behaviors: { - // 框选节点事内置交互，未提前注册，需要从 Extensions 中引入后如下注册： - 'brush-select': Extensions.BrushSelect, - }, -}); -``` - -所有的内置交互可以在 [交互行为 Behavior](/apis/behaviors/activate-relations-options) 查看，除了下面这戏鹅已经提前注册的交互，其他需要使用上面方式进行注册。 - -```javascript -// 已提前注册的交互 -{ - 'drag-canvas': DragCanvas, // 拖拽画布 - 'zoom-canvas': ZoomCanvas, // 缩放画布 - 'drag-node': DragNode, // 拖拽节点 - 'drag-combo': DragCombo, // 拖拽 Combo - 'collapse-expand-combo': CollapseExpandCombo, // 展开/收起 Combo - 'collapse-expand-tree': CollapseExpandTree, // 展开/收起子树 - 'click-select': ClickSelect, // 点击选择 -} -``` - -```javascript -// 注意此处使用的是 exnted 返回的 Graph -const graph = new Graph({ - // ...其他配置项 - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'click-select', 'brush-select'], // 允许拖拽画布、放缩画布、拖拽节点、点选节点、框选节点 - }, -}); -``` - -除了直接使用内置交互名称外，也可以为 Behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等，具体用法参见  [交互行为 Behavior](/apis/behaviors/zoom-canvas-options)。 - -上面代码中的 `modes` 定义了 G6 的模式，`default` 是默认的模式，还可以允许有其他的模式，比如：编辑模式 `edit` 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布： - -```javascript -// 举例解释不同模式 -modes: { - default: ['drag-canvas'], - edit: [] -} -``` - -### 定义交互状态样式 - -有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中状态的概念。简单地说，是否 `hover` 、`click` 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步： - -- Step 1: 设置各状态下的元素样式； -- Step 2: 监听事件并切换元素状态。 - -#### 设置各状态下的元素样式 - -在实例化图时，通过 `nodeState` 和 `edgeState` 两个配置项可以配置元素在不同状态下的样式。G6 预置了一些状态样式：'selected', 'highlight', 'active', 'inactive', 'disable'。在 'click-select' 和 'brush-select' 交互中默认触发的是节点和边的 'selected' 状态，因此在没有配置 `nodeState` 和 `edgeState` 的情况下，我们也可以看到有选中的状态样式响应。如果需要自定义状态样式，可以为 'click-select' 和 'brush-select' 配置 `selectedState` 为自定义的字符串，然后在图配置的 `nodeState` 和 `edgeState` 中配置对应的样式，例如： - -```javascript -const graph = new Graph({ - // ...其他配置项 - // 节点状态样式 - nodeState: { - // 自定义的状态名称 - customstatename1: { - // 针对不同的图形进行配置 - keyShape: { - lineWidth: 2, - stroke: 'red', - }, - labelShape: { - fontWeight: 500, - }, - }, - // 自定义的状态名称 - customstatename2: { - keyShape: { - lineDash: [2, 2], - lineWidth: 4, - stroke: 'blue', - }, - }, - }, - // edgeState 同理 -}); -``` - -#### 监听事件并切换元素状态 - -除了内置的交互，您也可以在任意需要的使用调用 `graph.setItemState` 来设置元素的状态，例如在双击节点时： - -```javascript -graph.on('node:dblclick', (e) => { - graph.setItemState(e.itemId, 'customstatename1', true); -}); -graph.on('canvas:click', (e) => { - // 找到所有 customstatename1 状态下的节点 id - const stateNodeIds = graph.findIdByState('node', 'customstatename1', true); - // 批量取消状态 - graph.setItemState(stateNodeIds, 'customstatename1', false); -}); -``` - -G6 中所有元素监听都挂载在图实例上，如下代码中的 `graph` 对象是 Graph 的实例，`graph.on()`  函数监听了某元素类型（`node` / `edge`）的某种事件（`click` / `mouseenter` / `mouseleave` / ...。 - -```javascript -// 在图实例 graph 上监听 -graph.on('元素类型:事件名', (e) => { - // do something -}); -``` - -## 完整代码 - -
-点击展开完整代码 - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -
- -:::info{title=注意} -若需更换数据，请替换  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'`  为实际的数据文件地址。 -::: diff --git a/packages/site/docs/manual/tutorial/elements.en.md b/packages/site/docs/manual/tutorial/elements.en.md deleted file mode 100644 index d4787abe3da..00000000000 --- a/packages/site/docs/manual/tutorial/elements.en.md +++ /dev/null @@ -1,528 +0,0 @@ ---- -title: Configure the Items -order: 2 ---- - -In this chapter, we have already drawn the graph of the **Tutorial example**, but the items and their labels look visually basic. In this article, we will beautify the items from the previous chapter to achieve the following effects and introduce the properties and configuration methods of the items. - -img - -> Figure 1: The **\*Tutorial example** \*after configuring element properties. - -## Basic Concepts - -### Graph Items - -Graph items refer to the **nodes** `Node`, **edges** `Edge`, and _node groups_ `Combo` on the graph. G6 provides a series of [built-in nodes](/en/examples#item-defaultNodes) for users to choose from. - -## Element Properties - -Whether it is a node or an edge, their properties can be divided into two types: - -- **Graphic style properties**: Correspond to various styles in the canvas and can be changed when the element's state changes. -- **Other properties**: For example, the type (`type`), id (`id`), position (`x`, `y`) properties, which cannot be changed when the element's state changes. - -For example, when G6 sets a node to be hovered or clicked, it generally uses the Graph's set state API `graph.setItemState` in the event listener to put the node into a certain state, e.g. the selected state. At this time, the node should make certain style changes to respond to the selected state. This can only automatically change the **graphic style properties** of the node (such as `fill` and `stroke` in `keyShape`), and the other properties (such as `type`) cannot be changed. If you need to change other properties, you need to update the data with `graph.updateData`. The **graphic style properties** are stored in the `xxxShape` object of the node/edge/combo's configuration, corresponding to the styles of different shapes. - -### Data Structure - -Taking the node element as an example, the data structure of its properties is as follows: - -```javascript -{ - id: 'node0', // The id of the element - data: { - x: 100, // The position of the node. If the graph does not configure a layout and all node data in the data has x and y information, this information will be used to draw the node's position. - y: 100, - type: 'circle-node', // The shape of the element. Compared to v4, it has an extra -node suffix. - label: 'node0' // The label text - keyShape: { // The style properties of the main shape - r: 20 // The size of the main shape. If it is a rect-node, it is controlled by width and height. - fill: '#000', // The fill color of the main shape - stroke: '#888', // The stroke color of the main shape - // ... // Other style properties of the main shape - }, - labelShape: { - positions: 'center', // The properties of the label, the position of the label in the element - text: 'node-xxx-label'// The text of the element's label. If not configured, it will be filled with data.label - fontSize: 12 // The style properties of the label, the font size of the text - // ... // Other style properties of the label - } - // ..., // Other properties - }, -} - -``` - -The data structure of the edge item is similar to that of the node item, except that it has `source` and `target` fields at the same level as `id` and `data`, which represent the ids of the start and end nodes. - -Refining the visual requirements of the **Tutorial example** in Figure 1, we need to achieve the following: - -- Visual effects: - - R1: Set different node types, `'circle-node'`, `'rect-node'`, `'triangle-node'`. - - R2: Draw the icons and badges of the nodes, corresponding properties: `iconShape`, `badgeShapes`. - - R3: Arrows on the edges, corresponding to the edge property: `keyShape.endArrow`. -- Data and visual mapping: - - R5: Cluster the nodes and map the colors of the nodes based on categories, corresponding property: `keyShape.fill`. - - R6: Map the size of the nodes based on their degree, corresponding property: `keyShape.r`. - -## Properties Configuration - -In G6, there are multiple ways to configure element properties based on different scenario requirements. Here, we introduce the configuration of element properties when instantiating a graph. Compared to v4, where only static global properties can be configured on the graph, v5 supports JSON Spec attribute mapping and function mapping configuration methods: - -### 1.JSON Spec Configuration when Instantiating the Graph - -**Scenario**: Uniform configuration of properties for all nodes and edges. - -**Usage**: Use two configuration options of the graph: - -- `node`: The **graphic style properties** and **other properties** of the nodes in the default state. -- `edge`: The **graphic style properties** and **other properties** of the edges in the default state. - -```javascript -const graph = new Graph({ - // ... // Other configurations of the graph - // Configuration for the graphic style and other properties of nodes in the default state - node: { - type: 'circle-node', - keyShape: { - r: 16, // Node size - fill: '#4089FF', // Node fill color - }, - // Configuration for the label text on the nodes - labelShape: { - // All styles support the following mapping, which means that based on the label field in the data model.data, use the result returned by formatter - text: { - fields: ['label'], - formatter: (model) => model.data.label, - }, - fill: '#000', // Node label text color - }, - // Animation configuration for nodes - animates: { - // When data/state updates - update: [ - { - shapeId: 'haloShape', // Background halo shape - states: ['selected', 'active'], // When in the selected and active states change - fields: ['opacity'], // Animated change in opacity - }, - { - shapeId: 'keyShape', // Main shape - states: ['selected', 'active'], // When in the selected and active states change - fields: ['lineWidth'], // Animated change in edge thickness - }, - ], - }, - }, - // Configuration for the style (style) and other properties of edges in the default state - edge: { - // ... // Other configurations for edges - // Edge style configuration - type: 'line-edge', - keyShape: { - opacity: 0.6, // Opacity of the main shape of the edge - stroke: 'grey', // Stroke color of the main shape of the edge - }, - // Configuration for the label text on the edges - labelShape: { - autoRotate: true, // Rotate the label text on the edge based on the direction of the edge - }, - // Animation configuration for edges - animates: { - // When data/state updates - update: [ - { - shapeId: 'haloShape', // Background halo shape - states: ['selected', 'active'], // When in the selected and active states change - fields: ['opacity'], // Animated change in opacity - }, - { - shapeId: 'keyShape', // Main shape - states: ['selected', 'active'], // When in the selected and active states change - fields: ['lineWidth'], // Animated change in edge thickness - }, - ], - }, - }, -}); -``` - -### 2. Function Mapping Configuration for Instantiating a Graph - -**Scenario**: Different nodes/edges can have different personalized configurations. More flexibility. - -**Usage:** Before looking at the function mapping code, we know that each node in the original data is relatively simple: - -``` - { "id": "0", "data": { "label": "0" } }, - { "id": "1", "data": { "label": "1" } }, -``` - -Generally, the larger the degree (number of one-hop neighbors) of a node in a graph, the more important it is. We can use node size to express this information. At the same time, if the degree is large enough, we can use more additional graphics to highlight its status. We can calculate the degree of the nodes in advance through a data processor: - -```javascript -const degreeCalculator = (data, options, userGraphCore) => { - const { edges, nodes } = data; - const degreeMap = new Map(); - edges.forEach(({ source, target }) => { - degreeMap.set(source, (degreeMap.get(source) || 0) + 1); - degreeMap.set(target, (degreeMap.get(target) || 0) + 1); - }); - nodes.forEach((node) => { - node.data.degree = degreeMap.get(node.id) || 0; - }); - return data; -}; -``` - -In addition, we hope to use colors to represent the categories of nodes. If the data contains a field indicating the node category, we can use it directly. In this example, we use the clustering algorithm provided by @antv/algorithm to calculate the node clustering based on the graph structure. We also write it as a data processor: - -```javascript -const clusteringNodes = (data, options = {}, userGraphCore) => { - if (!Algorithm?.labelPropagation) return; - const clusteredData = Algorithm.louvain(data, false); - const clusterMap = new Map(); - clusteredData.clusters.forEach((cluster, i) => { - cluster.nodes.forEach((node) => { - clusterMap.set(node.id, `c${i}`); - }); - }); - data.nodes.forEach((node) => { - node.data.cluster = clusterMap.get(node.id); - }); - return data; -}; -``` - -Then register these data processors to the Graph in G6: - -```javascript -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; -const Graph = extend(BaseGraph, { - transforms: { - 'degree-calculator': degreeCalculator, - 'node-clustering': clusteringNodes, - }, - nodes: { - // Note that for package size management, G6 only registers circle-node and rect-node by default. Other built-in or custom node types need to be imported from Extensions and registered as follows - 'triangle-node': Extensions.TriangleNode, - }, -}); -``` - -In this way, when instantiating the graph, we can configure this data processor on the graph. When data enters the Graph, it will produce data with the degree information through this data processor: - -```javascript -const graph = new Graph({ - // Note that the extended Graph is used here - // ... Other graph configurations - transforms: [ - 'transform-v4-data', // Built-in converter that converts v4 formatted data to v5 format - 'degree-calculator', // Custom data processor that calculates the degree of nodes and stores it in data.degree - 'node-clustering', // Custom data processor that stores clustering results in the data.cluster field of nodes for the theme module to use later - { - // Built-in node size mapper that maps the value of the field (the degree field generated by the previous processor here) specified by field to the node size, and normalizes the node size to between 16 and 60 - type: 'map-node-size', - field: 'degree', - range: [16, 60], - }, - ], -}); -``` - -Now, after the data enters the Graph, it will pass through the data processors specified by `transforms` one by one. Each node of the internal data produced in the internal flow will have some calculated fields, such as: - -``` - { "id": "0", "data": { "label": "0", degree: 1, cluster: 'c0' } }, - { "id": "1", "data": { "label": "1", degree: 3, cluster: 'c4' } }, -``` - -Then, in the function mapping configuration of the node, we can use these field values: - -```javascript -const graph = new Graph({ - // ... other configurations - // transforms: ... - // edge: ... - // node configuration in the graph configuration - node: (model) => { - // model is the user input data for the node, transformed and processed internally by G6 - const { id, data } = model; - // Use different node types based on the degree field in the data - let type = 'circle-node'; - if (data.degree === 2) type = 'rect-node'; - else if (data.degree === 1) type = 'triangle-node'; - // Badge shapes - const badgeShapes = { - fontSize: 12, - lod: 0, - }; - // Add different badges based on the degree field - if (data.degree > 10) { - badgeShapes[0] = { - color: '#F86254', - text: 'Important', - position: 'rightTop', - }; - } - if (data.degree > 5) { - badgeShapes[1] = { - text: 'A', - textAlign: 'center', - color: '#EDB74B', - position: 'right', - }; - } - return { - id, - data: { - // Make sure to copy data here, otherwise other properties in the data may be lost - ...data, - type, - // Label shape style - labelShape: { - position: 'bottom', - text: id, - }, - // Label background style, if not undefined, a background shape will appear when there is text. More styling properties such as fill color, padding can be configured. - labelBackgroundShape: {}, - // Icon shape, nodes with degree < 2 do not display an icon - iconShape: - data.degree <= 2 - ? undefined - : { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - fill: '#fff', - lod: 0, - fontSize: data.keyShape.r - 4, - }, - // Badge shapes - badgeShapes, - // Animation configuration - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['selected', 'active'], - }, - ], - }, - }, - }; - }, -}); -``` - -In the above node mapping function, the degree field is used. Clusters can be used with the new theme module provided by G6 v5. All you need to do is to configure it on the graph: - -```typescript -const graph = new Graph({ - // ... other graph configurations - // transforms: ... - // node: ... - // edge: ... - // Theme configuration - theme: { - type: 'spec', - base: 'light', // Light theme - specification: { - node: { - // Node color mapping based on the data.cluster field - dataTypeField: 'cluster', - }, - }, - }, -}); -``` - -In the above code, we added four configurations when instantiating the graph: `transform`, `theme`, `node`, and `edge`. The result is shown below: - -img - -> Figure 3 - -As you can see, the nodes in the graph are rendered as circle, rectangle, and triangle based on their degrees. The sizes of the nodes are mapped to the degrees. The colors of the nodes are mapped to their categories. Similarly, we can also apply various styles mappings to the edges. I won't go into detail here. - -## Complete Code - -Here is the complete code: - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -**⚠️ Note:** 
If you need to replace the data, please replace  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'` with the new data file address. diff --git a/packages/site/docs/manual/tutorial/elements.zh.md b/packages/site/docs/manual/tutorial/elements.zh.md deleted file mode 100644 index 836befe8175..00000000000 --- a/packages/site/docs/manual/tutorial/elements.zh.md +++ /dev/null @@ -1,532 +0,0 @@ ---- -title: 元素及其配置 -order: 2 ---- - -图的元素特指图上的**节点** `Node` 、**边** `Edge` 和**节点分组** `Combo`。本文通过将上一章节中的元素设置成如下效果，介绍元素的属性、配置方法。 - -img - -> 图 1  元素属性配置后的效果 - -## 基本概念 - -### 图的元素 - -图的元素特指图上的**节点** `Node` 、**边** `Edge` 和**节点分组** `Combo`。G6 内置了一系列 [内置的节点](/examples#item-defaultNodes)，供用户自由选择。 - -## 元素的属性 - -不论是节点还是边，它们的属性分为两种： - -- **样式属性**：对应 Canvas 中的各种样式，在元素状态发生变化时，可以被改变； -- **其他属性**：例如图形类型（`type`）、id（`id`）、位置（`x`，`y`）一类在元素状态发生变化时不能被改变的属性。 - -例如，G6 设定 hover 或 click 节点时，一般会通过在事件监听中调用 Graph 的设置状态 API `graph.setItemState` 来使节点进入某个状态，e.g. 选中状态。此时节点应当让上一定的样式变化来让响应选中状态。这只能自动改变节点的**图形样式属性**（如 `keyShape` 中的 `fill`、`stroke` 等），**其他属性**（如 `type`  等）不能被改变。如果需要改变其他属性，需要更新数据 `graph.updateData`。**图形样式属性**存储在节点/边/ combo 的配置的 `xxxShape` 对象中，对应了不同图形的样式。 - -### 数据结构 - -以节点元素为例，其属性的数据结构如下： - -```javascript -{ - id: 'node0', // 元素的 id - data: { - x: 100, // 节点位置，若 graph 未配置 layout，且数据中所有的节点数据都有 x y 信息，则使用该信息绘制节点位置 - y: 100, - type: 'circle-node', // 元素的图形。相比于 v4 多了 -node 后缀 - label: 'node0' // 标签文字 - keyShape: { // 主图形的样式属性 - r: 20 // 主图形的大小，如果是 rect-node 则是 width、height 控制 - fill: '#000', // 主图形的填充色 - stroke: '#888', // 主图形的描边色 - // ... // 主图形的其他样式属性 - }, - labelShape: { - positions: 'center', // 标签的属性，标签在元素中的位置 - text: 'node-xxx-label'// 元素标签的文本，若不配置则使用 data.label 填充 - fontSize: 12 // 标签的样式属性，文字字体大小 - // ... // 标签的其他样式属性 - } - // ..., // 其他属性 - }, -} -``` - -边元素的属性数据结构与节点元素相似，只是和 `id` 及 `data` 同级的还有 `source` 和 `target` 字段，代表起始和终止节点的 `id`。
细化在图 1 中的视觉需求，我们需要完成： - -- 视觉效果： - - R1: 设置不同的节点类型，`'circle-node'`，`'rect-node'`，`'triangle-node'`； - - R2: 绘制节点的 icon 和徽标，对应属性：`iconShape`，`badgeShapes`； - - R3: 边上的箭头，对应边属性：`keyShape.endArrow`； -- 数据与视觉映射： - - R5: 将节点进行聚类，并根据类别映射节点的颜色，对应属性：`keyShape.fill`； - - R6: 根据节点的度树，映射到节点的大小上，对应属性：`keyShape.r` - -## 配置属性 - -在 G6 中，根据不同的场景需求，有多种配置元素属性的方式。这里，我们介绍在实例化图时进行元素的配置，相比于 v4 graph 上只能配置静态的全局属性，v5 支持了 JSON Spec 属性映射和函数映射的配置方式： - -### 1. 实例化图时的 JSON Spec 配置方式 - -**适用场景：** 所有节点统一的属性配置，所有边统一的属性配置。 - -**使用方式：** 使用图的两个配置项： - -- `node`：节点在默认状态下的**图形样式属性**和**其他属性**； -- `edge`：边在默认状态下的**图形样式属性**和**其他属性**。 - -```javascript -const graph = new Graph({ - // ... // 图的其他配置 - // 节点在默认状态下的图形样式配置和其他配置 - node: { - type: 'circle-node', - keyShape: { - r: 16, // 节点大小 - fill: '#4089FF', // 节点填充色 - } - // 节点上的标签文本配置 - labelShape: { - // 所有样式都支持如下的映射，表示根据数据 model.data 中的 label 字段，使用 formatter 返回的结果 - text: { - fields: ['label'], - formatter: model => model.data.label - } - fill: '#000', // 节点标签文字颜色 - }, - // 节点的动画配置 - animates: { - // 数据/状态更新时 - update: [{ - shapeId: 'haloShape', // 背景光晕图形 - states: ['selected', 'active'] // 在 selected 和 active 状态变更时 - fields: ['opacity'], // 在透明度变化时，带动画地变化 - }, { - shapeId: 'keyShape', // 主图形 - states: ['selected', 'active'] // 在 selected 和 active 状态变更时 - fields: ['lineWidth'], // 在描述边粗细变化时，带动画地变化 - }] - } - }, - // 边在默认状态下的样式配置（style）和其他配置 - edge: { - // ... // 边的其他配置 - // 边样式配置 - type: 'line-edge', - keyShape: { - opacity: 0.6, // 边主图形的透明度 - stroke: 'grey', // 边主图形描边颜色 - }, - // 边上的标签文本配置 - labelShape: { - autoRotate: true, // 边上的标签文本根据边的方向旋转 - }, - // 边的动画配置 - animates: { - // 数据/状态更新时 - update: [{ - shapeId: 'haloShape', // 背景光晕图形 - states: ['selected', 'active'] // 在 selected 和 active 状态变更时 - fields: ['opacity'], // 在透明度变化时，带动画地变化 - }, { - shapeId: 'keyShape', // 主图形 - states: ['selected', 'active'] // 在 selected 和 active 状态变更时 - fields: ['lineWidth'], // 在描述边粗细变化时，带动画地变化 - }] - } - }, -}); -``` - -### 2. 实例化图时的函数映射配置方式 - -**适用场景：** 不同节点/边可以有不同的个性化配置。更加灵活。 - -**使用方式：** - -在看函数映射代码之前，我们知道原始数据的每个节点比较简单： - -```json -[ - { "id": "0", "data": { "label": "0" } }, - { "id": "1", "data": { "label": "1" } } -] -``` - -一般图中度数（一跳邻居数量）越大的节点，越重要。我们可以用节点大小来表达这个信息。同时，若度数大到一定程度，还可以用更多额外的图形凸显其地位。我们可以通过数据处理器，提前计算节点的度数， - -```javascript -const degreeCalculator = (data, options, userGraphCore) => { - const { edges, nodes } = data; - const degreeMap = new Map(); - edges.forEach(({ source, target }) => { - degreeMap.set(source, (degreeMap.get(source) || 0) + 1); - degreeMap.set(target, (degreeMap.get(target) || 0) + 1); - }); - nodes.forEach((node) => { - node.data.degree = degreeMap.get(node.id) || 0; - }); - return data; -}; -``` - -另外，我们希望可以用颜色表示节点的类别，如果数据中有表示节点类别的字段，后续可以直接使用。在这个例子中，我们利用 @antv/algorithm 提供的聚类算法，根据图结构计算节点聚类。同样把它写成一个数据处理器： - -```javascript -const clusteringNodes = (data, options = {}, userGraphCore) => { - if (!Algorithm?.labelPropagation) return; - const clusteredData = Algorithm.louvain(data, false); - const clusterMap = new Map(); - clusteredData.clusters.forEach((cluster, i) => { - cluster.nodes.forEach((node) => { - clusterMap.set(node.id, `c${i}`); - }); - }); - data.nodes.forEach((node) => { - node.data.cluster = clusterMap.get(node.id); - }); - return data; -}; -``` - -然后这些数据处理器注册到 G6 的 Graph 中： - -```javascript -import { Graph as BaseGraph, extend, Extensions } from '@antv/g6'; -const Graph = extend(BaseGraph, { - transforms: { - 'degree-calculator': degreeCalculator, - 'node-clustering': clusteringNodes, - }, - nodes: { - // 需要注意，为包体积管理，G6 只默认注册了 circle-node 和 rect-node，其他内置或自定义节点类型需要从 Extensions 引入并通过如下方式注册 - 'triangle-node': Extensions.TriangleNode, - }, -}); -``` - -这样，我们就可以在实例化图的时候，将这个数据处理器配置到图上。当数据进入 Graph 时，将会通过该数据处理器产出带有 degree 信息的数据： - -```javascript -const graph = new Graph({ - // 注意这里使用的是 extend 返回的 Graph - // ... 其他 graph 配置 - transforms: [ - 'transform-v4-data', // 内置提供的转换器，将 v4 格式数据转换为 v5 格式 - 'degree-calculator', // 自定义的数据处理器，计算节点的度数存储到 data.degree 中 - 'node-clustering', // 自定义的数据处理器，将聚类结果存储到节点的 data.cluster 字段上，方便后续主题模块使用 - { - // 内置提供的节点大小映射器，将 field 指定的字段（这里指定了上一个处理器产生的 degree 字段）的值，映射到节点大小上，节点大小归一化到 16 ～ 60 - type: 'map-node-size', - field: 'degree', - range: [16, 60], - }, - ], -}); -``` - -现在，数据进入 Graph 后，将依次经过 `transform` 指定的数据处理器，产出的内部流转数据的每一个节点都会存在一些计算得出的字段，例如： - -```json -[ - { "id": "0", "data": { "label": "0", "degree": 1, "cluster": "c0" } }, - { "id": "1", "data": { "label": "1", "degree": 3, "cluster": "c4" } } -] -``` - -然后我们在节点的函数映射配置中，可以使用这些字段值： - -```javascript -const graph = new Graph({ - // ...其他配置项 - // transforms: ... - // edge: ... - // graph 配置项中的 node - node: (model) => { - // model 是该节点用户输入数据，在 transform 作用后的、在 G6 内部流转的数据 - const { id, data } = model; - // 根据数据中的 degree 字段，使用不同的节点类型 - let type = 'circle-node'; - if (data.degree === 2) type = 'rect-node'; - else if (data.degree === 1) type = 'triangle-node'; - - // 徽标图形 - const badgeShapes = { - fontSize: 12, - lod: 0, - }; - // 根据 degree 字段，增加不同的徽标 - if (data.degree > 10) { - badgeShapes[0] = { - color: '#F86254', - text: 'Important', - position: 'rightTop', - }; - } - if (data.degree > 5) { - badgeShapes[1] = { - text: 'A', - textAlign: 'center', - color: '#EDB74B', - position: 'right', - }; - } - - return { - id, - data: { - // 注意必须复制 data 到此处，否则可能丢失数据中的其他属性 - ...data, - type, - // 文本图形样式 - labelShape: { - position: 'bottom', - text: id, - }, - // 文本背景样式，不为 undefined 就代表在有文本时，出现背景图形。其中还可以配置更多的样式属性，例如 fill 填充色、padding 等 - labelBackgroundShape: {}, - // icon 图形，degree < 2 的节点不展示 icon - iconShape: - data.degree <= 2 - ? undefined - : { - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - fill: '#fff', - lod: 0, - fontSize: data.keyShape.r - 4, - }, - // 徽标图形 - badgeShapes, - // 动画配置 - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['selected', 'active'], - }, - ], - }, - }, - }; - }, -}); -``` - -在上面的函数映射中，使用了 degree。cluster 可以被使用的 v5 全新提供的主题模块 theme 中，只需要在 graph 上简单配置： - -```typescript -const graph = new Graph({ - // ... 其他图配置 - // transforms: ... - // node: ... - // edge: ... - // 主题配置 - theme: { - type: 'spec', - base: 'light', // 白色主题 - specification: { - node: { - // 节点颜色映射 data.cluster 字段 - dataTypeField: 'cluster', - }, - }, - }, -}); -``` - -以上，我们在图实例化时增加了四个配置：`transform`，`theme`，`node`，`edge`。运行结果如下： - -img - -> 图 3 - -可以看到，图中节点根据度数不同，被渲染成了圆形、矩形、三角形。且度数被映射到了节点大小上。颜色映射到了节点类别上。同理，我们也可以对边做各种样式映射的处理。这里不一一赘述。 - -## 完整代码 - -
-点击展开完整代码 - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -
- -:::info{title=注意} -若需更换数据，请替换  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'`  为实际的数据文件地址。 -::: diff --git a/packages/site/docs/manual/tutorial/epilog.en.md b/packages/site/docs/manual/tutorial/epilog.en.md deleted file mode 100644 index 0bbe43f14a1..00000000000 --- a/packages/site/docs/manual/tutorial/epilog.en.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Conclusion -order: 7 ---- - -Congratulations! You have successfully created a graph visualization application based on G6 and learned the following: - -- Basic rendering; -- Load remote data; -- Configure the graph and items; -- Utilize layout; -- Add interaction behavior; -- Add tools. - -[Complete Code of Tutorial Demo](https://codesandbox.io/s/g6-v5-tutorial-j67vnm?file=/index.js). - -The G6 5.0 documentation is still under construction. For now, you can refer to the [API](/en/apis) for development. - - diff --git a/packages/site/docs/manual/tutorial/epilog.zh.md b/packages/site/docs/manual/tutorial/epilog.zh.md deleted file mode 100644 index d494454eb88..00000000000 --- a/packages/site/docs/manual/tutorial/epilog.zh.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 结语 -order: 7 ---- - -恭喜！你已经成功创建了一个基于 G6 的图可视化应用，并学会了： - -- 基本绘制方法 -- 远程数据加载 -- 样式配置 -- 布局运用 -- 增加交互 -- 添加辅助工具 - -完整代码见：Tutorial 案例代码。 - -G6 5.0 文档仍在建设中。目前您可以查阅 [API](/apis) 进行开发。 - - diff --git a/packages/site/docs/manual/tutorial/layout.en.md b/packages/site/docs/manual/tutorial/layout.en.md deleted file mode 100644 index f58c5f3ed87..00000000000 --- a/packages/site/docs/manual/tutorial/layout.en.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: 使用图布局 Layout -order: 3 ---- - -When there is no node position information in the data, or when the position information in the data does not meet the requirements, some layout algorithms need to be used to layout the graph. G6 provides 9 general graph layouts and 4 tree graph layouts. In v4, they need to be used separately in graph data and tree data structures. In v5, tree and graph layouts are merged, and now both tree and graph can use the following layout algorithms: - -
-**General graph layouts:** - -- Random Layout: random layout; -- **Force Layout**: classic force-directed layout: - - > Force-directed layout: In a layout network, particles have attractive and repulsive forces between them. From the initial random and unordered layout, it gradually evolves to a balanced and stable layout, which is called force-directed layout. It is suitable for describing relationships between things, such as interpersonal relationships, computer network relationships, etc. - -- Circular Layout; -- Radial Layout; -- MDS Layout: dimensionality reduction algorithm layout for high-dimensional data; -- Fruchterman Layout: a type of force-directed layout; -- Dagre Layout: hierarchical layout; -- Concentric Layout: placing important (default measured by degree) nodes in the layout center; -- Grid Layout: arranging nodes in order (default is data order). - -**Tree graph layouts:** - -- Dendrogram Layout: tree layout (leaf node layout aligned to the same layer); -- CompactBox Layout: compact tree layout; -- Mindmap Layout: mind map layout; -- Indented Layout: indented layout. - F - or detailed introductions and configuration of these layouts, please refer to the [Layout API](/en/apis/layout/force-layout-options). In this tutorial, we use the Force Layout. - -img - -## Default Layout - -When instantiating the graph without configuring the layout: - -- If the nodes in the data have position information (`x` and `y`), the graph will be drawn according to the position information in the data. - -- If the nodes in the data do not have position information, the default Grid Layout will be used. - -## Configuring the Layout - -Configuring the layout in G6 is very simple. When instantiating the graph, just add the layout configuration. The code below sets the layout method to `type: 'force'`, which is the force-directed graph layout. At the same time,` animated: true` is enabled to render the graph in real-time during the force calculation process, allowing users to observe the animation effects produced by the interaction between nodes. The parameter `preventOverlap: true` is set to prevent node overlap. For more configuration options of the force-directed layout, please refer to the [Layout API](/en/apis/layout/force-layout-options). - -```javascript -const graph = new Graph({ - // ... // Other configurations - // Object, optional, the layout method and its configuration, defaulting to the grid layout. - layout: { - type: 'force', // Specify the force-directed layout - preventOverlap: true, // Prevent node overlap - linkDistance: 50, // Ideal length of edges - // nodeSize: 30 // Node size, used for collision detection in the algorithm to prevent node overlap. By default, the node size in the data will be used. - }, -}); -``` - -The result is as follows: - -img - -> Different layouts and different parameters of the same layout can be dynamically switched and transitioned. For more information, please refer to: [Layout Switching](/en/examples/net/layoutMechanism/#layoutTranslate). - -Note: If there is data in the graph configuration, the layout calculation will be performed after instantiating the graph. If the graph.read(data) API is used to read the data, the layout will be calculated when it is called. - -## Complete Code - -Here is the complete code: - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -**⚠️ Note:** 
If you need to replace the data, please replace  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'` with the new data file address. diff --git a/packages/site/docs/manual/tutorial/layout.zh.md b/packages/site/docs/manual/tutorial/layout.zh.md deleted file mode 100644 index e46732bf505..00000000000 --- a/packages/site/docs/manual/tutorial/layout.zh.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: 布局 -order: 3 ---- - -当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 9 种一般图的布局和 4 种树图的布局。在 v4 中，它们需要分别使用的图结构数据和树图结构数据中。v5 将树图和图进行了融合，现在不论是树图还是图，都可以使用如下布局算法： - -
**图布局：** - -- Random Layout：随机布局； -- **Force Layout：经典力导向布局：** - - > 力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。 - -- Circular Layout：环形布局； -- Radial Layout：辐射状布局； -- MDS Layout：高维数据降维算法布局； -- Fruchterman Layout：Fruchterman 布局，一种力导布局； -- Dagre Layout：层次布局； -- Concentric Layout：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心； -- Grid Layout：格子布局，将节点有序（默认是数据顺序）排列在格子上。 - -**树布局：** - -- Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）； -- CompactBox Layout：紧凑树布局； -- Mindmap Layout：脑图布局； -- Indented Layout：缩进布局。 - -各种布局方法的具体介绍及其配置参见 [Layout API](/apis/layout/force-layout-options)。本教程中，我们使用的是力导向布局 (Force Layout)。 - -img - -## 默认布局 - -当实例化图时没有配置布局时： - -- 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制； -- 若数据中节点没有位置信息，则默认使用 Grid Layout 进行布局。 - -## 配置布局 - -G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即力导向图布局。同时开启了 `animated: true` 使得在力计算过程中实时渲染图，让用户可以观察到图上节点力相互作用产生的动画效果。并设置了参数 `preventOverlap: true` ，表示希望节点不重叠。力导向布局的更多配置项参见：[Layout API](/apis/layout/force-layout-options)。 - -```javascript -const graph = new Graph({ - // ... // 其他配置项 - // Object，可选，布局的方法及其配置项，默认为 grid 布局。 - layout: { - type: 'force', // 指定为力导向布局 - preventOverlap: true, // 防止节点重叠 - linkDistance: 50, // 边的理想长度 - // nodeSize: 30 // 节点大小，用于算法中防止节点重叠时的碰撞检测。默认将使用数据中的节点大小。 - }, -}); -``` - -结果如下： - -img - -> 不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：[布局切换](/examples/net/layoutMechanism/#layoutTranslate)。 - -提示：若图配置中有 data，则在实例化图后进行布局计算。若使用  `graph.read(data)` API 进行数据读取，则将在调用时执行计算。 - -## 完整代码 - -
-点击展开完整代码 - -```html - - - - - Tutorial Demo - - -
- - - - -``` - -
- -:::info{title=注意} -若需更换数据，请替换  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'`  为实际的数据文件地址。 -::: diff --git a/packages/site/docs/manual/tutorial/plugins.en.md b/packages/site/docs/manual/tutorial/plugins.en.md deleted file mode 100644 index 183f81bc274..00000000000 --- a/packages/site/docs/manual/tutorial/plugins.en.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Plugins and Tools -order: 5 ---- - -This article will add the Minimap plugin and tooltip node prompt box to the **Tutorial Example**. -When using plugins, there are three steps: - -- Step 1: Import the plugin; -- Step 2: Register the plugin; -- Step 3: Configure the plugin instance on the graph when instantiating the graph. - -## Minimap - -The Minimap is a common tool used for quick preview and exploration of graphs. It can serve as a navigation aid for users to explore large-scale graphs. - -Now, let's configure a Minimap for the **Tutorial Example**: - -**Expected Result** - -img - -**Usage** - -The Minimap is one of the plugins provided by G6, but it is not registered in advance. It needs to be imported from Extensions and registered before being configured on the graph: - -```javascript -const { Graph as BaseGraph, extend, Extensions } = G6; -const ExtGraph = extend(BaseGraph, { - // ... Other extension registrations - // Plugin registration - plugins: { - minimap: Extensions.Minimap, - } -}); -// Instantiate the graph, note that the extended Graph is used here -const graph = new ExtGraph({ - // ... Other configurations - plugins: [ - // If using default configurations, you can simply write a string 'minimap' - { - type: 'minimap', - // ... Other configurations - } - ], -}); -``` - -## Tooltip - -The tooltip node prompt box can be used to display detailed information about nodes. When the mouse hovers over a node, a floating layer is displayed to provide detailed information about the node. For more configurations, see [Tooltip Plugin](/en/apis/plugins/tooltip-config). - -**Expected Result** - -img - -**Usage** - -The Tooltip is one of the plugins provided by G6, but it is not registered in advance. It needs to be imported from Extensions and registered before being configured on the graph: - -```javascript -const { Graph as BaseGraph, extend, Extensions } = G6; -const ExtGraph = extend(BaseGraph, { - // ... Other extension registrations - // Plugin registration - plugins: { - minimap: Extensions.Minimap, - tooltip: Extensions.Tooltip, - } -}); -// Instantiate the graph, note that the extended Graph is used here -const graph = new ExtGraph({ - // ... Other configurations - plugins: [ - // If using default configurations, you can simply write a string 'minimap' - 'minimap', - // If using default configurations, you can simply write a string 'tooltip' - { - type: "tooltip", - key: "my-tooltip", // Unique identifier - itemTypes: ["node"], // Only effective for nodes, can be configured as ['node', 'edge'] to make it effective for both nodes and edges - getContent: (e) => { // Custom content - const model = graph.getNodeData(e.itemId); - return `ID: ${e.itemId}
Degree: ${model.data.degree}`; - } - // ... Other configurations - }, - ], -}); - -``` - -## Complete Code - -With this, the Tutorial Example is complete. The complete code can be found here: a href='https://codesandbox.io/s/g6-v5-tutorial-j67vnm?file=/index.js' target='\_blank'>Tutorial Example Code. - -**⚠️ Note:** 
If you need to replace the data, please replace  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'` with the new data file address. - - diff --git a/packages/site/docs/manual/tutorial/plugins.zh.md b/packages/site/docs/manual/tutorial/plugins.zh.md deleted file mode 100644 index f4e04041301..00000000000 --- a/packages/site/docs/manual/tutorial/plugins.zh.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 插件 -order: 5 ---- - -本文将在上一节的基础上添加缩略图插件、节点提示框。 - -使用插件时，有三个步骤： - -1. 引入插件 -2. 注册插件 -3. 在实例化图时将插件的实例配置到图上。 - -## Minimap - -缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。 - -现在，我们配置一个 Minimap： - -**预期效果** - -img - -**使用方法** - -Minimap 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上： - -```javascript -cosnt { Graph as BaseGraph, extend, Extensions } = G6; - -const ExtGraph = extend(BaseGraph, { - // ... 其他扩展的注册 - // 插件注册 - plugins: { - minimap: Extensions.Minimap, - } -}); - -// 实例化图，注意这里使用的是 extend 后的 Graph -const graph = new Graph({ - // ... // 其他配置项 - plugins: [ - // 若使用默认配置，可以只写一个字符串 'minimap' - { - type: 'minimap', - // ... 其他配置项 - } - ], -}); -``` - -## tooltip 节点提示框 - -节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。更多配置参见 [Tooltip 插件](/apis/plugins/tooltip-config)。 - -**预期效果** - -img - -**使用方法** - -Tooltip 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上： - -```javascript -cosnt { Graph as BaseGraph, extend, Extensions } = G6; - -const ExtGraph = extend(BaseGraph, { - // ... 其他扩展的注册 - // 插件注册 - plugins: { - minimap: Extensions.Minimap, - tooltip: Extensions.Tooltip, - } -}); - -// 实例化图，注意这里使用的是 extend 后的 Graph -const graph = new Graph({ - // ... // 其他配置项 - plugins: [ - // 若使用默认配置，可以只写一个字符串 'minimap' - 'minimap',, - // 若使用默认配置，可以只写一个字符串 'tooltip' - { - type: "tooltip", - key: "my-tooltip", // 唯一标志 - itemTypes: ["node"], // 只对节点生效，可以配置为 ['node', 'edge'] 使其同时对边生效 - getContent: (e) => { // 自定义内容 - const model = graph.getNodeData(e.itemId); - return `ID: ${e.itemId}
Degree: ${model.data.degree}`; - } - // ... 其他配置项 - }, - ], -}); -``` - -## 完整代码 - -完整代码见：案例代码。 - -:::info{title=注意} -若需更换数据，请替换  `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'`  为实际的数据文件地址。 -::: - - diff --git a/packages/site/docs/manual/tutorial/preface.en.md b/packages/site/docs/manual/tutorial/preface.en.md deleted file mode 100644 index 7fee64ed520..00000000000 --- a/packages/site/docs/manual/tutorial/preface.en.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Preface -order: 0 ---- - -## What is G6 - -G6 is a graph visualization engine. It provides basic graph visualization capabilities such as drawing, layout, analysis, interaction, animation, etc. It aims to make relationships transparent and simple, allowing users to gain insights into relationship data. - -## Introduction to the Tutorial - -In this tutorial, we will create a simple graph visualization as shown in the following image, which we will refer to as the **Tutorial Example**, Full Code. - -img - -
Tutorial Example
- -## Introduction - -In this tutorial, we will complete the creation, rendering, element configuration, layout, interaction, animation, and tooling of a graph in the Tutorial Example. In this tutorial, readers will learn the basic and core functionalities of G6. After mastering the content of this tutorial, readers will have a preliminary understanding of G6 and lay a foundation for a deeper understanding. - -This tutorial will be divided into the following sections: - -- Quick Start -- Creating a Graph -- Elements and their Configuration -- Using Graph Layouts -- Graph Interaction Behavior -- Plugins and Tools -- Animation - -`Note` -
-This tutorial is designed for readers who want to learn while doing. More tutorials for G6 5.0 are under development. For now, readers can refer to the [API Doc](/en/apis). - -## Prerequisites - -This tutorial demonstrates how to use G6 to create a complete graph visualization application. Before learning, we assume that readers have some knowledge of HTML and JavaScript, but no prior knowledge of G6 is required. If readers are already familiar with the basics of G6, they can skip some content and focus on important points. - -## Environment Setup - -It is recommended to use the latest version of the Chrome browser as the runtime environment and any code editor for code writing. This tutorial assumes that G6 is directly imported via CDN. The version used is 3.7.1, which simplifies many features in our code. If readers want to try this tutorial in a different environment, they can refer to the installation and configuration section in the [Quick Start](/en/manual/getting-started) for guidance. - -Create a new index.html file and add the following code: - -```html - - - - - Tutorial Demo - - - - - - - - -``` - -Open the index.html file in a browser, open the console, and you should see G6 printed, indicating successful import. diff --git a/packages/site/docs/manual/tutorial/preface.zh.md b/packages/site/docs/manual/tutorial/preface.zh.md deleted file mode 100644 index 280c4849d5f..00000000000 --- a/packages/site/docs/manual/tutorial/preface.zh.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 前言 -order: 0 ---- - -## 什么是 G6 - -G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 - -## 入门教程简介 - -在本入门教程将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 **Tutorial 案例**，完整代码。 - -img - -
Tutorial 案例 效果图
- -## 前言 - -我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的  **Tutorial 案例**。在这部分教学中，读者将会学习到 G6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读者初步理解 G6 并为深度理解 G6 打好基础。 - -该入门教程将会划分为以下几个章节： - -- 快速上手 -- 创建图 -- 元素及其配置 -- 使用图布局 Layout -- 图的交互 Behavior -- 插件 & 工具 -- \*动画（选读） - -`提示` 
该入门教程是为希望“边学边做”的读者设计的。G6 5.0 的更多教程正在建设中，目前可以参考 [API 文档](/apis)。 - -## 基础知识 - -本教程展示如何使用 G6 创建一个完整的图可视化应用。在学习之前，我们假设读者对 HTML 和 JavaScript 有所了解，但并不要求对 G6 有任何的基础。如果读者对 G6 的基本内容已经熟知，可以适当跳过部分内容，有针对性地阅读重要的知识点。 - -## 环境准备 - -建议使用新版的 Chrome 浏览器作为运行环境，用任意的代码编辑器进行代码的编写即可。本教程默认采用 CDN 的方式直接引入 G6 类库，引入的版本是 3.7.1，此版本很多特性会大大简化我们的代码。如果希望在其他环境尝试本教程的学习，读者可以参考 [快速上手](/manual/getting-started) 中的安装配置部分。 - -新建 index.html 文件，并添加如下代码： - -```html - - - - - Tutorial Demo - - - - - - - - -``` - -使用浏览器打开 index.html 文件，打开控制台，可以看到打印出的 G6，说明成功引入。 diff --git a/packages/site/docs/manual/tutorial/quick-start.en.md b/packages/site/docs/manual/tutorial/quick-start.en.md deleted file mode 100644 index 1ee4e4cdfb2..00000000000 --- a/packages/site/docs/manual/tutorial/quick-start.en.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Quick Start -order: 1 ---- - -## Online Demo - - - -## G6 in vanilla HTML - -Using G6 in vanilla HTML only requires importing the G6 JS file, as shown below: - -```html - - - - -
- - - - - - -``` - -**Preview** - -img - -## Installing from npm - -### Install - -```bash -# Using npm -npm install --save @antv/g6@5.0.0-beta.28 - -# Using yarn -yarn add @antv/g6@5.0.0 - -# Using pnpm -pnpm add @antv/g6@5.0.0 -``` - -### Import - -```js -import { Graph } from '@antv/g6'; -``` - -## G6 in React - -You can use G6 in React by creating a DOM container in the React component and then instantiating G6 in `useEffect`. [Online Demo](https://codesandbox.io/s/g6-5-0-demo-hqjs9w) - -```js -import React, { useEffect, useRef } from 'react'; -import { Graph } from '@antv/g6'; - -export default () => { - const ref = useRef(); - - const data = { - nodes: [ - { id: 'node1', data: { name: 'Circle1' } }, - { id: 'node2', data: { name: 'Circle2' } }, - ], - edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], - }; - - useEffect(() => { - if (!ref.current) return; - - const graph = new Graph({ - container: ref.current, - width: 800, - height: 500, - data, - modes: { - default: ['drag-node', 'drag-canvas', 'zoom-canvas'], - }, - }); - }, []); - - return
; -}; -``` - -## G6 in Vue - -> Under construction, PRs are welcome - -## Further Reading - -This chapter introduces how to install and the simplest scene. In other chapters of [G6 Tutorial](https://g6.antv.vision/en/docs/tutorial/preface), you will learn: - -- Instance configuration -- How to set element attributes and styles -- Set layout -- Add interaction -- Configure animation -- Use plugins diff --git a/packages/site/docs/manual/tutorial/quick-start.zh.md b/packages/site/docs/manual/tutorial/quick-start.zh.md deleted file mode 100644 index 5330624304a..00000000000 --- a/packages/site/docs/manual/tutorial/quick-start.zh.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 快速开始 -order: 1 ---- - -## 在线示例 - - - -## 在原生 HTML 中使用 - -在原生 HTML 中使用 G6 仅需要引入 G6 的 JS 文件即可，如下所示： - -```html - - - - -
- - - - - - -``` - -**效果预览** - -img - -## 通过 npm 安装 - -### 安装 - -```bash -# 使用 npm 安装 -npm install --save @antv/g6@5.0.0-beta.28 - -# 使用 yarn 安装 -yarn add @antv/g6@5.0.0 - -# 使用 pnpm 安装 -pnpm add @antv/g6@5.0.0 -``` - -### 引入 - -```js -import { Graph } from '@antv/g6'; -``` - -## 在 React 中使用 - -你可以在 React 中使用 G6，只需要在 React 组件中创建一个 DOM 容器，然后在 `useEffect` 中实例化 G6 即可。[线上 Demo](https://codesandbox.io/s/g6-5-0-demo-hqjs9w) - - - -```js -import React, { useEffect, useRef } from 'react'; -import { Graph } from '@antv/g6'; - -export default () => { - const ref = useRef(); - - const data = { - nodes: [ - { id: 'node1', data: { name: 'Circle1' } }, - { id: 'node2', data: { name: 'Circle2' } }, - ], - edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }], - }; - - useEffect(() => { - if (!ref.current) return; - - const graph = new Graph({ - container: ref.current, - width: 800, - height: 500, - data, - modes: { - default: ['drag-node', 'drag-canvas', 'zoom-canvas'], - }, - }); - }, []); - - return
; -}; -``` - -## 在 Vue 中使用 - -> 建设中，欢迎 PR - -## 更多 - -本章介绍了如何安装以及最简单的场景，在 [G6 Tutorial 入门教程](/manual/tutorial/preface) 中其他的章节中您将学习到： - -- 实例化配置 -- 如何设置元素属性、样式 -- 设置布局 -- 添加交互 -- 配置动画 -- 使用插件 diff --git a/packages/site/docs/manual/upgrade.en.md b/packages/site/docs/manual/upgrade.en.md new file mode 100644 index 00000000000..6c77cbd0d58 --- /dev/null +++ b/packages/site/docs/manual/upgrade.en.md @@ -0,0 +1,4 @@ +--- +title: Upgrade To 5.0 +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/upgrade.zh.md b/packages/site/docs/manual/upgrade.zh.md new file mode 100644 index 00000000000..72beb9a2f01 --- /dev/null +++ b/packages/site/docs/manual/upgrade.zh.md @@ -0,0 +1,4 @@ +--- +title: 升级到 5.0 +order: 5 +--- \ No newline at end of file diff --git a/packages/site/docs/manual/v5/features.en.md b/packages/site/docs/manual/v5/features.en.md deleted file mode 100644 index 92b85f851fe..00000000000 --- a/packages/site/docs/manual/v5/features.en.md +++ /dev/null @@ -1,591 +0,0 @@ ---- -title: Features in v5 -order: 3 ---- - -Compared to G6 v4, G6 v5 introduces new capabilities in the following areas: - -- 🎞 **Visual and Animation Specification**: Define styles and animations using JSON spec; -- 📂 Information **Level of Details**; -- 🎨 Simple and flexible **Theme Configuration** ability; -- 🤖 Flexible and powerful **Data Processing** capability; -- 🎄 **Fusion of Tree Diagram and Graph** structure; -- 🏀 **3D large graph** support; -- 🚀 **Performance Improvements**, including rendering and layout computations; -- 🌠 **Multiple Renderers** that can be switched at runtime. -- 📦 Reduced package size with support for **TreeShaking**. - -And more small and wonderful changes: - -- Hull supports text configuration. -- Polyline supports automatic obstacle avoidance. -- Text automatically adapts to width. -- Improved interactive performance by using a temporary layer canvas. -- Legend automatically retrieves styles from the canvas. - -The official version is coming soon. If these features are what you have been waiting for, you can now try the G6 5.0 Beta version! If you encounter any upgrade issues, please leave us a message on GitHub. - -To support these new capabilities, there are significant Breaking Changes in G6 5.0 compared to v4, which may require some effort to upgrade. We hope that the benefits brought by the new capabilities outweigh the upgrade costs. - -## 1️⃣. Visual and Animation Specifications - -### JSON Spec Definition - -[Specification Doc](/apis/graph/specification) - -In v5, we standardize the graphics of all nodes/edges/combos. Each type of element has several standardized graphic names. This standard should also be followed for custom elements. If there are additional graphics, they should be placed in otherShapes. - -- node: keyShape (main graphic), labelShape (text graphic), haloShape (background halo that appears in certain states), labelBackgroundShape (text background graphic), iconShape (icon graphic in the center of the node), badgeShapes (badge graphics around the node), anchorShapes (circle graphics representing anchor points): - - - -- edge: keyShape (main graphic), labelShape (text graphic), haloShape (background halo that appears in certain states), labelBackgroundShape (text background graphic): - - - -Therefore, no matter what type of node or edge, you can configure the graphics inside it using the following method: - -```typescript -const graph = new Graph({ - node: { - keyShape: { - fill: "#f00', - r: { - fields: ['size'], - formatter: model => Math.max(model.data.size[0], model.data.size[1]) / 2 - } - // ...other styles for keyShape - }, - labelShape: { - // You can specify a fixed string, or use the mapping method below to map to a field in the data. Other properties can also use this mapping. - text: { - fields: ['name'], - formatter: model => model.data.name - }, - // ...other styles for labelShape - }, - labelBackgroundShape: { - padding: [2,2,2,2], - fill: '#0f0' - // ...other styles for the background graphic of labelShape - }, - iconShape: { - // Content can be text or an image, image takes priority - // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - text: 'label', - // ...more configurations for iconShape - }, - anchorShapes: [ - { - position: [0, 0.5], - r: 2, - fill: 'red', - }, - { - position: [1, 0.5], - r: 2, - fill: 'green', - }, - // More anchor point graphics (drawings) - ], - badgeShapes: [ - { - text: 'running', - position: 'rightTop', - color: 'blue', - }, - { - text: 'error', - position: 'right', - color: 'blue', - }, - // ...more badge graphics - ], - otherShapes: { - xShape: {...}, - yShape: {...}, - zShape: {...}, - // ...more additional graphics - } - } -}) -``` - -### Function Mapping Configuration - -Sometimes, we need to return different style configurations based on different data. In such cases, function configuration is more flexible compared to the field+formatter method: - -```typescript -const graph = new Graph({ - node: (model) => { - const { id, data } = model; - const { size, showLabel } = data; - // Note that the returned data structure is the complete node data type - return { - id, - data: { - ...data, // Make sure to return the original data in the original data, otherwise these data will be lost - keyShape: { - r: Math.max(size[0], size[1]) / 2, - // ... - }, - labelShape: showLabel - ? { - // Decide whether to display text based on a business field - text: id, - // ... other configurations for the text graphic - } - : undefined, - }, - }; - }, -}); -``` - -### Animation Configuration - -[Animation Configuration Demo](/en/examples/scatter/changePosition/#itemAnimates) - -In v4, to set animations for nodes, you had to use custom nodes and configure them with the animation API of the graphics. It was also difficult to control when the animation starts and ends. In v5, animations can be defined using JSON spec. You can specify the animates field in the node / edge / combo field of the graph configuration as mentioned above: - -```typescript -const graph = new Graph({ - node: { - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } -}); -``` - -Or in the functional mapping way of `node` / `edge` / `combo`: - -```typescript -const graph = new Graph({ - node: model => { - const { id, data } = model - return { - id, - data: { - ...data, - // ... other style configurations - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } - } - } -}); -``` - -We have standardized five animation scenarios that occur at different times for each graphic: buildIn, buildOut, update (data/state update), show (appearance, compared to hide), hide. For each scenario, animations can be specified for different graphics, different fields, and the animation configuration and execution order can be specified. For example, the following expresses the animation of various graphics during different types of updates: - -```typescript -update: [ - { - // The entire node (shapeId: 'group') animates when x and y change - fields: ['x', 'y'], - shapeId: 'group', - duration: 500, - }, - { - // The opacity of haloShape animates with a duration of 500 when selected and active states change - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - duration: 500, - }, - // When fill and r of keyShape change at the same time, they are animated in the order specified by order, which can achieve a sequential animation effect - { - fields: ['fill'], - shapeId: 'keyShape', - order: 0, - }, - { - fields: ['r'], - shapeId: 'keyShape', - order: 1, - }, -]; -``` - -## 2️⃣. Infomation Level of Detail - -[Info Level of Detail DEMO](/en/examples/feature/features/#lodLevels) - -Information layering can reduce visual distractions for complex graphs and display detailed information after zooming in. You can specify the lodLevels field in the `node` / `edge` / `combo` fields of the graph configuration introduced above, as shown in the code snippet below. The `levels` define the zoom levels at which information layering responds, and the `animateCfg` configuration specifies the animation method for the graph changes caused by information layering. Then, you need to configure the `lod` field in different graphic style configurations to specify at which level the graphic should be displayed in `levels`. - -```typescript -const graph = new Graph({ - node: { - lodLevels: { - levels: [ - { zoomRange: [0, 0.5] }, // -1 - { zoomRange: [0.5, 1], primary: true }, // 0 - { zoomRange: [1, 1.5] }, // 1 - { zoomRange: [1.5, 1] }, // 2 - { zoomRange: [2, Infinity] }, // 3 - ], - animateCfg: { - duration: 500, - }, - }, - labelShape: { - lod: 1, // Show when the zoom of the graph is greater than zoomRange[0] defined in the first level of levels, and hide when it is smaller - }, - }, -}); -``` - -Or use the mapping method of `node` / `edge` / `combo` functions to configure: - -```typescript -const graph = new Graph({ - node: (model) => { - const { id, data } = model; - const { isImportant } = data; - return { - id, - data: { - ...data, - // ... Other configurations - lodLevels: { - levels: [ - { zoomRange: [0, 0.5] }, // -1 - { zoomRange: [0.5, 1], primary: true }, // 0 - { zoomRange: [1, 1.5] }, // 1 - { zoomRange: [1.5, 1] }, // 2 - { zoomRange: [2, Infinity] }, // 3 - ], - animateCfg: { - duration: 500, - }, - }, - labelShape: { - lod: isImportant ? -1 : 2, // You can determine in which level to display the label based on the business attribute. For example, if it is an important node, display the text in all levels; otherwise, display it after zooming in to a certain extent - }, - }, - }; - }, -}); -``` - -## 3️⃣. Theme Configuration - -[Theme Config DEMO](/en/examples/feature/features/#themeSwitch) - -G6 comes with built-in light and dark themes, and you can also customize them. The usage is as follows: - -```typescript -const graph = new Graph({ - theme: { - type: 'spec', // Built-in theme parser - base: 'light', // Use the light theme, set base to 'dark' for the dark theme configuration - specification: { - node: { - dataTypeField: 'cluster', // Specify the field name for mapping node color - // palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], // Custom color palette - // palette: { a: '#f00', b: '#0f0', c: '#00f' }, // You can specify colors for special field values - // getStyleSets: (palette) => { - // // More flexible configuration, return different styles for different states - // const styleSetsMap = {}; - // Object.keys(palette).forEach((dataType) => { - // const color = palette[dataType]; - // styleSetsMap[dataType] = { - // default: { - // keyShape: { fill: color }, - // labelShape: { fill: color }, - // }, - // state1: { - // keyShape: { fill: '#000' }, - // }, - // state2: { - // keyShape: { stroke: '#f00' }, - // }, - // state3: { - // keyShape: { fill: '#ff0' }, - // }, - // }; - // }); - // return styleSetsMap; - // }, - }, - edge: { - dataTypeField: 'cluster', // Specify the field for mapping edge color - // ... Other configurations - }, - }, - }, -}); -``` - -## 4️⃣. Data Processing - -The format of business data varies and may not conform to the data format of G6. Sometimes, it may be necessary to calculate some fields for the data in advance, such as the degree of nodes. In this case, the data processing module of G6 v5 can be used. It is one of the eight extensions of G6 v5 and is executed before user data flows into the Graph. Multiple data processing modules can be configured and they will be executed linearly. The configuration method is as follows: - -```typescript -const graph = new Graph({ - // ... other graph configurations - transforms: [ - 'transform-v4-data', // built-in data processor, converts v4 data format to v5 - { - // built-in data processor, maps the size of nodes to the 'value' field of node data, normalizes the size range to [4, 28] - type: 'map-node-size', - field: 'value', - range: [4, 28], - }, - ], -}); -``` - -You can customize data processors based on your own business data format and register them with the Graph for use: - -```typescript -import { Graph, extend } from '@antv/g6'; -const CustomDataTransform = (data, options, userGraphCore) => { - data.nodes.forEach((node) => (node.data.cluster = node.data.bussinessState === '0' ? 'cluster1' : 'cluster2')); - data.edges.forEach((edge) => (edge.data.keyShape = { lineWidth: edge.data.weight / 2 })); - return data; -}; -const ExtGraph = extend(Graph, { - transforms: { - 'custom-data-transform': CustomDataTransform, - }, -}); -const graph = new ExtGraph({ - // ... other graph configurations - transforms: [ - 'transform-v4-data', // built-in data processor, converts v4 data format to v5 - 'custom-data-transform', // use custom data processor - ], -}); -``` - -## 5️⃣. Fusion of Tree Graph and Graph - -[Graph Data in Tree Layout DEMO](/en/examples/feature/features/#treeAndGraph) - -v5 introduces new features related to tree graphs: - -- The layout is compatible with Graph. Graph can specify the root node and use the minimum spanning tree to establish a tree structure before using the tree layout algorithm. -- The interaction is compatible with Graph. Graph can also expand and collapse "subtrees", which are downstream nodes without backtracking edges. -- Supports backtrack edges and loops. -- Supports forests (multiple trees). - -If you need to use TreeGraphData, you just need to provide a data type tag when configuring the Graph: - -```typescript -const graph = new Graph({ - // ... other configurations - data: { - type: 'treeData', // type can be 'graphData', 'treeData', 'fetch', where 'fetch' will be supported in the official version - value: data, // when type is 'treeData', value can be TreeGraphData or TreeGraphData[] to support the drawing of forests - }, -}); -``` - -The `data` field can provide data of type GraphData, so G6 will treat it as a normal graph and generate a tree graph structure when necessary (such as using tree layout or interaction). It is also possible to specify the type as 'treeData' and pass TreeGraphData type data to the value, in which case G6 will store the tree graph structure and convert it to normal graph data for storage. - -## 6️⃣. 3D Large Graph - -[3D DEMO](/en/examples/feature/features/#webgl3d) - - - -G6 v5 provides the ability to render and interact with 3D large graphs. To use this feature, you need to configure `renderer: 'webgl-3d'` on the Graph and configure the corresponding 3D node type (currently only supports sphere-node) and 3D interactions: - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; -const ExtGraph = extend(Graph, { - nodes: { - 'sphere-node': Extensions.SphereNode, - }, - behaviors: { - 'orbit-canvas-3d': Extensions.OrbitCanvas3D, - 'zoom-canvas-3d': Extensions.ZoomCanvas3D, - }, -}); -const graph = new ExtGraph({ - renderer: 'webgl-3d', // can be 'canvas', 'svg', 'webgl', 'webgl-3d' - node: { - type: 'sphere-node', - }, - modes: { - defaualt: ['orbit-canvas-3d', 'zoom-canvas-3d'], - }, - // ... other graph configurations -}); -``` - -## 7️⃣. Performance Leap & Multiple Renderers - -G6 supports 2D and 3D rendering using WebGL, which greatly improves rendering performance. Different renderers can be switched at runtime by configuring the renderer on the Graph [Renderer DEMO](/en/examples/feature/features/#lodLevels). - -```typescript -const graph = new Graph({ - // ... other graph configurations - renderer: 'canvas', // 'canvas', 'svg', 'webgl', 'webgl-3d' -}); -``` - -In addition, the layout package of G6, @antv/layout, supports WASM computation. To use this feature, you need to import the specific layout algorithm from the @antv/layout-wasm package and register it with Graph using extend, and then you can use it. [WASM Layout DEMO](/en/examples/feature/features/#wasmLayouts). - -```typescript -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; -const ExtGraph = extend(Graph, { - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); -const supported = await supportsThreads(); -const threads = await initThreads(supported); -const graph = new ExtGraph({ - layout: { - type: 'force-wasm', - threads, - maxIteration: 200, - }, - // ... other graph configurations -}); -``` - -## 8️⃣. Reduce Package Size - -In G6 v5, only the most commonly used features are registered on the Graph by default. Other features need to be imported from @antv/g6 or other packages and registered on the Graph before they can be configured. - -```typescript -import { Graph, extend, Extensions } from '@antv/g6'; -// External imported features -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; -// Class CustomBehaviorClass... -// Class CustomEdge... -const ExtGraph = extend(Graph, { - behaviors: { - 'activate-relations': Extensions.ActivateRelations, // Built-in interaction, not registered in advance - 'some-custom-behavior': CustomBehaviorClass, // Custom interaction - }, - nodes: { - 'modelRect-node': Extensions.ModelRectNode, // Built-in modelRect node, not registered in advance - }, - edges: { - 'custom-edge': CustomEdge, // Custom edge - }, - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); - -const supported = await supportsThreads(); -const threads = await initThreads(supported); - -// Instantiate the extended graph -const graph = new ExtGraph({ - // ... other configurations - modes: { - default: [ - 'drag-node', // Default registered interaction - 'activate-relations', // Built-in interaction that was imported and registered just now - 'some-custom-behavior', // Custom interaction that was imported and registered - ], - }, - defaultNode: { - type: 'modelRect-node', // Built-in node type that was imported and registered just now - }, - defaultEdge: { - type: 'custom-edge', // Custom edge type that was imported and registered - }, - layout: { - type: 'force-wasm', // Layout algorithm that was imported and registered just now - threads, - maxIteration: 200, - }, -}); -``` - -The default registered features include: - -```typescript -const stdLib = { - transforms: { - 'validate-data': ValidateData, // Data validator, executed internally by G6 - 'transform-v4-data': TransformV4Data, // Transform v4 data - 'map-node-size': MapNodeSize, // Map node size to a specified field of the node - }, - themes: { - light: LightTheme, // Light theme - dark: DarkTheme, // Dark theme - }, - themeSolvers: { - spec: SpecThemeSolver, // Default theme solver - }, - layouts: { - force: ForceLayout, // Force-directed layout - grid: GridLayout, // Grid layout - circular: CircularLayout, // Circular layout - concentric: ConcentricLayout, // Concentric layout - ...Hierarchy, // All tree layouts, including Dendrogram, Indented, Mindmap, CompactBox - }, - behaviors: { - 'drag-canvas': DragCanvas, // Drag canvas - 'zoom-canvas': ZoomCanvas, // Zoom canvas - 'drag-node': DragNode, // Drag node - 'drag-combo': DragCombo, // Drag combo - 'collapse-expand-combo': CollapseExpandCombo, // Collapse/expand combo - 'collapse-expand-tree': CollapseExpandTree, // Collapse/expand subtree - 'click-select': ClickSelect, // Click to select - }, - plugins: {}, - nodes: { - 'circle-node': CircleNode, // Circle node - 'rect-node': RectNode, // Rectangular node - }, - edges: { - 'line-edge': LineEdge, // Straight edge - }, - combos: { - 'circle-combo': CircleCombo, // Circle combo - 'rect-combo': RectCombo, // Rectangular combo - }, - markers: { - // Some commonly used icons - collapse: (x, y, r) => { - return [ - ['M', x - r, y], - ['a', r, r, 0, 1, 0, r * 2, 0], - ['a', r, r, 0, 1, 0, -r * 2, 0], - ['M', x - r + 4, y], - ['L', x + r - 4, y], - ]; - }, - expand: (x, y, r) => { - return [ - ['M', x - r, y], - ['a', r, r, 0, 1, 0, r * 2, 0], - ['a', r, r, 0, 1, 0, -r * 2, 0], - ['M', x - r + 4, y], - ['L', x - r + 2 * r - 4, y], - ['M', x - r + r, y - r + 4], - ['L', x, y + r - 4], - ]; - }, - upTriangle: (x, y, r) => { - const l1 = r * Math.cos(Math.PI / 6); - const l2 = r * Math.sin(Math.PI / 6); - return [['M', x - l1, y + l2], ['L', x + l1, y + l2], ['L', x, y - r], ['Z']]; - }, - downTriangle: (x, y, r) => { - const l1 = r * Math.cos(Math.PI / 6); - const l2 = r * Math.sin(Math.PI / 6); - return [['M', x - l1, y - l2], ['L', x + l1, y - l2], ['L', x, y + r], ['Z']]; - }, - }, -}; -``` diff --git a/packages/site/docs/manual/v5/features.zh.md b/packages/site/docs/manual/v5/features.zh.md deleted file mode 100644 index 9ff387949eb..00000000000 --- a/packages/site/docs/manual/v5/features.zh.md +++ /dev/null @@ -1,626 +0,0 @@ ---- -title: v5 特性 -order: 3 ---- - -相较于 v4，G6 v5 的新能力体现在： - -- 🎞 **视觉与动画规范**，使用 JSON spec 或映射函数的方式定义样式与动画； -- 📂**信息分层**能力； -- 🎨 简单灵活的**主题**配置能力； -- 🤖 灵活强大的**数据处理**能力； -- 🎄 **树图**和**图**结构的融合； -- 🏀 **3D** 大图； -- 🚀 **性能**飞跃，包括渲染与布局计算； -- 🌠 **多渲染器**，可运行时切换； -- 📦 **包体积减少**，支持 TreeShaking。 - -还有其他一些微小而美好的改变： - -- 轮廓包裹 Hull 支持文本配置； -- 折线支持自动避障； -- 文本自动适配宽度； -- 采用临时层画布提升交互性能； -- 图例自动从画布中获取样式。 - -正式版即将来袭。如果上面 Feature 是您所期待的，现在就可以使用 G6 5.0 Beta 版本进行尝鲜！若遇到任何升级问题，请在 GitHub 给我们留言。 - -为了支持上述全新能力，G6 v5 相比于 v4 有比较大的 Breaking Change，这可能带来一定的升级成本。希望上面全新能力带来的收益远大于升级成本。 - -## 1️⃣. 视觉与动画规范 - -### JSON Spec 定义 - -[Specification Doc](/apis/graph/specification) - -v5 中我们将所有节点/边/ combo 的图形进行规范化，每种类型的元素基本都有若干个规范的图形名称。包括自定义的元素，也应当遵循这样的规范。如果有额外的图形，统一放入 otherShapes 中。 - -- 节点：keyShape（主图形）、labelShape（文本图形）、haloShape（某些状态下出现的背景光晕）、labelBackgroundShape（文本背景图形）、iconShape（节点中心的 icon 图形）、badgeShapes（节点四周的徽标图形）、anchorShapes（代表锚点的圆点图形）： - - - -- 边：keyShape（主图形）、labelShape（文本图形）、haloShape（某些状态下出现的背景光晕）、labelBackgroundShape（文本背景图形）： - - - -因此，不论是什么类型的节点和边，都可以通过如下方式对其中的图形进行配置： - -```typescript -const graph = new Graph({ - node: { - keyShape: { - fill: "#f00', - r: { - fields: ['size'], - formatter: model => Math.max(model.data.size[0], model.data.size[1]) / 2 - } - // ...keyShape 的其他样式 - }, - labelShape: { - // 可以指定一个确定字符串，也可以使用下面的映射方式，映射到数据的某个字段中。其他属性也可以使用这种映射 - text: { - fields: ['name'], - formatter: model => model.data.name - }, - // ... labelShape 的其他样式 - }, - labelBackgroundShape: { - padding: [2,2,2,2], - fill: '#0f0' - // ... labelShape 的背景图形的其他样式 - }, - iconShape: { - // 内容可以是文本或图片， img 优先 - // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - text: 'label', - // ... iconShape 更多配置 - }, - anchorShapes: [ - { - position: [0, 0.5], - r: 2, - fill: 'red', - }, - { - position: [1, 0.5], - r: 2, - fill: 'green', - }, - // 更多锚点图形（绘制） - ], - badgeShapes: [ - { - text: 'running', - position: 'rightTop', - color: 'blue', - }, - { - text: 'error', - position: 'right', - color: 'blue', - }, - // ... 更多 badge 图形 - ], - otherShapes: { - xShape: {...}, - yShape: {...}, - zShape: {...}, - // ... 更多额外的图形 - } - } -}) -``` - -### 函数映射配置 - -有时，我们需要根据不同的数据，返回不同的样式配置。这种需求下，函数配置相比于可以写 field+formatter 的方式更加灵活： - -```typescript -const graph = new Graph({ - node: (model) => { - const { id, data } = model; - const { size, showLabel } = data; - - // 注意返回的数据结构为完整的节点数据类型 - return { - id, - data: { - ...data, // 注意将原数据中的原始 data 也返回，否则导致这些数据的丢失 - keyShape: { - r: Math.max(size[0], size[1]) / 2, - // ... - }, - labelShape: showLabel - ? { - // 根据一个业务字段决定是否显示文本 - text: id, - // ... 文本图形的其他配置 - } - : undefined, - }, - }; - }, -}); -``` - -### 动画配置 - -[动画配置 DEMO](/examples/scatter/changePosition/#itemAnimates) - -在 v4 中需要为节点设置动画，必须使用自定义节点，再用图形的动画 API 进行配置。动画开始和结束的时机也难以控制。v5 提供了 JSON spec 的方式定义动画。您可以在上面介绍的 graph 配置的 `node` / `edge` / `combo` 字段中指定 `animates` 字段： - -```typescript -const graph = new Graph({ - node: { - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } -}) -``` - -或 `node` / `edge` / `combo` 的函数式映射方式： - -```typescript -const graph = new Graph({ - node: model => { - const { id, data } = model - return { - id, - data: { - ...data, - // ... 其他样式配置 - animates: { - buildIn: [...], - buildOut: [...], - update: [...], - show: [...], - hide: [...], - } - } - } - } -}) -``` - -我们规范了动画的五个场景，发生在各个图形的不同时机：入场（buildId）、出场（buildOut）、update（数据/状态更新）、show（出现，相对于 hide）、hide（隐藏）。每个场景的可以为不同的图形、不同的字段指定动画，还可以指定动画的配置和执行顺序。例如，下面表达了指定各类更新时的各种图形的动画： - -```typescript -update: [ - { - // 整个节点（shapeId: 'group'）在 x、y 发生变化时，动画更新 - fields: ['x', 'y'], - shapeId: 'group', - duration: 500, - }, - { - // 在 selected 和 active 状态变化导致的 haloShape opacity 变化时，使 opacity 带动画地更新 - fields: ['opacity'], - shapeId: 'haloShape', - states: ['selected', 'active'], - duration: 500, - }, - // 当 keyShape 的 fill、r 同时发生变化时，按照 order 指定的顺序带动画地更新，可以实现依次动画的效果 - { - fields: ['fill'], - shapeId: 'keyShape', - order: 0, - }, - { - fields: ['r'], - shapeId: 'keyShape', - order: 1, - }, -]; -``` - -## 2️⃣. 信息分层 - -[信息分层 DEMO](/examples/feature/features/#lodLevels) - -信息分层可以为复杂的图减少视觉干扰，在放大图后再显示详细信息。可以在上面介绍的 graph 配置的 `node` / `edge` / `combo` 字段中指定 `lodLevels` 字段，如下面代码片段所示。其中 levels 定义了信息分层所响应的图缩放层级，animateCfg 配置由信息分层导致的图形变更时的动画方式。然后需要在不同的图形样式配置中配置 `lod` 字段，来指定该图形在 `levels` 对应的哪个层级显示。 - -```typescript -const graph = new Graph({ - node: { - lodLevels: { - levels: [ - { zoomRange: [0, 0.5] }, // -1 - { zoomRange: [0.5, 1], primary: true }, // 0 - { zoomRange: [1, 1.5] }, // 1 - { zoomRange: [1.5, 1] }, // 2 - { zoomRange: [2, Infinity] }, // 3 - ], - animateCfg: { - duration: 500, - }, - }, - labelShape: { - lod: 1, // 图的缩放大于 levels 第一层定义的 zoomRange[0] 时展示，小于时隐藏 - }, - }, -}); -``` - -或使用 `node` / `edge` / `combo` 函数映射的方式配置： - -```typescript -const graph = new Graph({ - node: (model) => { - const { id, data } = model; - const { isImportant } = data; - return { - id, - data: { - ...data, - // ... 其他配置 - lodLevels: { - levels: [ - { zoomRange: [0, 0.5] }, // -1 - { zoomRange: [0.5, 1], primary: true }, // 0 - { zoomRange: [1, 1.5] }, // 1 - { zoomRange: [1.5, 1] }, // 2 - { zoomRange: [2, Infinity] }, // 3 - ], - animateCfg: { - duration: 500, - }, - }, - labelShape: { - lod: isImportant ? -1 : 2, // 可以根据业务属性来判断在什么层级显示 label。比如是重要节点，则在所有层级都显示文本，否则放大到一定程度后再显示 - }, - }, - }; - }, -}); -``` - -## 3️⃣. 主题配置 - -[主题配置 DEMO](/examples/feature/features/#themeSwitch) - -G6 内置了亮色、暗色主题，也可自定义。使用方式如下： - -```typescript -const graph = new Graph({ - theme: { - type: 'spec', // 内置的主题解析器 - base: 'light', // 使用亮色主题，暗色主题配置 base 为 'dark' - specification: { - node: { - dataTypeField: 'cluster', // 指定节点映射颜色的字段名称 - // palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'], // 自定义色板 - // palette: { a: '#f00', b: '#0f0', c: '#00f' }, // 可以为特殊的字段值指定颜色 - // getStyleSets: (palette) => { - // // 更加自由的配置，针对不同的状态返回不同样式 - // const styleSetsMap = {}; - // Object.keys(palette).forEach((dataType) => { - // const color = palette[dataType]; - // styleSetsMap[dataType] = { - // default: { - // keyShape: { fill: color }, - // labelShape: { fill: color }, - // }, - // state1: { - // keyShape: { fill: '#000' }, - // }, - // state2: { - // keyShape: { stroke: '#f00' }, - // }, - // state3: { - // keyShape: { fill: '#ff0' }, - // }, - // }; - // }); - // return styleSetsMap; - // }, - }, - edge: { - dataTypeField: 'cluster', // 指定边映射颜色的字段 - // ...其他 - }, - }, - }, -}); -``` - -## 4️⃣. 数据处理 - -业务数据格式各异，可能不符合 G6 的数据格式。有时候，可能需要为数据提前计算一些字段，比如节点的度数等。此时，可以使用到 G6 v5 的数据处理模块。它作为 G6 v5 八大类型的扩展之一，在用户数据流入 Graph 之前执行。可以配置多个数据处理模块，它们将被线性执行。配置方法如下： - -```typescript -const graph = new Graph({ - // ... 其他图配置 - transforms: [ - 'transform-v4-data', // 内置的数据处理器，将 v4 的数据格式转换为 v5 - { - // 内置的数据处理器，节点大小映射到节点数据的 value 字段上，大小范围归一化到 [4, 28] - type: 'map-node-size', - field: 'value', - range: [4, 28], - }, - ], -}); -``` - -您可以根据自己的业务数据格式，自定义数据处理器，并注册到 Graph 上后使用： - -```typescript -import { Graph, extend } from '@antv/g6'; - -const CustomDataTransform = (data, options, userGraphCore) => { - data.nodes.forEach((node) => (node.data.cluster = node.data.bussinessState === '0' ? 'cluster1' : 'cluster2')); - data.edges.forEach((edge) => (edge.data.keyShape = { lineWidth: edge.data.weight / 2 })); - return data; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'custom-data-transform': CustomDataTransform, - }, -}); - -const graph = new ExtGraph({ - // ... 其他图配置 - transforms: [ - 'transform-v4-data', // 内置的数据处理器，将 v4 的数据格式转换为 v5 - 'custom-data-transform', // 使用自定义的数据处理器 - ], -}); -``` - -## 5️⃣. 树图和图的融合 - -[图数据与树数据通用 DEMO](/examples/feature/features/#treeAndGraph) - -v5 新增树图相关 feature： - -- 布局与 Graph 通用，Graph 可以指定根节点，使用最小生成树建立树结构后使用树图布局算法； -- 交互与 Graph 通用，Graph 也可以展开和收起“子树”了，即无回溯边的下游节点； -- 支持回溯边、环存在； -- 支持森林（多棵树）。 - -如果需要使用 TreeGraphData，只需要在配置 Graph 时给出一个数据类型的标记： - -```typescript -const graph = new Graph({ - // ... 其他配置项 - data: { - type: 'treeData', // type 可以是 'graphData'、'treeData'、'fetch'，其中 fetch 将在正式版支持 - value: data, // value 在 type 是 treeData 时，可以是 TreeGraphData 或 TreeGraphData[] 以支持森林的绘制 - }, -}); -``` - -`data` 字段可以给 GraphData 类型的数据，那么 G6 将作为普通图处理，并在必要时（如使用树图布局、交互时）生成树图结构。也可以指定 type 为 'treeData' 后给 value 传入 TreeGraphData 类型的数据，那么 G6 将会存储树图结构，并转换为普通图数据进行存储。 - -## 6️⃣. 3D 大图 - -[3D DEMO](/examples/feature/features/#webgl3d) - - - -G6 v5 提供了 3D 大图渲染和交互能力，需要在 Graph 上配置 `renderer: 'webgl-3d'`，并且配置对应的 3D 节点类型（目前仅支持 sphere-node）、3D 交互，即可使用： - -```typescript -import { Graph, Extensions, extend } from '@antv/g6'; -const ExtGraph = extend(Graph, { - nodes: { - 'sphere-node': Extensions.SphereNode, - }, - behaviors: { - 'orbit-canvas-3d': Extensions.OrbitCanvas3D, - 'zoom-canvas-3d': Extensions.ZoomCanvas3D, - }, -}); - -const graph = new ExtGraph({ - renderer: 'webgl-3d', // 可以是 canvas, svg, webgl, webgl-3d - node: { - type: 'sphere-node', - }, - modes: { - defaualt: ['orbit-canvas-3d', 'zoom-canvas-3d'], - }, - // ...其他图配置 -}); -``` - -## 7️⃣. 性能飞跃 & 多渲染器 - -G6 支持了 WebGL 的 2D 和 3D 渲染，渲染性能得到极大提升。各个渲染器还可以在运行时切换。只需要在 Graph Shang 配置不同的 renderer [渲染器 DEMO](/examples/feature/features/#lodLevels)。 - -```typescript -const graph = new Graph({ - // ...其他图配置 - renderer: 'canvas', // 'canvas', 'svg', 'webgl', 'webgl-3d' -}); -``` - -同时，G6 的布局包 @antv/layout 支持了 WASM 计算，使用时需要具体布局算法其从 @antv/layout-wasm 包引入，通过 `extend` 注册到 Graph 上，即可使用。[WASM 布局 DEMO](/examples/feature/features/#wasmLayouts)。 - -```typescript -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; -const ExtGraph = extend(Graph, { - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); - -const supported = await supportsThreads(); -const threads = await initThreads(supported); -const graph = new ExtGraph({ - layout: { - type: 'force-wasm', - threads, - maxIteration: 200, - }, - // ...其他图配置 -}); -``` - -## 8️⃣. 包体积减少 - -G6 v5 仅将最常用的功能默认注册到了 Graph 上，其他功能需要从 @antv/g6 或其他包中引入并注册到 Graph 上后，方可配置到 Graph 上. - -```typescript -import { Graph, extend, Extensions } from '@antv/g6'; -// 外部引入的功能 -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; - -// Class CustomBehaviorClass... -// Class CustomEdge... - -const ExtGraph = extend(Graph, { - behaviors: { - 'activate-relations': Extensions.ActivateRelations, // 内置的交互，未提前注册 - 'some-custom-behavior': CustomBehaviorClass, // 自定义交互 - }, - nodes: { - 'modelRect-node': Extensions.ModelRectNode, // 内置的 modelRect 节点，未提前注册 - }, - edges: { - 'custom-edge': CustomEdge, // 自定义边 - }, - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); - -const supported = await supportsThreads(); -const threads = await initThreads(supported); -// 使用 extend 后的图进行实例化 -const graph = new ExtGraph({ - // ... 其他配置项 - modes: { - default: [ - 'drag-node', // 默认注册的交互 - 'activate-relations', // 刚刚引入并注册的内置交互 - 'some-custom-behavior', // 自定义并注册的交互 - ], - }, - defaultNode: { - type: 'modelRect-node', // 刚刚引入并注册的内置节点类型 - }, - defaultEdge: { - type: 'custom-edge', // 自定义并注册的边类型 - }, - layout: { - type: 'force-wasm', // 刚刚从其他包引入并注册的布局算法 - threads, - maxIteration: 200, - }, -}); -``` - -默认注册的功能有： - -```typescript -const stdLib = { - transforms: { - 'validate-data': ValidateData, // 数据校验器，G6 内部将执行 - 'transform-v4-data': TransformV4Data, // 转换 v4 数据 - 'map-node-size': MapNodeSize, // 将节点大小映射到节点的某个指定的字段上 - }, - themes: { - light: LightTheme, // 亮色主题 - dark: DarkTheme, // 暗色主题 - }, - themeSolvers: { - spec: SpecThemeSolver, // 默认的主题处理器 - }, - layouts: { - force: ForceLayout, // 力导向布局 - grid: GridLayout, // 格子布局 - circular: CircularLayout, // 环形布局 - concentric: ConcentricLayout, // 同心圆布局 - ...Hierarchy, // 所有树图布局，包括 Dendropgram，Indented，Mindmap，CompactBox - }, - behaviors: { - 'drag-canvas': DragCanvas, // 拖拽画布 - 'zoom-canvas': ZoomCanvas, // 缩放画布 - 'drag-node': DragNode, // 拖拽节点 - 'drag-combo': DragCombo, // 拖拽 Combo - 'collapse-expand-combo': CollapseExpandCombo, // 展开/收起 Combo - 'collapse-expand-tree': CollapseExpandTree, // 展开/收起子树 - 'click-select': ClickSelect, // 点击选择 - }, - plugins: {}, - nodes: { - 'circle-node': CircleNode, // 圆形节点 - 'rect-node': RectNode, // 矩形边 - }, - edges: { - 'line-edge': LineEdge, // 直线边 - }, - combos: { - 'circle-combo': CircleCombo, // 圆形 Combo - 'rect-combo': RectCombo, // 矩形 Combo - }, - markers: { - // 一些常用的图标 - collapse: (x, y, r) => { - return [ - ['M', x - r, y], - ['a', r, r, 0, 1, 0, r * 2, 0], - ['a', r, r, 0, 1, 0, -r * 2, 0], - ['M', x - r + 4, y], - ['L', x + r - 4, y], - ]; - }, - expand: (x, y, r) => { - return [ - ['M', x - r, y], - ['a', r, r, 0, 1, 0, r * 2, 0], - ['a', r, r, 0, 1, 0, -r * 2, 0], - ['M', x - r + 4, y], - ['L', x - r + 2 * r - 4, y], - ['M', x - r + r, y - r + 4], - ['L', x, y + r - 4], - ]; - }, - upTriangle: (x, y, r) => { - const l1 = r * Math.cos(Math.PI / 6); - const l2 = r * Math.sin(Math.PI / 6); - return [['M', x - l1, y + l2], ['L', x + l1, y + l2], ['L', x, y - r], ['Z']]; - }, - downTriangle: (x, y, r) => { - const l1 = r * Math.cos(Math.PI / 6); - const l2 = r * Math.sin(Math.PI / 6); - return [['M', x - l1, y - l2], ['L', x + l1, y - l2], ['L', x, y + r], ['Z']]; - }, - }, -}; -``` - -## 9️⃣. 其他微小而美好的改变 - -- 轮廓包裹 Hull 支持文本配置： - -[Hull 支持文本 DEMO](/examples/interaction/hull/#hull) - - - -- 折线支持自动避障： - -[Polyline 避障 DEMO](/examples/item/defaultEdges/#polyline3) - - - -- 文本自动适配宽度： - -[文本自适应 DEMO](/examples/item/label/#copyLabel) - - - -- 采用临时层画布提升交互性能： - - - -- 图例自动从画布中获取样式： - - diff --git a/packages/site/docs/manual/v5/publish.en.md b/packages/site/docs/manual/v5/publish.en.md deleted file mode 100644 index 8abd11d7791..00000000000 --- a/packages/site/docs/manual/v5/publish.en.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Beta Published -order: 2 ---- - -Hi, dear users, let GPT bring you some good news: -Behold, we are thrilled to announce that AntV G6 5.0 Beta version is shining today! This is a data visualization feast that will explode your visual senses. It is professional and elegant, and it will definitely give you a satisfying experience! - -## 🚀 High-performance Rendering & Computation - -We have an high performance rendering technology! G6 5.0 Beta uses high-performance Canvas and WebGL rendering, combined with the coolness of WASM and GPU layout. No matter how large your data is, we can handle it with ease! - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NUFVRqAJv6QAAAAAAAAAAAAADmJ7AQ/original) - -Layout computation for thousands of nodes and edges is just a breeze! - -![layout-wasm.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tG8ZTaaeeFMAAAAAAAAAAAAADmJ7AQ/original) - -## 🌠 3D Large Graph - -Hey, we can not only do ordinary 2D graph visualization! G6 5.0 Beta supports powerful 3D large graph capabilities, allowing you to fully explore complex and massive graph data! Zoom, pan, and interact smoothly, we dare you to challenge us! - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3hOPToWw9NsAAAAAAAAAAAAADmJ7AQ/original) - -## 🎞 Visual and Animation Specifications - -Our designer friends have put a lot of effort into creating a complete set of visual and animation specifications for charts! From color palettes to graph arrangements, as long as you can imagine it, you can achieve it with a simple JSON Spec! Take your charts to new heights! - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*48CQRI81wjAAAAAAAAAAAAAADmJ7AQ/original) - -Animations on item shapes and view ports: - -![animation-7.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NJLgR5H104gAAAAAAAAAAAAADmJ7AQ/original) - -Information layering, making large graphs less chaotic: - -![lod.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vRH-TZU93PcAAAAAAAAAAAAADmJ7AQ/original) - -## 🎨 New Theme Mechanism - -What kind of style do you want? With G6 5.0 Beta, it's all up to you! The new theme mechanism allows you to customize the style theme of your charts, whether it's consistent with your brand or pursuing unique individuality, we can meet your requirements! - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XVd6S62Pl_YAAAAAAAAAAAAADmJ7AQ/original) - -## 🎄 Fusion of Tree Graph and Graph - -It's time to integrate your graphs - normal graphs with tree graph layout and interaction? No problem! Forests? We can draw them too! Tree graph with rings? We can handle that too! -G6 5.0 Beta supports loading both graph data and tree graph data, providing universal interaction and layout capabilities. Whether it's network graph data or hierarchical tree structure data, we have a comprehensive solution for you! - -![tree-graph.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TvNWRIOISrQAAAAAAAAAAAAADmJ7AQ/original) - -## 🤖 Data Transformers - -Don't worry about data transformations anymore. G6 5.0 Beta provides flexible data processor extensions, allowing you to freely handle data! Filtering, transforming, you can play with data in any way you want! Overwhelmed by the messy data from the backend? Need to convert v4 data format to v5 format with one click? No worries! - -## ⛳️ All is Extensions - -Wow! Extensions for everyone, everything is extensible! Customized implementation = Built-in implementation! You can add various novel interaction methods to your charts, making them full of creativity and visual impact! Your imagination is our limit! - -## 📦 Package Size Optimization - -Small package size, big capabilities, making it easy for your projects to perform at their best! We aim to provide you with the best performance and fastest loading speed! - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PMfOQ4YOX1oAAAAAAAAAAAAADmJ7AQ/original) - -## 🤔 How to Use These Features? - -Read this comprehensive guide and you'll understand everything~ - -- 【[Migrate Guide](/en/manual/upgrade)】 -- 【[How to use the Features](/en/manual/new-features)】 -- 【[Feature DEMOs](/en/examples)】 - -## 🌸 More Small and Wonderful Changes - -- Hull supports text configuration. -- Polyline supports automatic obstacle avoidance. -- Text automatically adapts to width. -- Improved interactive performance by using a temporary layer canvas. -- Legend automatically retrieves styles from the canvas. - -## 💪 We are not Alone! - -G6 belongs to the community, and the successful release of the Beta version is thanks to the contributions from the community. Thank you all for your dedication! Even the smallest contribution makes you a part of the G6 family! Special thanks to all of you (in no particular order): - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qu7ZRozkD6UAAAAAAAAAAAAADmJ7AQ/original) - -Because of G6, there is a romantic connection among developers (Experience the product link in the image below, inquire through GitHub Issue~): - -![g6-network2.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QaDWQZOeAHEAAAAAAAAAAAAADmJ7AQ/original) - -Next, let's move forward to the official version of G6! We continue to recruit community contributors. Please pay attention to the "bounty" labeled issues in GitHub Issue. We will continue to release tasks, such as: - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VmUNR40RdmwAAAAAAAAAAAAADmJ7AQ/original) - -Come and join our feast, and experience the charm of AntV G6 5.0 Beta version together! Visit the official website of G6 5.0 at [https://g6-next.antv.antgroup.com/en/](/en/) to access the 【[Migrate Guide](/en/manual/upgrade)】,【[How to use the Features](/en/manual/new-features)】，【[Feature DEMOs](/en/examples)】. And get more detailed information and example code. We look forward to hearing your astonishment and sharing. - -⭐️ Please also give us a GitHub Star at [https://github.com/antvis/G6](https://github.com/antvis/G6) to make G6 even more perfect! The AntV G6 development team is looking forward to creating miracles with you! diff --git a/packages/site/docs/manual/v5/publish.zh.md b/packages/site/docs/manual/v5/publish.zh.md deleted file mode 100644 index d189985c95a..00000000000 --- a/packages/site/docs/manual/v5/publish.zh.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Beta 发布稿 -order: 2 ---- - -Hi 亲爱的用户，发布稿咱也不想写了，就让 GPT 老师发来喜报吧： -瞧瞧，我们正大喜过望地宣告：AntV G6 5.0 Beta 版本今天闪亮登场！这是一次引爆你视觉感官的数据可视化盛宴，专业又优雅，必须让你大呼过瘾！ - -### 🚀 高性能渲染 & 计算 - -我们拥速度嗖嗖嗖的渲染技术！G6 5.0 Beta 采用高性能 Canvas 和 WebGL 渲染，加上 WASM 和 GPU 布局的酷炫加持，你想玩大规模数据，我们都能秒杀！ - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NUFVRqAJv6QAAAAAAAAAAAAADmJ7AQ/original) - -几千点边，布局计算就是一瞬间的事！ - -![layout-wasm.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tG8ZTaaeeFMAAAAAAAAAAAAADmJ7AQ/original) - -### 🌠 3D 大图 - -嗨，别以为我们只能做平平无奇的 2D 图可视化！G6 5.0 Beta 支持了超强 3D 大图能力，让你尽情嗨玩复杂庞大的图数据吧！唰唰唰，流畅的渲染和交互体验等你来挑战！ - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3hOPToWw9NsAAAAAAAAAAAAADmJ7AQ/original) - -### 🎞 视觉和动画规范 - -咱们的设计师小伙伴们可是费尽心思打造了一整套图表视觉和动画规范哦！从色板到图形排列，只要你敢想，就能通过简单的 JSON Spec 实现！让你的图表炫出新高度！ - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*48CQRI81wjAAAAAAAAAAAAAADmJ7AQ/original) - -元素图形动画、视口动画，简单定义，优雅呈现： - -![animation-7.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NJLgR5H104gAAAAAAAAAAAAADmJ7AQ/original) - -信息分层，让大图不再混乱： - -![lod.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vRH-TZU93PcAAAAAAAAAAAAADmJ7AQ/original) - -### 🎨 新增主题机制 - -你想要什么样的风格？G6 5.0 Beta 一切随你！新增主题机制，让你尽情定制图表的样式主题，无论是与品牌一致，还是追求个性独特，我们都能满足你的要求！ - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XVd6S62Pl_YAAAAAAAAAAAAADmJ7AQ/original) - -### 🎄 树图和图融合 - -是时候让你的图融会贯通了 —— 普通图用树图布局和交互，能行！森林，能画！树图加环，能画！ -G6 5.0 Beta 支持图数据和树图数据的读取，提供通用的交互和布局功能。不管是网络图数据还是嵌套结构数据，我们都给你全方位解决方案！ - -![tree-graph.gif](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TvNWRIOISrQAAAAAAAAAAAAADmJ7AQ/original) - -### 🤖 数据处理器 - -小小的数据转换还有什么好担心的？G6 5.0 Beta 提供了灵活的数据处理器扩展，让你自由发挥处理数据的能力！筛选、转换，你想怎么玩都行！后端给的数据纷纷扰扰？v4 数据格式一键转换为 v5 格式？根本不在怕的！ - -### ⛳️ 全民插件化 - -哇哦！全民插件化，一切皆可是扩展！自定义写法 = 内置写法！你可以为图表增添各种新奇的交互方式，让你的图表充满创意和视觉冲击力！你的想象力是我们的极限！ - -### 📦 包体积优化 - -小小的体积，大大的能力，让你的项目轻松上阵！我们就是要给你最好的性能和最快的加载速度！ - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PMfOQ4YOX1oAAAAAAAAAAAAADmJ7AQ/original) - -### 🌸 还有一些微小而美好的改变 - -- 轮廓包裹 Hull 支持文本配置； -- 折线支持自动避障； -- 文本自动适配宽度； -- 采用临时层画布提升交互性能； -- 图例自动从画布中获取样式。 - -### 🤔 这些功能咋用呢？ - -干下这篇十全大补文，你就都懂了～ - -- 【[迁移指南](/manual/upgrade)】； -- 【[新功能怎么用](/manual/new-features)】； -- 【[新功能 DEMO](/examples)】。 - -### 💪 不止我们在战斗 - -G6 是社区的 G6，Beta 版能够成功发布，还多亏了社区的贡献者们，感谢大家的倾情奉献！即使是再小的修改，你也是 G6 人了！在此特别鸣谢你们（排名不分先后）： - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qu7ZRozkD6UAAAAAAAAAAAAADmJ7AQ/original) - -因为 G6，有了属于开发者们的浪漫连接（体验下图产品链接，GitHub Issue 来询～）： - -![g6-network2.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QaDWQZOeAHEAAAAAAAAAAAAADmJ7AQ/original) - -下一步，向 G6 正式版进发！我们继续招募社区贡献者，请在 GitHub Issue 中关注和检索「悬赏」 label 的 Issue，我们会持续发布任务，例如： - -![image.png](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VmUNR40RdmwAAAAAAAAAAAAADmJ7AQ/original) - -快来参与我们的盛宴，一起体验 AntV G6 5.0 Beta 版本的魅力吧！访问 G6 5.0 的官网：[https://g6-next.antv.antgroup.com/](/)，获取【[迁移指南](/manual/upgrade)】、【[新功能 DEMO](/examples)】、【[新功能怎么用](/manual/new-features)】。更获取更多详细信息和示例代码。我们期待听到你的惊叹和分享。 - -⭐️ 还请大家为我们点亮 GitHub Star [https://github.com/antvis/G6](https://github.com/antvis/G6)，让 G6 变得更加完美！AntV G6 开发团队，期待与你共创奇迹！ diff --git a/packages/site/docs/manual/v5/upgrade.en.md b/packages/site/docs/manual/v5/upgrade.en.md deleted file mode 100644 index 7acae840000..00000000000 --- a/packages/site/docs/manual/v5/upgrade.en.md +++ /dev/null @@ -1,743 +0,0 @@ ---- -title: Update from v4 to v5 -order: 4 ---- - -Compared to G6 v4, G6 v5 introduces new capabilities in the following areas: - -- 🎞 **Visual and Animation Specification**: Define styles and animations using JSON spec; -- 📂 Information **Level of Details**; -- 🎨 Simple and flexible **Theme Configuration** ability; -- 🤖 Flexible and powerful **Data Processing** capability; -- 🎄 **Fusion of Tree Diagram and Graph** structure; -- 🏀 **3D large graph** support; -- 🚀 **Performance Improvements**, including rendering and layout computations; -- 🌠 **Multiple Renderers** that can be switched at runtime. -- 📦 Reduced package size with support for **TreeShaking**. - -And more small and wonderful changes: - -- Hull supports text configuration. -- Polyline supports automatic obstacle avoidance. -- Text automatically adapts to width. -- Improved interactive performance by using a temporary layer canvas. -- Legend automatically retrieves styles from the canvas. - -The official version is coming soon. If these features are what you have been waiting for, you can now try the G6 5.0 Beta version! If you encounter any upgrade issues, please leave us a message on GitHub. - -To support these new capabilities, there are significant Breaking Changes in G6 5.0 compared to v4, which may require some effort to upgrade. We hope that the benefits brought by the new capabilities outweigh the upgrade costs. - -## 0️⃣. How to Use the New Features - -See [How to Use the Features](./new-features.en.md). - -## 1️⃣. Changes in Data Format - -To achieve data layering, prevent data pollution, and better avoid the mixture of business data and rendering data, there have been significant changes to the data structure in G6 v5 compared to v4. The specific changes are as follows. G6 v5 provides a transformation handler for v4 data, which can be configured for use in the data processing module, for example: - -```typescript -const graph = new Graph({ - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - // ... other configurations - data: v4data, // A set of data in v4 format -}); -``` - -The specific differences between the data formats of v4 and v5 are as follows: - -### v4 Data Structure - -```typescript -type GraphData = { - nodes: NodeModel[]; - edges: EdgeModel[]; - combos: ComboModel[]; -}; - -type ItemModel = { - id: string; - type?: string; // noe type, e.g. (if it is node) circle, rect, etc. - label?: string; // label content - color?: string; // keyShape color - size?: number | number[]; // keyShape size - visible?: boolean; - style?: { [shapeAttr: string]: unkown }; // keyShape style - labelCfg?: { - position?: string; - offset: number; - refX: number; - refY: number; - style?: { [shapeAttr: string]: unkown }; // label style - background?: { [shapeAttr: string]: unkown }; // label's background style - }; -}; - -type NodeModel = ItemModel & { - comboId?: string; - x?: number; - y?: number; - anchorPoints?: number[][]; - icon?: { - show?: boolean; - img?: string; - text?: string; - width?: number; - height?: number; - offset?: number; - }; - linkPoints?: { - top?: boolean; - right?: boolean; - bottom?: boolean; - left?: boolean; - size?: number; - [shapeAttr: string]: unkown; - }; - // There will be different configurations for different node types - // e.g. modelRect's preRect, image's clipCfg, etc. -}; - -type EdgeModel = ItemModel & { - source: string; - target: string; - sourceAnchor?: number; - targetAnchor?: number; - controlPoints?: IPoint[]; // for polyline - loopCfg?: LoopConfig; // for loop - curveOffset?: number | number[]; // for quadratic/cubic - minCurveOffset?: number | number[]; // for quadratic/cubic - curvePosition?: number | number[]; // for quadratic/cubic -}; -``` - -### v5 Data Structure - -In v5, for node data, except for id, and for edge data, except for id, source, and target, all content should be placed in the data object: - -```typescript -type GraphData = { - nodes: NodeModel[]; - edges: EdgeModel[]; - combos: ComboModel[]; -}; - -type NodeModel = { - id: string; - data: { - type?: string; // node type, e.g. circle-node, rect-node - x?: number; - y?: number; - z?: number; - parentId?: string; // parent combo's id - label?: string; // label content - anchorPoints?: number[][]; - badges?: { - type: 'icon' | 'text'; - text: string; - position: BadgePosition; - }[]; - icon?: { - type: 'icon' | 'text'; - text?: string; - img?: string; - }; - [key: string]: unknown; // other properties - }; -}; - -type EdgeModel = { - id: string; - source: string; - target: string; - data: { - type?: string; // edge type, e.g. line-edge - label?: string; // label content - sourceAnchor?: number; - targetAnchor?: number; - icon?: { - type: 'icon' | 'text'; - text?: string; - img?: string; - }; - badge?: { - type: 'icon' | 'text'; - text: string; - }; - [key: string]: unknown; // other properties - }; -}; -``` - -## 2️⃣. Data Loading - -### v4 Data Loading - -```typescript -import { Graph } from '@antv/g6'; -import data from './data'; -const graph = new Graph({ - // ... configuration -}); -graph.data(data); -graph.render(); -// Or combine the above two lines as: graph.read(data); -``` - -### v5 Data Loading - -The `graph.data(data)` and `graph.render()` methods are no longer supported. You can still use `graph.read(data)` or directly configure the data on the graph: - -```typescript -import { Graph } from '@antv/g6'; -import data from './data'; -const graph = new Graph({ - // ... configuration - data: data, -}); -// Or use: graph.read -``` - -## 3️⃣. Tree Graph - -[Graph Data in Tree Layout DEMO](/en/examples/feature/features/#treeAndGraph) - -v5 introduces new features related to Tree Graph: - -- The layout and interaction are now universal in Graph. Graph can specify a root node and use the minimum spanning tree to establish the tree structure before using the tree graph layout algorithm. -- The interaction is now universal in Graph. Graph can expand and collapse "subtrees", which are nodes downstream without backtracking edges. -- Supports backward edges and loops. -- Supports forests (multiple trees). - -### Issues with v4 Tree Graph - -The v4 Tree Graph has its own data structure (TreeGraphData as shown below), graph class (TreeGraph), interaction (collapse-expand), and layouts (Dendrogram/Indented/Mindmap/CompactBox). The data structure and layout methods are not universal in Graph, which makes it difficult for users to understand and convert: - -- "How do I draw multiple trees?" - Not supported. -- "How do I add edges in a tree graph?" - Tree graphs do not allow loops. -- "How do I use a tree graph layout in a general graph?" - The layout is not universal. -- In v5, TreeGraph and Graph have been merged comprehensively. - -```typescript -// TreeGraph -type TreeGraphData { - id: string; - [key: string]: unknown; - children: TreeGraphData[]; -} -``` - -TreeGraph data has a nested structure and does not have explicit edges. The parent-child relationship represents the edges. -TreeGraph does not support combo data configuration. -Does not support loops and forests (multiple trees). - -### v5 Tree Graph - -In v5, the graph now supports the data format of TreeGraph, and the layouts and interactions of both tree graph and general graph are now universal. If you need to use TreeGraphData, you just need to provide a data type flag when configuring the Graph: - -```typescript -const graph = new Graph({ - // ... other configurations - data: { - type: 'treeData', // type can be 'graphData', 'treeData', 'fetch', where fetch will be supported in the official version - value: data, // when type is treeData, value can be TreeGraphData or TreeGraphData[] to support drawing forests - }, -}); -``` - -In the "Data Loading" section above, we introduced the types of the data field. You can directly provide data of type GraphData, and G6 will handle it as a normal graph and generate tree graph structures when necessary (such as using tree graph layout and interaction). You can also specify the type as 'treeData' and provide data of type TreeGraphData to store the tree graph structure and convert it into normal graph data for storage. - -In other words, in v5, there is no longer a separate TreeGraph class. There is only one Graph class. The APIs specific to the TreeGraph class in v4 can be replaced as follows: - -| Functionality | v4 TreeGraph API | v5 Alternative | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| Add a subtree under a specified parent node | treeGraph.addChild(data, parent) | `graph.addData('node', { id: 'new-child' })`;
`graph.addData('edge', { source: 'parent-node-id', target: 'new-child' })` | -| Remove a specified subtree | treeGraph.removeChild(id) | `graph.removeData('node', 'id-of-a-node')`, if the removed node is not a leaf node, its child nodes are promoted to roots | -| Partially update a subtree img | treeGraph.updateChild(data, parentId) | `graph.updateItem('node', { id: 'id-of-a-node', data: { ... }})` to update each node | -| Partially update subtreesimg | treeGraph.updateChildren(data, parentId) | Same as above | -| Change the parent node | Remove the child node from the original parent node by removeChild and add it to the new parent node by addChild | graph.updateData('node', { id: 'child-id', { parentId: 'new-parent-id' }}) | - -## 4️⃣. Element Type Names - -In v4, the built-in node types include circle, rect, ellipse, star, image, etc. These names may be ambiguous with the types of shapes. Therefore, in v5, they will be renamed to xx-node. For example, circle-node, rect-node, ellipse-node, star-node, image-node. - -Similarly, edges will be renamed to line-edge, polyline-edge, cubic-edge, etc. - -## 5️⃣. Introduction of Features - -### Using Features in v4 - -In v4, all features are automatically included in G6 by default, so they can be specified as strings when configuring the graph. This results in a large package size. For example: - -```typescript -import { Graph } from '@antv/g6'; -const graph = new Graph({ - // ... other configurations - modes: { - default: ['drag-node', 'scroll-canvas'], // interaction names - }, - defaultNode: { - type: 'circle', // node type name - }, - defaultEdge: { - type: 'rect', // node type name - }, - layout: { - type: 'radial', - }, -}); -``` - -### Introduction and Use of Features in v5 - -In order to better support TreeShaking, only some basic capabilities are pre-registered in v5, and other built-in capabilities that have been implemented need to be manually registered by the user. Similarly, custom capabilities also need to be registered in the same way: - -```typescript -import { Graph, extend, Extensions } from '@antv/g6'; -// External features -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; -// Class CustomBehaviorClass... -// Class CustomEdge... -const ExtGraph = extend(Graph, { - behaviors: { - 'activate-relations': Extensions.ActivateRelations, // built-in interaction, not pre-registered - 'some-custom-behavior': CustomBehaviorClass, // custom interaction - }, - nodes: { - 'modelRect-node': Extensions.ModelRectNode, // built-in modelRect node, not pre-registered - }, - edges: { - 'custom-edge': CustomEdge, // custom edge - }, - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); -const supported = await supportsThreads(); -const threads = await initThreads(supported); -// Instantiate the graph using the extended graph -const graph = new ExtGraph({ - // ... other configurations - modes: { - default: [ - 'drag-node', // default registered interaction - 'activate-relations', // newly introduced and registered built-in interaction - 'some-custom-behavior', // custom interaction that was previously imported and registered - ], - }, - defaultNode: { - type: 'modelRect-node', // newly introduced and registered built-in node type - }, - defaultEdge: { - type: 'custom-edge', // custom and registered edge type - }, - layout: { - type: 'force-wasm', // layout algorithm that was previously imported and registered from another package - threads, - maxIteration: 200, - }, -}); -``` - -## 6️⃣. Layout Usage - -We have refactored @antv/layout in v5, and considering the package size, we have only built-in circular / concentric / grid / force layouts. The usage is the same as v4. You can specify the layout name through type and pass in other layout parameters: - -```typescript -new Graph({ - //...other configurations - layout: { - type: 'force', // layout name - preventOverlap: true, - nodeSize: 30, - workerEnabled: true, // support running in WebWorker - }, -}); -``` - -For non-built-in layouts, we provide the following usage methods: - -Use JS-based serial layout algorithm similar to @antv/layout in v4; -Use the layout algorithm based on Rust bound to WASM and multiple WebWorkers in @antv/layout-wasm; -Use the parallel layout algorithm based on WebGPU in @antv/layout-gpu; -Fully custom layout. -Compared with v4, G6 needs an additional step of registering the layout to the runtime standard library. Although some layouts may require additional asynchronous startup steps due to different implementations, the layout configuration is consistent. You can specify the layout name through type and then pass in other layout parameters. - -The following example demonstrates the use of the newly added @antv/layout-wasm in v5. First, you need to register it to the runtime standard library of G6 and provide a custom layout name, which will be passed to layout later. - -[WASM Layout DEMO](/en/examples/feature/features/#wasmLayouts) - -```typescript -import { stdLib, Graph } from '@antv/g6'; -import { supportsThreads, initThreads, ForceLayout as ForceLayoutWASM } from '@antv/layout-wasm'; -// Register custom layout -const ExtGraph = extend(Graph, { - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); -// Start WebWorker thread pool -const supported = await supportsThreads(); -const threads = await initThreads(supported); -// Use the extended Graph -new ExtGraph({ - //...omit other configurations - layout: { - type: 'force-wasm', // consistent with the registration name - threads, // thread configuration - dimensions: 2, - maxIteration: 100, - //...omit other parameters of this layout - }, -}); -``` - -If the provided layout implementations cannot meet your requirements, you can also fully customize the layout. When implementing the Layout interface provided by @antv/layout, you only need to implement the execute method and set assign to null. This ensures that the original graph model data is not affected. - -```typescript -import { Layout, LayoutMapping } from '@antv/layout'; -class MyCustomLayout implements Layout<{}> { - async assign(graph, options?: {}): Promise { - throw new Error('Method not implemented.'); - } - async execute(graph, options?: {}): Promise { - const nodes = graph.getAllNodes(); - return { - nodes: nodes.map((node) => ({ - id: node.id, - data: { - x: 0, - y: 0, - }, - })), - edges: [], - }; - } - options: {}; - id: 'myCustomLayout'; -} -// Register custom layout -const ExtGraph = extend(Graph, { - layouts: { - myCustomLayout: MyCustomLayout, - }, -}); -// Use the extended Graph -new ExtGraph({ - layout: { - type: 'myCustomLayout', - }, -}); -``` - -## 7️⃣. Node/Edge/Combo Instance - -In G6 v4, item instances of nodes and edges were exposed to users, but most of their APIs were covered by Graph. We recommend using Graph's APIs to facilitate unified management and interaction between multiple related nodes and edges. Therefore, in v5, we no longer expose item instances of nodes and edges, so the APIs are concentrated on Graph, and you can obtain the data of single/multiple nodes/edges through Graph, but cannot obtain the item. - -### Usage with item in v4 - -```typescript -// Get all item instances on the graph -graph.getNodes(); -graph.getEdges(); -graph.getCombos(); -// Item object being listened -graph.on('node:click', (e) => { - const { item } = e; // item is the clicked item instance - const itemType = item.getType(); // get the item type -}); -// Get the data of the instance -item.getModel(); -// Update the data of the instance -graph.updateItem(item, { - // data -}); -// Add node/edge/combo -graph.addItem('node', { - // ...data -}); -// Remove node/edge/combo -graph.removeItem(item); -``` - -### Replacement API in v5 - -```typescript -// Fetch all the data (inner data) from graph -graph.getAllNodesData(); -graph.getAllEdgesData(); -graph.getAllCombosData(); - -// parameters in event listeners -graph.on('node:click', (e) => { - // the clicked item's type and id - const { itemType, itemId } = e; -}); - -// fetch single data (inner data) from graph -graph.getNodeData(id); -graph.getEdgeData(id); -graph.getComboData(id); - -// update node(s)/edge(s)/combo(s) -graph.updateData('node', [nodeModel1, nodeModel2]); -// add node(s)/edge(s)/combo(s) -graph.removeData('node', [nodeModel1, nodeModel2]); -// remove node(s)/edge(s)/combo(s) -graph.removeData('node', [id1, id2]); -``` - -## 8️⃣. Style Configuration - -In v4, detailed graphic styles can be configured in the data or in the defaultNode and defaultEdge options of the graph. This can result in confusion when managing data as business properties and style configurations may be mixed together. Additionally, in v4, node/edge style configurations are static and global, meaning they cannot be mapped differently for different data. - -### Global Style Configuration in v4 - -```typescript -const graph = new Graph({ - // ...other configurations - defaultNode: { - type: 'circle', - style: { - fill: '#f00', - r: 20, - }, - }, - defaultEdge: { - type: 'poliline', - style: { - stroke: '#0f0', - lineWidth: 2, - }, - }, -}); -``` - -### Style Mapping in v5 - -In v5, we recommend that users keep only necessary business properties and important simple style configurations (such as text content, badges, etc.) in the data, and place the style configurations in the node/edge mapper of the graph. Mappers are used in v5 to convert internal data flow into rendering data, and they are configured by users in the Graph JSON configuration. Of course, there are also some built-in mapper logics to convert text content, badges, etc. from user data to corresponding graphic properties. - -```typescript -const graph = new Graph({ - // ...other configurations - node: nodeInnerModel => { - const { id, data } = nodeInnerModel; - // Return type is shown in the DisplayNodeModel type below - return { - id, - data: { - ...data, - keyShape: { - fill: data.important ? '#f00' : '#ccc', - r: 20 - }, - labelShape: { - text: data.label, - position: 'bottom' - }, - } - } - }, - // Edge configuration is similar - edge: edgeInnerModel => { - // Return type is shown in the DisplayEdgeModel type below - return {...} - } -}); -// Content returned by the style configuration -type DisplayNodeModel = NodeModel & { - id: string; - type?: string; // Element type, e.g. circle-node, rect-node - data: { - x?: number; - y?: number; - z?: number; - keyShape?: { [shapeAttr: string]: unknown }, // Styles of keyShape - // Configuration and style for label. If not configured, this graphic does not exist. - labelShape?: { - position?: string, - offsetX?: number, - offsetY?: number, - offsetZ?: number; - [shapeAttr: string]: unknown - }, - labelBackground?: { [shapeAttr: string]: unknown }, // Styles of label background. If not configured, this graphic does not exist. - iconShape?: { [shapeAttr: string]: unknown }, // Styles of icon. If not configured, this graphic does not exist. - badgeShapes?: { - // Common style for all badge graphics. If not configured, this graphic does not exist. - color?: string; - textColor?: string; - [shapeAttr: string]: unknown; - // Individual styles and configurations for each badge - [key: number]: { - position?: IBadgePosition; - color?: string; - textColor?: string; - [shapeAttr: string]: unknown; - }; - }; - anchorShapes?: { - // Common style for all anchor graphics. If not configured, this graphic does not exist. - color?: string; - textColor?: string; - size?: number; - offsetX?: number; - offsetY?: number; - offsetZ?: number; - [shapeAttr: string]: unknown; - // Individual styles and configurations for each anchor - [key: number]: { - position?: BadgePosition; - color?: string; - textColor?: string; - size?: number; - offsetX?: number; - offsetY?: number; - offsetZ?: number; - [shapeAttr: string]: unknown; - }; - }; - } -} -type DisplayEdgeModel = { - id: string; - source: string, - target: string, - data: { - type?: string, // Element type, e.g. line-edge - sourceAnchor?: number, - targetAnchor?: number, - } -} -``` - -## 9️⃣. Events and Event Parameters - -In v4, mousexx events were changed to pointerxx events in v5 to better support mobile events, as shown below: - -```typescript -// v4 -graph.on('node:mousemove', (e) => {}); -// v5 -graph.on('node:pointermove', (e) => {}); -// Similar event names: -// mousemove -> pointermove -// mouseenter -> pointerenter -// mouseleave -> pointerleave -// mousedown -> pointerdown -// mouseup -> pointerup -``` - -### v4 Event Parameters - -```typescript -type GraphEvent = { - item: Node | Edge | Combo; - target: Shape; - x: number; - y: number; - pointX: number; - pointY: number; - canvasX: number; - canvasY: number; - clientX: number; - clientY: number; - //... other parameters -}; -``` - -### v5 Event Parameters - -In v5, elements are no longer exposed and the item will no longer exist in the event parameters. The v5 event parameters are as follows: - -```typescript -type GraphEvent = { - itemId: string | number; - itemType: 'node' | 'edge' | 'combo'; - target: Shape; - // Coordinates of the current operation in four coordinate systems - canvas: { x: number; y: number; z: number }; // Corresponds to x y or pointerX pointerY in v4, the coordinates for drawing the graph - client: { x: number; y: number }; // Corresponds to clientX clientY in v4, the coordinates relative to the browser coordinate system - viewport: { x: number; y: number }; // Corresponds to canvasX canvasY in v4, the coordinates relative to the Canvas DOM coordinate system - screen: { x: number; y: number }; // Coordinates relative to the entire screen - //... other parameters -}; -``` - -## 🔟. Coordinate Systems - -### v4 Coordinate Systems - -The v4 coordinate systems (three sets) are described in the documentation: https://g6.antv.antgroup.com/manual/advanced/coordinate-system - -- v4 - clientX clientY: Coordinates relative to the browser coordinate system - - - - -- v4 - canvasX canvasY: Coordinates relative to the canvas DOM - - - -- v4 - pointX pointY (same as x y in v4 events): Coordinates for drawing the graph - - - -### v5 Coordinate Systems - -It should be noted that the coordinate systems in v5 (four sets) have different names. - -| Meaning | v4 Coordinates | v5 Coordinates | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------- | -| Coordinates for drawing the graph | { x, y } or { pointerX, pointerY } | canvas: { x: number; y: number; z: number } | -| Coordinates relative to the browser coordinate system | { clientX, clientY } | client: { x: number; y: number; z: number } | -| Coordinates relative to the Canvas DOM coordinate system 系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } | -| Coordinates relative to the entire screen | none | screen: { x: number; y: number; z: number } | - -## 🌸. More small and wonderful changes - -- Hull supports text configuration: - -You only need to configure the labelShape for the Hull instance, and you can specify its relative position (`position`) in four directions: above, below, left, or right of the hull. - -[Hull with Label DEMO](/examples/interaction/hull/#hull) - - - -- Polyline supports automatic obstacle avoidance: - -Set `keyShape.routeCfg.enableObstacleAvoidance: true` for the edge to automatically avoid nodes. - -[Polyline Obstacle Avoidance DEMO](/examples/item/defaultEdges/#polyline3) - - - -- Text automatically adapts to width: - -Setting the `maxWidth` of the node's text shape allows you to specify the maximum width in pixels as a number or as a percentage of the keyShape. For example: - -```javascript -const graph = new Graph({ - node: { - labelShape: { - maxWidth: '120%', - }, - }, -}); -``` - -[Label Fit Width DEMO](/examples/item/label/#copyLabel) - - - -- Improved interactive performance by using a temporary layer canvas: - - - -- Legend automatically retrieves styles from the canvas: - - diff --git a/packages/site/docs/manual/v5/upgrade.zh.md b/packages/site/docs/manual/v5/upgrade.zh.md deleted file mode 100644 index 54647d3c4f7..00000000000 --- a/packages/site/docs/manual/v5/upgrade.zh.md +++ /dev/null @@ -1,790 +0,0 @@ ---- -title: 从 v4 升级到 v5 -order: 4 ---- - -相较于 v4，G6 v5 的新能力体现在： - -- 🎞 **视觉与动画规范**，使用 JSON spec 或映射函数的方式定义样式与动画； -- 📂**信息分层**能力； -- 🎨 简单灵活的**主题**配置能力； -- 🤖 灵活强大的**数据处理**能力； -- 🎄 **树图**和**图**结构的融合； -- 🏀 **3D** 大图； -- 🚀 **性能**飞跃，包括渲染与布局计算； -- 🌠 **多渲染器**，可运行时切换； -- 📦 **包体积减少**，支持 TreeShaking。 - -还有其他一些微小而美好的改变： - -- 轮廓包裹 Hull 支持文本配置； -- 折线支持自动避障； -- 文本自动适配宽度； -- 采用临时层画布提升交互性能； -- 图例自动从画布中获取样式。 - -正式版即将来袭。如果上面 Feature 是您所期待的，现在就可以使用 G6 5.0 Beta 版本进行尝鲜！若遇到任何升级问题，请在 GitHub 给我们留言。 - -为了支持上述全新能力，G6 5.0 相比于 v4 有比较大的 Breaking Change，这可能带来一定的升级成本。希望上面全新能力带来的收益远大于升级成本。 - -## 0️⃣. 新功能怎么用 - -参考 [如何使用新功能](./new-features.zh.md). - -## 1️⃣. 数据格式变更 - -为了数据分层，防止数据污染，并更好地避免业务数据和渲染数据混杂的情况，和 v4 相比，v5 的数据结构有了比较大的变更，具体变更如下。G6 v5 提供了 v4 数据的转换处理器，可以在数据处理模块配置使用，例如： - -```typescript -const graph = new Graph({ - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - // ... 其他配置 - data: v4data, // 一份 v4 格式的数据 -}); -``` - -v4 与 v5 的具体数据格式区别如下： - -### v4 数据结构 - -```typescript -type GraphData = { - nodes: NodeModel[]; - edges: EdgeModel[]; - combos: ComboModel[]; -}; - -type ItemModel = { - id: string; - type?: string; // 元素类型，e.g. 如是节点，则可能是 circle, rect 等注册过的节点类型名 - label?: string; // label 的文本 - color?: string; // keyShape 的颜色 - size?: number | number[]; // keyShape 的大小 - visible?: boolean; - style?: { [shapeAttr: string]: unkown }; // keyShape 的样式 - labelCfg?: { - position?: string; - offset: number; - refX: number; - refY: number; - style?: { [shapeAttr: string]: unkown }; // label 的样式 - background?: { [shapeAttr: string]: unkown }; // label 背景的样式 - }; -}; - -type NodeModel = ItemModel & { - comboId?: string; - x?: number; - y?: number; - anchorPoints?: number[][]; - icon?: { - show?: boolean; - img?: string; - text?: string; - width?: number; - height?: number; - offset?: number; - }; - linkPoints?: { - top?: boolean; - right?: boolean; - bottom?: boolean; - left?: boolean; - size?: number; - [shapeAttr: string]: unkown; - }; - // 根据节点类型不同，有不同的图形相关配置， - // e.g. modelRect 的 preRect, image 的 clipCfg 等 -}; - -type EdgeModel = ItemModel & { - source: string; - target: string; - sourceAnchor?: number; - targetAnchor?: number; - controlPoints?: IPoint[]; // polyline 特有 - loopCfg?: LoopConfig; // loop 特有 - curveOffset?: number | number[]; // quadratic/cubic 特有 - minCurveOffset?: number | number[]; // quadratic/cubic 特有 - curvePosition?: number | number[]; // quadratic/cubic 特有 -}; -``` - -### v5 数据结构 - -v5 的节点数据除了 id，边数据除了 id、source、target 这些字段外，所有的内容应当放到 data 对象中： - -```typescript -// v5 用户输入数据格式 -type GraphData = { - nodes: NodeModel[]; - edges: EdgeModel[]; - combos: ComboModel[]; -}; - -type NodeModel = { - id: string; - data: { - type?: string; // 元素类型，e.g. 可能是 circle-node, rect-node - x?: number; - y?: number; - z?: number; - parentId?: string; // 父 combo 的 id - label?: string; // label 的文本 - anchorPoints?: number[][]; - badges?: { - type: 'icon' | 'text'; - text: string; - position: BadgePosition; - }[]; - icon?: { - type: 'icon' | 'text'; - text?: string; - img?: string; - }; - [key: string]: unknown; // 其他业务属性 - }; -}; - -type EdgeModel = { - id: string; - source: string; - target: string; - data: { - type?: string; // 元素类型，e.g. 可能是 line-edge - label?: string; // label 的文本 - sourceAnchor?: number; - targetAnchor?: number; - icon?: { - type: 'icon' | 'text'; - text?: string; - img?: string; - }; - badge?: { - type: 'icon' | 'text'; - text: string; - }; - [key: string]: unknown; // 其他业务属性 - }; -}; -``` - -## 2️⃣. 数据读取 - -### v4 数据读取 - -```typescript -import { Graph } from '@antv/g6'; -import data from './data'; - -const graph = new Graph({ - // ... 配置 -}); - -graph.data(data); -graph.render(); -// 或合并上面两行变为：graph.read(data); -``` - -### v5 数据读取 - -不再支持 `graph.data(data)` 和 `graph.render()`，仍然可以使用 `graph.read(data)`，或将数据直接配置到图上： - -```typescript -import { Graph } from '@antv/g6'; -import data from './data'; - -const graph = new Graph({ - // ... 配置 - data: data, -}); -// 或使用：graph.read(data); -``` - -图配置中的 data 配置项类型 DataConfig 定义如下： - -```typescript -export type DataConfig = - | GraphData - | InlineGraphDataConfig - | InlineTreeDataConfig - | FetchDataConfig; - -export interface InlineGraphDataConfig { - type: 'graphData'; - value: GraphData; -} -export interface InlineTreeDataConfig { - type: 'treeData'; - value: TreeGraphData ｜ TreeGraphData[]; -} - -export interface FetchDataConfig { - type: 'fetch'; - value: string; -} -``` - -## 3️⃣. 树图 - -[图数据与树数据通用 DEMO](/examples/feature/features/#treeAndGraph) - -v5 新增树图相关 feature： - -- 布局与 Graph 通用，Graph 可以指定根节点，使用最小生成树建立树结构后使用树图布局算法； -- 交互与 Graph 通用，Graph 也可以展开和收起“子树”了，即无回溯边的下游节点； -- 支持回溯边、环存在； -- 支持森林（多棵树）。 - -### v4 树图的问题 - -v4 树图有独立的数据结构（TreeGraphData 如下）、图类（TreeGraph）、交互（collapse-expand）、布局（Dendrogram/Indented/Mindmap/CompactBox）。数据结构、布局方法与 Graph 不通用。造成了用户在使用时的理解、转换困难： - -- “怎么绘制多棵树？” - 不支持； -- “怎么在树图中增加边？” - 树图不允许存在环； -- “怎么在一般图中使用树图布局？- 布局不通用”。 - - 5.0 将 TreeGraph 和 Graph 进行了全面合并。 - -```typescript -// TreeGraph -type TreeGraphData { - id: string; - [key: string]: unknown; - children: TreeGraphData[]; -} -``` - -- TreeGraph 数据是嵌套的结构，不存在显式的边，父子关系为边； -- TreeGraph 不支持 combo 数据配置； -- 不支持环、森林（多棵树）。 - -### v5 树图 - -v5 的图支持了 TreeGraph 的数据格式，且原有树图和图的布局、交互都可以通用了。如果需要使用 TreeGraphData，只需要在配置 Graph 时给出一个数据类型的标记： - -```typescript -const graph = new Graph({ - // ... 其他配置项 - data: { - type: 'treeData', // type 可以是 'graphData'、'treeData'、'fetch'，其中 fetch 将在正式版支持 - value: data, // value 在 type 是 treeData 时，可以是 TreeGraphData 或 TreeGraphData[] 以支持森林的绘制 - }, -}); -``` - -在上面「数据读取」小节中介绍了 data 字段的类型，可以直接给 GraphData 类型的数据，那么 G6 将作为普通图处理，并在必要时（如使用树图布局、交互时）生成树图结构。也可以指定 type 为 'treeData' 后给 value 传入 TreeGraphData 类型的数据，那么 G6 将会存储树图结构，并转换为普通图数据进行存储。 - -也就是说，v5 中不再存在 TreeGraph Class，只有一个 Graph Class。那么 v4 中 TreeGraph Class 特有的 API 可以通过如下方式进行替代： - -| 功能 | v4 TreeGraph API | v5 替代方案 | -| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| 在指定的父节点下添加子树 | `treeGraph.addChild(data, parent)` | `graph.addData('node', { id: 'new-child' });`
`graph.addData('edge', { id: 'edge-id', source: 'parent-node-id', target: 'new-child' })` | -| 删除指定的子树 | `treeGraph.removeChild(id)` | `graph.removeData('node', 'id-of-a-node')`
若移除的不是叶子节点，则其子节点升级为根节点 | -| 差量更新子树 img | `treeGraph.updateChild(data, parentId)` | 分别更新每个节点：`graph.updateItem('node', { id: 'id-of-a-node', data: { ... }})` | -| 差量更新子树img | `treeGraph.updateChildren(data, parentId)` | 同上 | -| 更改所属父节点 | 先从原父节点 removeChild，再在新父节点 addChild | `graph.updateData('edge', { id: 'edge-id', source: 'new-parent-node-id', target: 'child-id'})` | - -## 4️⃣. 元素类型名称 - -v4 中内置的节点类型有 circle、rect、ellipse、star、image 等。这些名称和图形的类型可能产生歧义。因此在 v5 中，将更名为 xx-node。例如 circle-node，rect-node，ellipse-node，star-node，image-node。 -同理，边也将更名为 line-edge、polyline-edge、cubci-edge 等。 - -## 5️⃣. 功能引入 - -### v4 功能使用 - -v4 中所有功能都默认已经加入 G6，因此在 graph 配置时可以用字符串的方式指定，这导致了包体积庞大。例如： - -```typescript -import { Graph } from '@antv/g6'; -const graph = new Graph({ - // ... 其他配置项 - modes: { - default: ['drag-node', 'scroll-canvas'], // 交互名称 - }, - defaultNode: { - type: 'circle', // 节点类型名称 - }, - defaultEdge: { - type: 'rect', // 节点类型名称 - }, - layout: { - type: 'radial', - }, -}); -``` - -### v5 功能引入与使用 - -为了更好地支持 TreeShaking，v5 仅有部分最基础的能力会预先注册，其它已经实现的内置能力，但需要用户手动注册。同样地，自定义的能力也需要同样方式注册： - -```typescript -import { Graph, extend, Extensions } from '@antv/g6'; -// 外部引入的功能 -import { ForceLayout as ForceLayoutWASM, supportsThreads, initThreads } from '@antv/layout-wasm'; - -// Class CustomBehaviorClass... -// Class CustomEdge... - -const ExtGraph = extend(Graph, { - behaviors: { - 'activate-relations': Extensions.ActivateRelations, // 内置的交互，未提前注册 - 'some-custom-behavior': CustomBehaviorClass, // 自定义交互 - }, - nodes: { - 'modelRect-node': Extensions.ModelRectNode, // 内置的 modelRect 节点，未提前注册 - }, - edges: { - 'custom-edge': CustomEdge, // 自定义边 - }, - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); - -const supported = await supportsThreads(); -const threads = await initThreads(supported); -// 使用 extend 后的图进行实例化 -const graph = new ExtGraph({ - // ... 其他配置项 - modes: { - default: [ - 'drag-node', // 默认注册的交互 - 'activate-relations', // 刚刚引入并注册的内置交互 - 'some-custom-behavior', // 自定义并注册的交互 - ], - }, - defaultNode: { - type: 'modelRect-node', // 刚刚引入并注册的内置节点类型 - }, - defaultEdge: { - type: 'custom-edge', // 自定义并注册的边类型 - }, - layout: { - type: 'force-wasm', // 刚刚从其他包引入并注册的布局算法 - threads, - maxIteration: 200, - }, -}); -``` - -## 6️⃣. 布局使用 - -我们重构了 @antv/layout，考虑到包体积大小仅内置了 circular / concentric / grid / force 布局。在使用方式上和 v4 完全一致，通过 type 指定布局名称，传入其他布局参数： - -```typescript -new Graph({ - //...其他配置项 - layout: { - type: 'force', // 布局名称 - preventOverlap: true, - nodeSize: 30, - workerEnabled: true, // 支持在 WebWorker 中运行 - }, -}); -``` - -对于非内置布局，我们提供了以下使用方式： - -- @antv/layout 和 v4 保持一致的 JS 编写的串行布局算法； -- @antv/layout-wasm 提供基于 Rust 绑定到 WASM、多 WebWorker 并行的布局算法； -- @antv/layout-gpu 提供基于 WebGPU 的可并行布局算法； -- 用户完全自定义的布局。 - -相比 v4 多出了向 G6 运行时标准库注册布局这一步。另外，虽然由于实现不同有的需要额外的异步启动步骤，但是在 layout 的配置描述上均保持一致，即通过 type 指定布局名称，然后传入其他布局参数。 - -下面展示的是在 v5 中使用新增的 @antv/layout-wasm，首先需要向 G6 的运行时标准库注册，提供一个自定义布局名称，后续将它传给 `layout` 使用。 - -[WASM 布局 DEMO](/examples/feature/features/#wasmLayouts) - -```typescript -import { stdLib, Graph } from '@antv/g6'; -import { supportsThreads, initThreads, ForceLayout as ForceLayoutWASM } from '@antv/layout-wasm'; - -// 注册自定义布局 -const ExtGraph = extend(Graph, { - layouts: { - 'force-wasm': ForceLayoutWASM, - }, -}); - -// 启动 WebWorker 线程池 -const supported = await supportsThreads(); -const threads = await initThreads(supported); - -// 使用扩展后的 Graph -new ExtGraph({ - //... 省略其他配置 - layout: { - type: 'force-wasm', // 与注册时命名一致 - threads, // 线程配置 - dimensions: 2, - maxIteration: 100, - //... 省略该布局的其他参数 - }, -}); -``` - -如果我们提供的布局实现都无法满足需求，还可以完全自定义布局。在实现 @antv/layout 提供的 Layout 接口时，只需要实现 execute 方法，assign 置空即可，这样可以保证不影响原始的图模型数据。 - -```javascript -import { Layout, LayoutMapping } from '@antv/layout'; - -class MyCustomLayout implements Layout<{}> { - async assign(graph, options?: {}): Promise { - throw new Error('Method not implemented.'); - } - async execute(graph, options?: {}): Promise { - const nodes = graph.getAllNodes(); - return { - nodes: nodes.map((node) => ({ - id: node.id, - data: { - x: 0, - y: 0, - }, - })), - edges: [], - }; - } - options: {}; - id: 'myCustomLayout'; -} -// 注册自定义布局 -const ExtGraph = extend(Graph, { - layouts: { - myCustomLayout: MyCustomLayout, - }, -}); - -// 使用扩展后的 Graph -new ExtGraph({ - layout: { - type: 'myCustomLayout', - }, -}); -``` - -## 7️⃣. 节点/边/ combo 实例 - -G6 v4 向用户暴露了节点和边的 item 实例，但它们的大部分 API，Graph 都有覆盖。而我们更推荐使用 Graph 的 API，以方便多个相关节点和边之间的统一管理和联动。因此，我们在 v5 中不再暴露节点和边的 item，所以 API 收口在 Graph 上，可以通过 Graph 获得单个/多个节点/边的数据，但不能够得到 item。 - -### v4 使用 item 的情况 - -```typescript -// 获取图上所有元素实例 -graph.getNodes(); -graph.getEdges(); -graph.getCombos(); - -// 监听中的元素对象 -graph.on('node:click', (e) => { - const { item } = e; // item 即为被点击的元素实例 - const itemType = item.getType(); // 获取元素类型 -}); - -// 获得实例中的数据 -item.getModel(); -// 更新实例的数据 -graph.updateItem(item, { - // 数据 -}); -// 增加节点/边/combo -graph.addItem('node', { - // ...数据 -}); -// 删除节点/边/combo -graph.removeItem(item); -``` - -### v5 替代 API - -```typescript -// 获取图上所有元素的数据 (内部流转数据) -graph.getAllNodesData(); -graph.getAllEdgesData(); -graph.getAllCombosData(); - -// 监听 -graph.on('node:click', (e) => { - // 被点击的元素类型，元素 id - const { itemType, itemId } = e; -}); - -// 获取单个元素数据 (内部流转数据) -graph.getNodeData(id); -graph.getEdgeData(id); -graph.getComboData(id); - -// 更新单个/多个实例数据 -graph.updateData('node', [nodeModel1, nodeModel2]); -// 增加单个/多个实例数据 -graph.removeData('node', [nodeModel1, nodeModel2]); -// 删除单个/多个实例数据 -graph.removeData('node', [id1, id2]); -``` - -## 8️⃣. 样式配置 - -v4 由于没有数据分层，详细的图形样式可以配置在数据中，也可以配置在 graph 的 defaultNode defaultEdge 配置项中。导致用户对数据的管理略有混乱。业务属性和样式配置可能混杂在一起。另外，v4 graph 的节点/边样式配置是静态的、全局的，不能根据不同数据做出不同的映射。 - -### v4 全局样式配置 - -```typescript -const graph = new Graph({ - // ...其他配置 - defaultNode: { - type: 'circle', - style: { - fill: '#f00', - r: 20, - }, - }, - defaultEdge: { - type: 'poliline', - style: { - stroke: '#0f0', - lineWidth: 2, - }, - }, -}); -``` - -### v5 样式映射 - -在 v5 中我们更建议用户数据中仅保留必要的业务属性，以及重要的简单样式配置（例如文本内容、badges 内容等），把样式配置放在图的节点/边 mapper 中。Mapper 是 v5 将内部流转数据转换为渲染数据的映射器，由用户配置在 Graph JSON 配置中。当然，也有部分内置的 mapper 逻辑，用于将用户数据中的文本内容、badges 内容等转换到对应的图形属性上。 - -```typescript -const graph = new Graph({ - // ...其他配置 - node: nodeInnerModel => { - const { id, data } = nodeInnerModel; - // 返回值类型见下方 DisplayNodeModel 类型 - return { - id, - data: { - ...data, - keyShape: { - fill: data.important ? '#f00' : '#ccc', - r: 20 - }, - labelShape: { - text: data.label, - position: 'bottom' - }, - } - } - }, - // 边配置同理 - edge: edgeInnerModel => { - // 返回值类型见下方 DisplayEdgeModel 类型 - return {...} - } -}); - -// 样式配置返回的内容 -type DisplayNodeModel = NodeModel & { - id: string; - type?: string; // 元素类型，e.g. 可能是 circle-node, rect-node - data: { - x?: number; - y?: number; - z?: number; - keyShape?: { [shapeAttr: string]: unkown }, // keyShape 的样式 - // label 的配置和样式。未配置则无该图形 - labelShape?: { - position?: string, - offsetX?: number, - offsetY?: number, - offsetZ?: number; - [shapeAttr: string]: unkown - }, - labelBackground?: { [shapeAttr: string]: unkown }, // label 背景的样式。未配置则无该图形 - iconShape?: { [shapeAttr: string]: unkown }, // icon 的样式。未配置则无该图形 - badgeShapes?: { - // 所有 badge 图形的通用样式。未配置则无该图形 - color?: string; - textColor?: string; - [shapeAttr: string]: unkown; - // 各个 badge 分别的样式和配置 - [key: number]: { - position?: IBadgePosition; - color?: string; - textColor?: string; - [shapeAttr: string]: unkown; - }; - }; - anchorShapes?: { - // 所有 anchor 图形的通用样式。未配置则无该图形 - color?: string; - textColor?: string; - size?: number; - offsetX?: number; - offsetY?: number; - offsetZ?: number; - [shapeAttr: string]: unkown; - // 各个 anchor 分别的样式和配置 - [key: number]: { - position?: BadgePosition; - color?: string; - textColor?: string; - size?: number; - offsetX?: number; - offsetY?: number; - offsetZ?: number; - [shapeAttr: string]: unkown; - }; - }; - } -} - -type DisplayEdgeModel = { - id: string; - source: string, - target: string, - data: { - type?: string, // 元素类型，e.g. 可能是 line-edge - sourceAnchor?: number, - targetAnchor?: number, - - } -} - -``` - -## 9️⃣. 事件与事件参数 - -v4 中 mousexx 事件，在 v5 中更改为 pointerxx 事件，能更好地兼容移动端事件，如下： - -```typescript -// v4 -graph.on('node:mousemove', (e) => {}); -// v5 -graph.on('node:pointermove', (e) => {}); - -// 其他类似事件名： -// mousemove -> pointermove -// mouseenter -> pointerenter -// mouseleave -> pointerleave -// mousedown -> pointerdown -// mouseup -> pointerup -``` - -### v4 事件参数 - -```typescript -type GraphEvent = { - item: Node | Edge | Combo; - target: Shape; - x: number; - y: number; - pointX: number; - pointY: number; - canvasX: number; - canvasY: number; - clientX: number; - clientY: number; - //... 其他 -}; -``` - -### v5 事件参数 - -v5 不再暴露元素，item 将不再存在于事件参数中，v5 事件参数如下： - -```typescript -type GraphEvent = { - itemId: string | number; - itemType: 'node' | 'edge' | 'combo'; - target: Shape; - // 四套坐标系下当前操作的坐标值 - canvas: { x: number; y: number; z: number }; // 对应 v4 的 x y 或 pointerX pointerY，图形的绘制坐标 - client: { x: number; y: number }; // 对应 v4 的 clientX clientY，相对于浏览器的坐标系 - viewport: { x: number; y: number }; // 对应 v4 的 canvasX canvasY，相对于 Canvas DOM 的坐标系 - screen: { x: number; y: number }; // 相对于整个屏幕的坐标系 - //... 其他 -}; -``` - -## 🔟. 坐标系统 - -### v4 坐标系统 - -v4 的坐标系统（三套）见文档：https://g6.antv.antgroup.com/manual/advanced/coordinate-system - -- v4 - clientX clientY - 相对于浏览器的坐标系 - - - - -- v4 - canvasX canvasY - 相对于 canvas DOM 的坐标系 - - - -- v4 - pointX pointY （= v4 事件中的 x y） - 图形绘制坐标系 - - - -### v5 坐标系 - -需要注意的是，v5 中的坐标系（四套）命名有所不同。 - -| 含义 | v4 坐标名 | v5 坐标名 | -| ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------- | -| 图形的绘制坐标 | { x, y } 或 { pointerX, pointerY } | canvas: { x: number; y: number; z: number } | -| 相对于浏览器的坐标系 | { clientX, clientY } | client: { x: number; y: number; z: number } | -| 相对于 Canvas DOM 的坐标系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } | -| 相对于整个屏幕的坐标系 | 无 | screen: { x: number; y: number; z: number } | - -## 🌸. 其他微小而美好的改变 - -- 轮廓包裹 Hull 支持文本配置： - -只需要为 Hull 实例配置 labelShape 即可，可以指定其相对位置(`position`)在 hull 的上、下、左、右四个方向。 - -[Hull 支持文本 DEMO](/examples/interaction/hull/#hull) - - - -- 折线支持自动避障： - -设置边的 `keyShape.routeCfg.enableObstacleAvoidance: true` 即可自动躲避节点。 - -[Polyline 避障 DEMO](/examples/item/defaultEdges/#polyline3) - - - -- 文本自动适配宽度： - -设置节点文本图形的 `maxWidth`，可以为数字代表允许的最大宽度的像素值，也可以是百分比字符串代表占 keyShape 的比例。例如： - -```javascript -const graph = new Graph({ - node: { - labelShape: { - maxWidth: '120%', - }, - }, -}); -``` - -[文本自适应 DEMO](/examples/item/label/#copyLabel) - - - -- 采用临时层画布提升交互性能： - - - -- 图例自动从画布中获取样式： - - diff --git a/packages/site/examples/scatter/changePosition/demo/animateOrder.js b/packages/site/examples/animation/changePosition/demo/animateOrder.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/animateOrder.js rename to packages/site/examples/animation/changePosition/demo/animateOrder.js diff --git a/packages/site/examples/scatter/changePosition/demo/circleComboAnimates.js b/packages/site/examples/animation/changePosition/demo/circleComboAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/circleComboAnimates.js rename to packages/site/examples/animation/changePosition/demo/circleComboAnimates.js diff --git a/packages/site/examples/scatter/changePosition/demo/itemAnimates.js b/packages/site/examples/animation/changePosition/demo/itemAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/itemAnimates.js rename to packages/site/examples/animation/changePosition/demo/itemAnimates.js diff --git a/packages/site/examples/scatter/changePosition/demo/loopAnimates.js b/packages/site/examples/animation/changePosition/demo/loopAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/loopAnimates.js rename to packages/site/examples/animation/changePosition/demo/loopAnimates.js diff --git a/packages/site/examples/scatter/changePosition/demo/meta.json b/packages/site/examples/animation/changePosition/demo/meta.json similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/meta.json rename to packages/site/examples/animation/changePosition/demo/meta.json diff --git a/packages/site/examples/scatter/changePosition/demo/rectComboAnimates.js b/packages/site/examples/animation/changePosition/demo/rectComboAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/rectComboAnimates.js rename to packages/site/examples/animation/changePosition/demo/rectComboAnimates.js diff --git a/packages/site/examples/scatter/changePosition/demo/treeAnimates.js b/packages/site/examples/animation/changePosition/demo/treeAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/treeAnimates.js rename to packages/site/examples/animation/changePosition/demo/treeAnimates.js diff --git a/packages/site/examples/scatter/changePosition/demo/viewAnimates.js b/packages/site/examples/animation/changePosition/demo/viewAnimates.js similarity index 100% rename from packages/site/examples/scatter/changePosition/demo/viewAnimates.js rename to packages/site/examples/animation/changePosition/demo/viewAnimates.js diff --git a/packages/site/examples/scatter/changePosition/index.en.md b/packages/site/examples/animation/changePosition/index.en.md similarity index 100% rename from packages/site/examples/scatter/changePosition/index.en.md rename to packages/site/examples/animation/changePosition/index.en.md diff --git a/packages/site/examples/scatter/changePosition/index.zh.md b/packages/site/examples/animation/changePosition/index.zh.md similarity index 100% rename from packages/site/examples/scatter/changePosition/index.zh.md rename to packages/site/examples/animation/changePosition/index.zh.md diff --git a/packages/site/examples/interaction/combo/API.en.md b/packages/site/examples/behavior/combo/API.en.md similarity index 100% rename from packages/site/examples/interaction/combo/API.en.md rename to packages/site/examples/behavior/combo/API.en.md diff --git a/packages/site/examples/interaction/combo/API.zh.md b/packages/site/examples/behavior/combo/API.zh.md similarity index 100% rename from packages/site/examples/interaction/combo/API.zh.md rename to packages/site/examples/behavior/combo/API.zh.md diff --git a/packages/site/examples/interaction/combo/demo/cCircle.js b/packages/site/examples/behavior/combo/demo/cCircle.js similarity index 100% rename from packages/site/examples/interaction/combo/demo/cCircle.js rename to packages/site/examples/behavior/combo/demo/cCircle.js diff --git a/packages/site/examples/interaction/combo/demo/cRect.js b/packages/site/examples/behavior/combo/demo/cRect.js similarity index 100% rename from packages/site/examples/interaction/combo/demo/cRect.js rename to packages/site/examples/behavior/combo/demo/cRect.js diff --git a/packages/site/examples/interaction/combo/demo/circle.js b/packages/site/examples/behavior/combo/demo/circle.js similarity index 100% rename from packages/site/examples/interaction/combo/demo/circle.js rename to packages/site/examples/behavior/combo/demo/circle.js diff --git a/packages/site/examples/interaction/combo/demo/meta.json b/packages/site/examples/behavior/combo/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/combo/demo/meta.json rename to packages/site/examples/behavior/combo/demo/meta.json diff --git a/packages/site/examples/interaction/combo/demo/rect.js b/packages/site/examples/behavior/combo/demo/rect.js similarity index 100% rename from packages/site/examples/interaction/combo/demo/rect.js rename to packages/site/examples/behavior/combo/demo/rect.js diff --git a/packages/site/examples/interaction/combo/index.en.md b/packages/site/examples/behavior/combo/index.en.md similarity index 100% rename from packages/site/examples/interaction/combo/index.en.md rename to packages/site/examples/behavior/combo/index.en.md diff --git a/packages/site/examples/interaction/combo/index.zh.md b/packages/site/examples/behavior/combo/index.zh.md similarity index 100% rename from packages/site/examples/interaction/combo/index.zh.md rename to packages/site/examples/behavior/combo/index.zh.md diff --git a/packages/site/examples/interaction/createEdge/API.en.md b/packages/site/examples/behavior/createEdge/API.en.md similarity index 100% rename from packages/site/examples/interaction/createEdge/API.en.md rename to packages/site/examples/behavior/createEdge/API.en.md diff --git a/packages/site/examples/interaction/createEdge/API.zh.md b/packages/site/examples/behavior/createEdge/API.zh.md similarity index 100% rename from packages/site/examples/interaction/createEdge/API.zh.md rename to packages/site/examples/behavior/createEdge/API.zh.md diff --git a/packages/site/examples/interaction/createEdge/demo/createCustomEdge.ts b/packages/site/examples/behavior/createEdge/demo/createCustomEdge.ts similarity index 100% rename from packages/site/examples/interaction/createEdge/demo/createCustomEdge.ts rename to packages/site/examples/behavior/createEdge/demo/createCustomEdge.ts diff --git a/packages/site/examples/interaction/createEdge/demo/createEdgeByClicking.ts b/packages/site/examples/behavior/createEdge/demo/createEdgeByClicking.ts similarity index 100% rename from packages/site/examples/interaction/createEdge/demo/createEdgeByClicking.ts rename to packages/site/examples/behavior/createEdge/demo/createEdgeByClicking.ts diff --git a/packages/site/examples/interaction/createEdge/demo/createEdgeByDragging.ts b/packages/site/examples/behavior/createEdge/demo/createEdgeByDragging.ts similarity index 100% rename from packages/site/examples/interaction/createEdge/demo/createEdgeByDragging.ts rename to packages/site/examples/behavior/createEdge/demo/createEdgeByDragging.ts diff --git a/packages/site/examples/interaction/createEdge/demo/createEdgeCombo.ts b/packages/site/examples/behavior/createEdge/demo/createEdgeCombo.ts similarity index 100% rename from packages/site/examples/interaction/createEdge/demo/createEdgeCombo.ts rename to packages/site/examples/behavior/createEdge/demo/createEdgeCombo.ts diff --git a/packages/site/examples/interaction/createEdge/demo/meta.json b/packages/site/examples/behavior/createEdge/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/createEdge/demo/meta.json rename to packages/site/examples/behavior/createEdge/demo/meta.json diff --git a/packages/site/examples/interaction/createEdge/index.en.md b/packages/site/examples/behavior/createEdge/index.en.md similarity index 100% rename from packages/site/examples/interaction/createEdge/index.en.md rename to packages/site/examples/behavior/createEdge/index.en.md diff --git a/packages/site/examples/interaction/createEdge/index.zh.md b/packages/site/examples/behavior/createEdge/index.zh.md similarity index 100% rename from packages/site/examples/interaction/createEdge/index.zh.md rename to packages/site/examples/behavior/createEdge/index.zh.md diff --git a/packages/site/examples/interaction/customBehavior/API.en.md b/packages/site/examples/behavior/customBehavior/API.en.md similarity index 100% rename from packages/site/examples/interaction/customBehavior/API.en.md rename to packages/site/examples/behavior/customBehavior/API.en.md diff --git a/packages/site/examples/interaction/customBehavior/API.zh.md b/packages/site/examples/behavior/customBehavior/API.zh.md similarity index 100% rename from packages/site/examples/interaction/customBehavior/API.zh.md rename to packages/site/examples/behavior/customBehavior/API.zh.md diff --git a/packages/site/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js b/packages/site/examples/behavior/customBehavior/demo/dragCanvasTwoFingers.js similarity index 100% rename from packages/site/examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js rename to packages/site/examples/behavior/customBehavior/demo/dragCanvasTwoFingers.js diff --git a/packages/site/examples/interaction/customBehavior/demo/meta.json b/packages/site/examples/behavior/customBehavior/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/customBehavior/demo/meta.json rename to packages/site/examples/behavior/customBehavior/demo/meta.json diff --git a/packages/site/examples/interaction/customBehavior/index.en.md b/packages/site/examples/behavior/customBehavior/index.en.md similarity index 100% rename from packages/site/examples/interaction/customBehavior/index.en.md rename to packages/site/examples/behavior/customBehavior/index.en.md diff --git a/packages/site/examples/interaction/customBehavior/index.zh.md b/packages/site/examples/behavior/customBehavior/index.zh.md similarity index 100% rename from packages/site/examples/interaction/customBehavior/index.zh.md rename to packages/site/examples/behavior/customBehavior/index.zh.md diff --git a/packages/site/examples/interaction/focus/API.en.md b/packages/site/examples/behavior/focus/API.en.md similarity index 100% rename from packages/site/examples/interaction/focus/API.en.md rename to packages/site/examples/behavior/focus/API.en.md diff --git a/packages/site/examples/interaction/focus/API.zh.md b/packages/site/examples/behavior/focus/API.zh.md similarity index 100% rename from packages/site/examples/interaction/focus/API.zh.md rename to packages/site/examples/behavior/focus/API.zh.md diff --git a/packages/site/examples/interaction/focus/demo/clickFocus.ts b/packages/site/examples/behavior/focus/demo/clickFocus.ts similarity index 100% rename from packages/site/examples/interaction/focus/demo/clickFocus.ts rename to packages/site/examples/behavior/focus/demo/clickFocus.ts diff --git a/packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts b/packages/site/examples/behavior/focus/demo/clickFocusAnimate.ts similarity index 100% rename from packages/site/examples/interaction/focus/demo/clickFocusAnimate.ts rename to packages/site/examples/behavior/focus/demo/clickFocusAnimate.ts diff --git a/packages/site/examples/interaction/focus/demo/meta.json b/packages/site/examples/behavior/focus/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/focus/demo/meta.json rename to packages/site/examples/behavior/focus/demo/meta.json diff --git a/packages/site/examples/interaction/focus/index.en.md b/packages/site/examples/behavior/focus/index.en.md similarity index 100% rename from packages/site/examples/interaction/focus/index.en.md rename to packages/site/examples/behavior/focus/index.en.md diff --git a/packages/site/examples/interaction/focus/index.zh.md b/packages/site/examples/behavior/focus/index.zh.md similarity index 100% rename from packages/site/examples/interaction/focus/index.zh.md rename to packages/site/examples/behavior/focus/index.zh.md diff --git a/packages/site/examples/interaction/hoverElement/API.en.md b/packages/site/examples/behavior/hoverElement/API.en.md similarity index 100% rename from packages/site/examples/interaction/hoverElement/API.en.md rename to packages/site/examples/behavior/hoverElement/API.en.md diff --git a/packages/site/examples/interaction/hoverElement/API.zh.md b/packages/site/examples/behavior/hoverElement/API.zh.md similarity index 100% rename from packages/site/examples/interaction/hoverElement/API.zh.md rename to packages/site/examples/behavior/hoverElement/API.zh.md diff --git a/packages/site/examples/interaction/hoverElement/demo/activateRelations.ts b/packages/site/examples/behavior/hoverElement/demo/activateRelations.ts similarity index 100% rename from packages/site/examples/interaction/hoverElement/demo/activateRelations.ts rename to packages/site/examples/behavior/hoverElement/demo/activateRelations.ts diff --git a/packages/site/examples/interaction/hoverElement/demo/activateRelations2.ts b/packages/site/examples/behavior/hoverElement/demo/activateRelations2.ts similarity index 100% rename from packages/site/examples/interaction/hoverElement/demo/activateRelations2.ts rename to packages/site/examples/behavior/hoverElement/demo/activateRelations2.ts diff --git a/packages/site/examples/interaction/hoverElement/demo/basic.ts b/packages/site/examples/behavior/hoverElement/demo/basic.ts similarity index 100% rename from packages/site/examples/interaction/hoverElement/demo/basic.ts rename to packages/site/examples/behavior/hoverElement/demo/basic.ts diff --git a/packages/site/examples/interaction/hoverElement/demo/meta.json b/packages/site/examples/behavior/hoverElement/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/hoverElement/demo/meta.json rename to packages/site/examples/behavior/hoverElement/demo/meta.json diff --git a/packages/site/examples/interaction/hoverElement/index.en.md b/packages/site/examples/behavior/hoverElement/index.en.md similarity index 100% rename from packages/site/examples/interaction/hoverElement/index.en.md rename to packages/site/examples/behavior/hoverElement/index.en.md diff --git a/packages/site/examples/interaction/hoverElement/index.zh.md b/packages/site/examples/behavior/hoverElement/index.zh.md similarity index 100% rename from packages/site/examples/interaction/hoverElement/index.zh.md rename to packages/site/examples/behavior/hoverElement/index.zh.md diff --git a/packages/site/examples/interaction/label/API.en.md b/packages/site/examples/behavior/label/API.en.md similarity index 100% rename from packages/site/examples/interaction/label/API.en.md rename to packages/site/examples/behavior/label/API.en.md diff --git a/packages/site/examples/interaction/label/API.zh.md b/packages/site/examples/behavior/label/API.zh.md similarity index 100% rename from packages/site/examples/interaction/label/API.zh.md rename to packages/site/examples/behavior/label/API.zh.md diff --git a/packages/site/examples/interaction/label/demo/changeImg.js b/packages/site/examples/behavior/label/demo/changeImg.js similarity index 100% rename from packages/site/examples/interaction/label/demo/changeImg.js rename to packages/site/examples/behavior/label/demo/changeImg.js diff --git a/packages/site/examples/interaction/label/demo/meta.json b/packages/site/examples/behavior/label/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/label/demo/meta.json rename to packages/site/examples/behavior/label/demo/meta.json diff --git a/packages/site/examples/interaction/label/demo/update.js b/packages/site/examples/behavior/label/demo/update.js similarity index 100% rename from packages/site/examples/interaction/label/demo/update.js rename to packages/site/examples/behavior/label/demo/update.js diff --git a/packages/site/examples/interaction/label/index.en.md b/packages/site/examples/behavior/label/index.en.md similarity index 100% rename from packages/site/examples/interaction/label/index.en.md rename to packages/site/examples/behavior/label/index.en.md diff --git a/packages/site/examples/interaction/label/index.zh.md b/packages/site/examples/behavior/label/index.zh.md similarity index 100% rename from packages/site/examples/interaction/label/index.zh.md rename to packages/site/examples/behavior/label/index.zh.md diff --git a/packages/site/examples/interaction/moveCanvas/API.en.md b/packages/site/examples/behavior/moveCanvas/API.en.md similarity index 100% rename from packages/site/examples/interaction/moveCanvas/API.en.md rename to packages/site/examples/behavior/moveCanvas/API.en.md diff --git a/packages/site/examples/interaction/moveCanvas/API.zh.md b/packages/site/examples/behavior/moveCanvas/API.zh.md similarity index 100% rename from packages/site/examples/interaction/moveCanvas/API.zh.md rename to packages/site/examples/behavior/moveCanvas/API.zh.md diff --git a/packages/site/examples/interaction/moveCanvas/demo/dragCanvas.js b/packages/site/examples/behavior/moveCanvas/demo/dragCanvas.js similarity index 100% rename from packages/site/examples/interaction/moveCanvas/demo/dragCanvas.js rename to packages/site/examples/behavior/moveCanvas/demo/dragCanvas.js diff --git a/packages/site/examples/interaction/moveCanvas/demo/meta.json b/packages/site/examples/behavior/moveCanvas/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/moveCanvas/demo/meta.json rename to packages/site/examples/behavior/moveCanvas/demo/meta.json diff --git a/packages/site/examples/interaction/moveCanvas/demo/scrollBoth.js b/packages/site/examples/behavior/moveCanvas/demo/scrollBoth.js similarity index 100% rename from packages/site/examples/interaction/moveCanvas/demo/scrollBoth.js rename to packages/site/examples/behavior/moveCanvas/demo/scrollBoth.js diff --git a/packages/site/examples/interaction/moveCanvas/demo/scrollY.js b/packages/site/examples/behavior/moveCanvas/demo/scrollY.js similarity index 100% rename from packages/site/examples/interaction/moveCanvas/demo/scrollY.js rename to packages/site/examples/behavior/moveCanvas/demo/scrollY.js diff --git a/packages/site/examples/interaction/moveCanvas/index.en.md b/packages/site/examples/behavior/moveCanvas/index.en.md similarity index 100% rename from packages/site/examples/interaction/moveCanvas/index.en.md rename to packages/site/examples/behavior/moveCanvas/index.en.md diff --git a/packages/site/examples/interaction/moveCanvas/index.zh.md b/packages/site/examples/behavior/moveCanvas/index.zh.md similarity index 100% rename from packages/site/examples/interaction/moveCanvas/index.zh.md rename to packages/site/examples/behavior/moveCanvas/index.zh.md diff --git a/packages/site/examples/interaction/partialResponse/API.en.md b/packages/site/examples/behavior/partialResponse/API.en.md similarity index 100% rename from packages/site/examples/interaction/partialResponse/API.en.md rename to packages/site/examples/behavior/partialResponse/API.en.md diff --git a/packages/site/examples/interaction/partialResponse/API.zh.md b/packages/site/examples/behavior/partialResponse/API.zh.md similarity index 100% rename from packages/site/examples/interaction/partialResponse/API.zh.md rename to packages/site/examples/behavior/partialResponse/API.zh.md diff --git a/packages/site/examples/interaction/partialResponse/demo/meta.json b/packages/site/examples/behavior/partialResponse/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/partialResponse/demo/meta.json rename to packages/site/examples/behavior/partialResponse/demo/meta.json diff --git a/packages/site/examples/interaction/partialResponse/demo/partialNode.js b/packages/site/examples/behavior/partialResponse/demo/partialNode.js similarity index 100% rename from packages/site/examples/interaction/partialResponse/demo/partialNode.js rename to packages/site/examples/behavior/partialResponse/demo/partialNode.js diff --git a/packages/site/examples/interaction/partialResponse/index.en.md b/packages/site/examples/behavior/partialResponse/index.en.md similarity index 100% rename from packages/site/examples/interaction/partialResponse/index.en.md rename to packages/site/examples/behavior/partialResponse/index.en.md diff --git a/packages/site/examples/interaction/partialResponse/index.zh.md b/packages/site/examples/behavior/partialResponse/index.zh.md similarity index 100% rename from packages/site/examples/interaction/partialResponse/index.zh.md rename to packages/site/examples/behavior/partialResponse/index.zh.md diff --git a/packages/site/examples/interaction/select/API.en.md b/packages/site/examples/behavior/select/API.en.md similarity index 100% rename from packages/site/examples/interaction/select/API.en.md rename to packages/site/examples/behavior/select/API.en.md diff --git a/packages/site/examples/interaction/select/API.zh.md b/packages/site/examples/behavior/select/API.zh.md similarity index 100% rename from packages/site/examples/interaction/select/API.zh.md rename to packages/site/examples/behavior/select/API.zh.md diff --git a/packages/site/examples/interaction/select/demo/brush-combo.ts b/packages/site/examples/behavior/select/demo/brush-combo.ts similarity index 100% rename from packages/site/examples/interaction/select/demo/brush-combo.ts rename to packages/site/examples/behavior/select/demo/brush-combo.ts diff --git a/packages/site/examples/interaction/select/demo/brush.ts b/packages/site/examples/behavior/select/demo/brush.ts similarity index 100% rename from packages/site/examples/interaction/select/demo/brush.ts rename to packages/site/examples/behavior/select/demo/brush.ts diff --git a/packages/site/examples/interaction/select/demo/click.ts b/packages/site/examples/behavior/select/demo/click.ts similarity index 100% rename from packages/site/examples/interaction/select/demo/click.ts rename to packages/site/examples/behavior/select/demo/click.ts diff --git a/packages/site/examples/interaction/select/demo/lasso.ts b/packages/site/examples/behavior/select/demo/lasso.ts similarity index 100% rename from packages/site/examples/interaction/select/demo/lasso.ts rename to packages/site/examples/behavior/select/demo/lasso.ts diff --git a/packages/site/examples/interaction/select/demo/meta.json b/packages/site/examples/behavior/select/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/select/demo/meta.json rename to packages/site/examples/behavior/select/demo/meta.json diff --git a/packages/site/examples/interaction/select/index.en.md b/packages/site/examples/behavior/select/index.en.md similarity index 100% rename from packages/site/examples/interaction/select/index.en.md rename to packages/site/examples/behavior/select/index.en.md diff --git a/packages/site/examples/interaction/select/index.zh.md b/packages/site/examples/behavior/select/index.zh.md similarity index 100% rename from packages/site/examples/interaction/select/index.zh.md rename to packages/site/examples/behavior/select/index.zh.md diff --git a/packages/site/examples/interaction/setMode/API.en.md b/packages/site/examples/behavior/setMode/API.en.md similarity index 100% rename from packages/site/examples/interaction/setMode/API.en.md rename to packages/site/examples/behavior/setMode/API.en.md diff --git a/packages/site/examples/interaction/setMode/API.zh.md b/packages/site/examples/behavior/setMode/API.zh.md similarity index 100% rename from packages/site/examples/interaction/setMode/API.zh.md rename to packages/site/examples/behavior/setMode/API.zh.md diff --git a/packages/site/examples/interaction/setMode/demo/meta.json b/packages/site/examples/behavior/setMode/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/setMode/demo/meta.json rename to packages/site/examples/behavior/setMode/demo/meta.json diff --git a/packages/site/examples/interaction/setMode/demo/setMode.js b/packages/site/examples/behavior/setMode/demo/setMode.js similarity index 100% rename from packages/site/examples/interaction/setMode/demo/setMode.js rename to packages/site/examples/behavior/setMode/demo/setMode.js diff --git a/packages/site/examples/interaction/setMode/index.en.md b/packages/site/examples/behavior/setMode/index.en.md similarity index 100% rename from packages/site/examples/interaction/setMode/index.en.md rename to packages/site/examples/behavior/setMode/index.en.md diff --git a/packages/site/examples/interaction/setMode/index.zh.md b/packages/site/examples/behavior/setMode/index.zh.md similarity index 100% rename from packages/site/examples/interaction/setMode/index.zh.md rename to packages/site/examples/behavior/setMode/index.zh.md diff --git a/packages/site/examples/interaction/shortcutsCall/API.en.md b/packages/site/examples/behavior/shortcutsCall/API.en.md similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/API.en.md rename to packages/site/examples/behavior/shortcutsCall/API.en.md diff --git a/packages/site/examples/interaction/shortcutsCall/API.zh.md b/packages/site/examples/behavior/shortcutsCall/API.zh.md similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/API.zh.md rename to packages/site/examples/behavior/shortcutsCall/API.zh.md diff --git a/packages/site/examples/interaction/shortcutsCall/demo/meta.json b/packages/site/examples/behavior/shortcutsCall/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/demo/meta.json rename to packages/site/examples/behavior/shortcutsCall/demo/meta.json diff --git a/packages/site/examples/interaction/shortcutsCall/demo/shortcuts-fitView.js b/packages/site/examples/behavior/shortcutsCall/demo/shortcuts-fitView.js similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/demo/shortcuts-fitView.js rename to packages/site/examples/behavior/shortcutsCall/demo/shortcuts-fitView.js diff --git a/packages/site/examples/interaction/shortcutsCall/index.en.md b/packages/site/examples/behavior/shortcutsCall/index.en.md similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/index.en.md rename to packages/site/examples/behavior/shortcutsCall/index.en.md diff --git a/packages/site/examples/interaction/shortcutsCall/index.zh.md b/packages/site/examples/behavior/shortcutsCall/index.zh.md similarity index 100% rename from packages/site/examples/interaction/shortcutsCall/index.zh.md rename to packages/site/examples/behavior/shortcutsCall/index.zh.md diff --git a/packages/site/examples/interaction/treeBehavior/API.en.md b/packages/site/examples/behavior/treeBehavior/API.en.md similarity index 100% rename from packages/site/examples/interaction/treeBehavior/API.en.md rename to packages/site/examples/behavior/treeBehavior/API.en.md diff --git a/packages/site/examples/interaction/treeBehavior/API.zh.md b/packages/site/examples/behavior/treeBehavior/API.zh.md similarity index 100% rename from packages/site/examples/interaction/treeBehavior/API.zh.md rename to packages/site/examples/behavior/treeBehavior/API.zh.md diff --git a/packages/site/examples/interaction/treeBehavior/demo/changeData.js b/packages/site/examples/behavior/treeBehavior/demo/changeData.js similarity index 100% rename from packages/site/examples/interaction/treeBehavior/demo/changeData.js rename to packages/site/examples/behavior/treeBehavior/demo/changeData.js diff --git a/packages/site/examples/interaction/treeBehavior/demo/meta.json b/packages/site/examples/behavior/treeBehavior/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/treeBehavior/demo/meta.json rename to packages/site/examples/behavior/treeBehavior/demo/meta.json diff --git a/packages/site/examples/interaction/treeBehavior/index.en.md b/packages/site/examples/behavior/treeBehavior/index.en.md similarity index 100% rename from packages/site/examples/interaction/treeBehavior/index.en.md rename to packages/site/examples/behavior/treeBehavior/index.en.md diff --git a/packages/site/examples/interaction/treeBehavior/index.zh.md b/packages/site/examples/behavior/treeBehavior/index.zh.md similarity index 100% rename from packages/site/examples/interaction/treeBehavior/index.zh.md rename to packages/site/examples/behavior/treeBehavior/index.zh.md diff --git a/packages/site/examples/interaction/zoomAndAutoLod/API.en.md b/packages/site/examples/behavior/zoomAndAutoLod/API.en.md similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/API.en.md rename to packages/site/examples/behavior/zoomAndAutoLod/API.en.md diff --git a/packages/site/examples/interaction/zoomAndAutoLod/API.zh.md b/packages/site/examples/behavior/zoomAndAutoLod/API.zh.md similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/API.zh.md rename to packages/site/examples/behavior/zoomAndAutoLod/API.zh.md diff --git a/packages/site/examples/interaction/zoomAndAutoLod/demo/autoLod.js b/packages/site/examples/behavior/zoomAndAutoLod/demo/autoLod.js similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/demo/autoLod.js rename to packages/site/examples/behavior/zoomAndAutoLod/demo/autoLod.js diff --git a/packages/site/examples/interaction/zoomAndAutoLod/demo/meta.json b/packages/site/examples/behavior/zoomAndAutoLod/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/demo/meta.json rename to packages/site/examples/behavior/zoomAndAutoLod/demo/meta.json diff --git a/packages/site/examples/interaction/zoomAndAutoLod/index.en.md b/packages/site/examples/behavior/zoomAndAutoLod/index.en.md similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/index.en.md rename to packages/site/examples/behavior/zoomAndAutoLod/index.en.md diff --git a/packages/site/examples/interaction/zoomAndAutoLod/index.zh.md b/packages/site/examples/behavior/zoomAndAutoLod/index.zh.md similarity index 100% rename from packages/site/examples/interaction/zoomAndAutoLod/index.zh.md rename to packages/site/examples/behavior/zoomAndAutoLod/index.zh.md diff --git a/packages/site/examples/interaction/zoomCanvasFixItem/demo/fixItem.js b/packages/site/examples/behavior/zoomCanvasFixItem/demo/fixItem.js similarity index 100% rename from packages/site/examples/interaction/zoomCanvasFixItem/demo/fixItem.js rename to packages/site/examples/behavior/zoomCanvasFixItem/demo/fixItem.js diff --git a/packages/site/examples/interaction/zoomCanvasFixItem/demo/meta.json b/packages/site/examples/behavior/zoomCanvasFixItem/demo/meta.json similarity index 100% rename from packages/site/examples/interaction/zoomCanvasFixItem/demo/meta.json rename to packages/site/examples/behavior/zoomCanvasFixItem/demo/meta.json diff --git a/packages/site/examples/interaction/zoomCanvasFixItem/index.en.md b/packages/site/examples/behavior/zoomCanvasFixItem/index.en.md similarity index 100% rename from packages/site/examples/interaction/zoomCanvasFixItem/index.en.md rename to packages/site/examples/behavior/zoomCanvasFixItem/index.en.md diff --git a/packages/site/examples/interaction/zoomCanvasFixItem/index.zh.md b/packages/site/examples/behavior/zoomCanvasFixItem/index.zh.md similarity index 100% rename from packages/site/examples/interaction/zoomCanvasFixItem/index.zh.md rename to packages/site/examples/behavior/zoomCanvasFixItem/index.zh.md diff --git a/packages/site/examples/item/arrows/API.en.md b/packages/site/examples/element/arrows/API.en.md similarity index 100% rename from packages/site/examples/item/arrows/API.en.md rename to packages/site/examples/element/arrows/API.en.md diff --git a/packages/site/examples/item/arrows/API.zh.md b/packages/site/examples/element/arrows/API.zh.md similarity index 100% rename from packages/site/examples/item/arrows/API.zh.md rename to packages/site/examples/element/arrows/API.zh.md diff --git a/packages/site/examples/item/arrows/demo/built-in-arrows.ts b/packages/site/examples/element/arrows/demo/built-in-arrows.ts similarity index 100% rename from packages/site/examples/item/arrows/demo/built-in-arrows.ts rename to packages/site/examples/element/arrows/demo/built-in-arrows.ts diff --git a/packages/site/examples/item/arrows/demo/custom-arrows.ts b/packages/site/examples/element/arrows/demo/custom-arrows.ts similarity index 100% rename from packages/site/examples/item/arrows/demo/custom-arrows.ts rename to packages/site/examples/element/arrows/demo/custom-arrows.ts diff --git a/packages/site/examples/item/arrows/demo/meta.json b/packages/site/examples/element/arrows/demo/meta.json similarity index 100% rename from packages/site/examples/item/arrows/demo/meta.json rename to packages/site/examples/element/arrows/demo/meta.json diff --git a/packages/site/examples/item/arrows/index.en.md b/packages/site/examples/element/arrows/index.en.md similarity index 100% rename from packages/site/examples/item/arrows/index.en.md rename to packages/site/examples/element/arrows/index.en.md diff --git a/packages/site/examples/item/arrows/index.zh.md b/packages/site/examples/element/arrows/index.zh.md similarity index 100% rename from packages/site/examples/item/arrows/index.zh.md rename to packages/site/examples/element/arrows/index.zh.md diff --git a/packages/site/examples/item/customCombo/API.en.md b/packages/site/examples/element/customCombo/API.en.md similarity index 100% rename from packages/site/examples/item/customCombo/API.en.md rename to packages/site/examples/element/customCombo/API.en.md diff --git a/packages/site/examples/item/customCombo/API.zh.md b/packages/site/examples/element/customCombo/API.zh.md similarity index 100% rename from packages/site/examples/item/customCombo/API.zh.md rename to packages/site/examples/element/customCombo/API.zh.md diff --git a/packages/site/examples/item/customCombo/demo/cCircle.js b/packages/site/examples/element/customCombo/demo/cCircle.js similarity index 100% rename from packages/site/examples/item/customCombo/demo/cCircle.js rename to packages/site/examples/element/customCombo/demo/cCircle.js diff --git a/packages/site/examples/item/customCombo/demo/cRect.js b/packages/site/examples/element/customCombo/demo/cRect.js similarity index 100% rename from packages/site/examples/item/customCombo/demo/cRect.js rename to packages/site/examples/element/customCombo/demo/cRect.js diff --git a/packages/site/examples/item/customCombo/demo/meta.json b/packages/site/examples/element/customCombo/demo/meta.json similarity index 100% rename from packages/site/examples/item/customCombo/demo/meta.json rename to packages/site/examples/element/customCombo/demo/meta.json diff --git a/packages/site/examples/item/customCombo/index.en.md b/packages/site/examples/element/customCombo/index.en.md similarity index 100% rename from packages/site/examples/item/customCombo/index.en.md rename to packages/site/examples/element/customCombo/index.en.md diff --git a/packages/site/examples/item/customCombo/index.zh.md b/packages/site/examples/element/customCombo/index.zh.md similarity index 100% rename from packages/site/examples/item/customCombo/index.zh.md rename to packages/site/examples/element/customCombo/index.zh.md diff --git a/packages/site/examples/item/customEdge/API.en.md b/packages/site/examples/element/customEdge/API.en.md similarity index 100% rename from packages/site/examples/item/customEdge/API.en.md rename to packages/site/examples/element/customEdge/API.en.md diff --git a/packages/site/examples/item/customEdge/API.zh.md b/packages/site/examples/element/customEdge/API.zh.md similarity index 100% rename from packages/site/examples/item/customEdge/API.zh.md rename to packages/site/examples/element/customEdge/API.zh.md diff --git a/packages/site/examples/item/customEdge/demo/customPolyline.js b/packages/site/examples/element/customEdge/demo/customPolyline.js similarity index 100% rename from packages/site/examples/item/customEdge/demo/customPolyline.js rename to packages/site/examples/element/customEdge/demo/customPolyline.js diff --git a/packages/site/examples/item/customEdge/demo/edgeMulLabel.js b/packages/site/examples/element/customEdge/demo/edgeMulLabel.js similarity index 100% rename from packages/site/examples/item/customEdge/demo/edgeMulLabel.js rename to packages/site/examples/element/customEdge/demo/edgeMulLabel.js diff --git a/packages/site/examples/item/customEdge/demo/extraShape.js b/packages/site/examples/element/customEdge/demo/extraShape.js similarity index 100% rename from packages/site/examples/item/customEdge/demo/extraShape.js rename to packages/site/examples/element/customEdge/demo/extraShape.js diff --git a/packages/site/examples/item/customEdge/demo/meta.json b/packages/site/examples/element/customEdge/demo/meta.json similarity index 100% rename from packages/site/examples/item/customEdge/demo/meta.json rename to packages/site/examples/element/customEdge/demo/meta.json diff --git a/packages/site/examples/item/customEdge/index.en.md b/packages/site/examples/element/customEdge/index.en.md similarity index 100% rename from packages/site/examples/item/customEdge/index.en.md rename to packages/site/examples/element/customEdge/index.en.md diff --git a/packages/site/examples/item/customEdge/index.zh.md b/packages/site/examples/element/customEdge/index.zh.md similarity index 100% rename from packages/site/examples/item/customEdge/index.zh.md rename to packages/site/examples/element/customEdge/index.zh.md diff --git a/packages/site/examples/item/customNode/API.en.md b/packages/site/examples/element/customNode/API.en.md similarity index 100% rename from packages/site/examples/item/customNode/API.en.md rename to packages/site/examples/element/customNode/API.en.md diff --git a/packages/site/examples/item/customNode/API.zh.md b/packages/site/examples/element/customNode/API.zh.md similarity index 100% rename from packages/site/examples/item/customNode/API.zh.md rename to packages/site/examples/element/customNode/API.zh.md diff --git a/packages/site/examples/item/customNode/demo/card.js b/packages/site/examples/element/customNode/demo/card.js similarity index 100% rename from packages/site/examples/item/customNode/demo/card.js rename to packages/site/examples/element/customNode/demo/card.js diff --git a/packages/site/examples/item/customNode/demo/cardNode.js b/packages/site/examples/element/customNode/demo/cardNode.js similarity index 100% rename from packages/site/examples/item/customNode/demo/cardNode.js rename to packages/site/examples/element/customNode/demo/cardNode.js diff --git a/packages/site/examples/item/customNode/demo/g2ActiveChart.js b/packages/site/examples/element/customNode/demo/g2ActiveChart.js similarity index 100% rename from packages/site/examples/item/customNode/demo/g2ActiveChart.js rename to packages/site/examples/element/customNode/demo/g2ActiveChart.js diff --git a/packages/site/examples/item/customNode/demo/g2BarChart.js b/packages/site/examples/element/customNode/demo/g2BarChart.js similarity index 100% rename from packages/site/examples/item/customNode/demo/g2BarChart.js rename to packages/site/examples/element/customNode/demo/g2BarChart.js diff --git a/packages/site/examples/item/customNode/demo/g2LatticeChart.js b/packages/site/examples/element/customNode/demo/g2LatticeChart.js similarity index 100% rename from packages/site/examples/item/customNode/demo/g2LatticeChart.js rename to packages/site/examples/element/customNode/demo/g2LatticeChart.js diff --git a/packages/site/examples/item/customNode/demo/jsx-g-node.js b/packages/site/examples/element/customNode/demo/jsx-g-node.js similarity index 100% rename from packages/site/examples/item/customNode/demo/jsx-g-node.js rename to packages/site/examples/element/customNode/demo/jsx-g-node.js diff --git a/packages/site/examples/item/customNode/demo/meta.json b/packages/site/examples/element/customNode/demo/meta.json similarity index 100% rename from packages/site/examples/item/customNode/demo/meta.json rename to packages/site/examples/element/customNode/demo/meta.json diff --git a/packages/site/examples/item/customNode/demo/pieChart.js b/packages/site/examples/element/customNode/demo/pieChart.js similarity index 100% rename from packages/site/examples/item/customNode/demo/pieChart.js rename to packages/site/examples/element/customNode/demo/pieChart.js diff --git a/packages/site/examples/item/customNode/demo/react-node.js b/packages/site/examples/element/customNode/demo/react-node.js similarity index 100% rename from packages/site/examples/item/customNode/demo/react-node.js rename to packages/site/examples/element/customNode/demo/react-node.js diff --git a/packages/site/examples/item/customNode/index.en.md b/packages/site/examples/element/customNode/index.en.md similarity index 100% rename from packages/site/examples/item/customNode/index.en.md rename to packages/site/examples/element/customNode/index.en.md diff --git a/packages/site/examples/item/customNode/index.zh.md b/packages/site/examples/element/customNode/index.zh.md similarity index 100% rename from packages/site/examples/item/customNode/index.zh.md rename to packages/site/examples/element/customNode/index.zh.md diff --git a/packages/site/examples/item/defaultCombos/API.en.md b/packages/site/examples/element/defaultCombos/API.en.md similarity index 100% rename from packages/site/examples/item/defaultCombos/API.en.md rename to packages/site/examples/element/defaultCombos/API.en.md diff --git a/packages/site/examples/item/defaultCombos/API.zh.md b/packages/site/examples/element/defaultCombos/API.zh.md similarity index 100% rename from packages/site/examples/item/defaultCombos/API.zh.md rename to packages/site/examples/element/defaultCombos/API.zh.md diff --git a/packages/site/examples/item/defaultCombos/demo/circle.ts b/packages/site/examples/element/defaultCombos/demo/circle.ts similarity index 100% rename from packages/site/examples/item/defaultCombos/demo/circle.ts rename to packages/site/examples/element/defaultCombos/demo/circle.ts diff --git a/packages/site/examples/item/defaultCombos/demo/meta.json b/packages/site/examples/element/defaultCombos/demo/meta.json similarity index 100% rename from packages/site/examples/item/defaultCombos/demo/meta.json rename to packages/site/examples/element/defaultCombos/demo/meta.json diff --git a/packages/site/examples/item/defaultCombos/demo/rect.ts b/packages/site/examples/element/defaultCombos/demo/rect.ts similarity index 100% rename from packages/site/examples/item/defaultCombos/demo/rect.ts rename to packages/site/examples/element/defaultCombos/demo/rect.ts diff --git a/packages/site/examples/item/defaultCombos/index.en.md b/packages/site/examples/element/defaultCombos/index.en.md similarity index 100% rename from packages/site/examples/item/defaultCombos/index.en.md rename to packages/site/examples/element/defaultCombos/index.en.md diff --git a/packages/site/examples/item/defaultCombos/index.zh.md b/packages/site/examples/element/defaultCombos/index.zh.md similarity index 100% rename from packages/site/examples/item/defaultCombos/index.zh.md rename to packages/site/examples/element/defaultCombos/index.zh.md diff --git a/packages/site/examples/item/defaultEdges/API.en.md b/packages/site/examples/element/defaultEdges/API.en.md similarity index 100% rename from packages/site/examples/item/defaultEdges/API.en.md rename to packages/site/examples/element/defaultEdges/API.en.md diff --git a/packages/site/examples/item/defaultEdges/API.zh.md b/packages/site/examples/element/defaultEdges/API.zh.md similarity index 100% rename from packages/site/examples/item/defaultEdges/API.zh.md rename to packages/site/examples/element/defaultEdges/API.zh.md diff --git a/packages/site/examples/item/defaultEdges/demo/cubic.ts b/packages/site/examples/element/defaultEdges/demo/cubic.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/cubic.ts rename to packages/site/examples/element/defaultEdges/demo/cubic.ts diff --git a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts b/packages/site/examples/element/defaultEdges/demo/horizontalCubic.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts rename to packages/site/examples/element/defaultEdges/demo/horizontalCubic.ts diff --git a/packages/site/examples/item/defaultEdges/demo/line.ts b/packages/site/examples/element/defaultEdges/demo/line.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/line.ts rename to packages/site/examples/element/defaultEdges/demo/line.ts diff --git a/packages/site/examples/item/defaultEdges/demo/loopCurve.ts b/packages/site/examples/element/defaultEdges/demo/loopCurve.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/loopCurve.ts rename to packages/site/examples/element/defaultEdges/demo/loopCurve.ts diff --git a/packages/site/examples/item/defaultEdges/demo/loopPolyline.ts b/packages/site/examples/element/defaultEdges/demo/loopPolyline.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/loopPolyline.ts rename to packages/site/examples/element/defaultEdges/demo/loopPolyline.ts diff --git a/packages/site/examples/item/defaultEdges/demo/meta.json b/packages/site/examples/element/defaultEdges/demo/meta.json similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/meta.json rename to packages/site/examples/element/defaultEdges/demo/meta.json diff --git a/packages/site/examples/item/defaultEdges/demo/polyline.ts b/packages/site/examples/element/defaultEdges/demo/polyline.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/polyline.ts rename to packages/site/examples/element/defaultEdges/demo/polyline.ts diff --git a/packages/site/examples/item/defaultEdges/demo/polylineOrth.ts b/packages/site/examples/element/defaultEdges/demo/polylineOrth.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/polylineOrth.ts rename to packages/site/examples/element/defaultEdges/demo/polylineOrth.ts diff --git a/packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts b/packages/site/examples/element/defaultEdges/demo/polylineOrthHasCPs.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts rename to packages/site/examples/element/defaultEdges/demo/polylineOrthHasCPs.ts diff --git a/packages/site/examples/item/defaultEdges/demo/quadratic.ts b/packages/site/examples/element/defaultEdges/demo/quadratic.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/quadratic.ts rename to packages/site/examples/element/defaultEdges/demo/quadratic.ts diff --git a/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts b/packages/site/examples/element/defaultEdges/demo/verticalCubic.ts similarity index 100% rename from packages/site/examples/item/defaultEdges/demo/verticalCubic.ts rename to packages/site/examples/element/defaultEdges/demo/verticalCubic.ts diff --git a/packages/site/examples/item/defaultEdges/index.en.md b/packages/site/examples/element/defaultEdges/index.en.md similarity index 100% rename from packages/site/examples/item/defaultEdges/index.en.md rename to packages/site/examples/element/defaultEdges/index.en.md diff --git a/packages/site/examples/item/defaultEdges/index.zh.md b/packages/site/examples/element/defaultEdges/index.zh.md similarity index 100% rename from packages/site/examples/item/defaultEdges/index.zh.md rename to packages/site/examples/element/defaultEdges/index.zh.md diff --git a/packages/site/examples/item/defaultNodes/API.en.md b/packages/site/examples/element/defaultNodes/API.en.md similarity index 100% rename from packages/site/examples/item/defaultNodes/API.en.md rename to packages/site/examples/element/defaultNodes/API.en.md diff --git a/packages/site/examples/item/defaultNodes/API.zh.md b/packages/site/examples/element/defaultNodes/API.zh.md similarity index 100% rename from packages/site/examples/item/defaultNodes/API.zh.md rename to packages/site/examples/element/defaultNodes/API.zh.md diff --git a/packages/site/examples/item/defaultNodes/demo/3d-node.js b/packages/site/examples/element/defaultNodes/demo/3d-node.js similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/3d-node.js rename to packages/site/examples/element/defaultNodes/demo/3d-node.js diff --git a/packages/site/examples/item/defaultNodes/demo/circle.ts b/packages/site/examples/element/defaultNodes/demo/circle.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/circle.ts rename to packages/site/examples/element/defaultNodes/demo/circle.ts diff --git a/packages/site/examples/item/defaultNodes/demo/diamond.ts b/packages/site/examples/element/defaultNodes/demo/diamond.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/diamond.ts rename to packages/site/examples/element/defaultNodes/demo/diamond.ts diff --git a/packages/site/examples/item/defaultNodes/demo/donut.ts b/packages/site/examples/element/defaultNodes/demo/donut.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/donut.ts rename to packages/site/examples/element/defaultNodes/demo/donut.ts diff --git a/packages/site/examples/item/defaultNodes/demo/ellipse.ts b/packages/site/examples/element/defaultNodes/demo/ellipse.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/ellipse.ts rename to packages/site/examples/element/defaultNodes/demo/ellipse.ts diff --git a/packages/site/examples/item/defaultNodes/demo/hexagon.ts b/packages/site/examples/element/defaultNodes/demo/hexagon.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/hexagon.ts rename to packages/site/examples/element/defaultNodes/demo/hexagon.ts diff --git a/packages/site/examples/item/defaultNodes/demo/image.ts b/packages/site/examples/element/defaultNodes/demo/image.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/image.ts rename to packages/site/examples/element/defaultNodes/demo/image.ts diff --git a/packages/site/examples/item/defaultNodes/demo/meta.json b/packages/site/examples/element/defaultNodes/demo/meta.json similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/meta.json rename to packages/site/examples/element/defaultNodes/demo/meta.json diff --git a/packages/site/examples/item/defaultNodes/demo/modelRect.js b/packages/site/examples/element/defaultNodes/demo/modelRect.js similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/modelRect.js rename to packages/site/examples/element/defaultNodes/demo/modelRect.js diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts b/packages/site/examples/element/defaultNodes/demo/radiusRect.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/radiusRect.ts rename to packages/site/examples/element/defaultNodes/demo/radiusRect.ts diff --git a/packages/site/examples/item/defaultNodes/demo/rect.ts b/packages/site/examples/element/defaultNodes/demo/rect.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/rect.ts rename to packages/site/examples/element/defaultNodes/demo/rect.ts diff --git a/packages/site/examples/item/defaultNodes/demo/star.ts b/packages/site/examples/element/defaultNodes/demo/star.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/star.ts rename to packages/site/examples/element/defaultNodes/demo/star.ts diff --git a/packages/site/examples/item/defaultNodes/demo/triangle.ts b/packages/site/examples/element/defaultNodes/demo/triangle.ts similarity index 100% rename from packages/site/examples/item/defaultNodes/demo/triangle.ts rename to packages/site/examples/element/defaultNodes/demo/triangle.ts diff --git a/packages/site/examples/item/defaultNodes/index.en.md b/packages/site/examples/element/defaultNodes/index.en.md similarity index 100% rename from packages/site/examples/item/defaultNodes/index.en.md rename to packages/site/examples/element/defaultNodes/index.en.md diff --git a/packages/site/examples/item/defaultNodes/index.zh.md b/packages/site/examples/element/defaultNodes/index.zh.md similarity index 100% rename from packages/site/examples/item/defaultNodes/index.zh.md rename to packages/site/examples/element/defaultNodes/index.zh.md diff --git a/packages/site/examples/item/label/demo/copyLabel.ts b/packages/site/examples/element/label/demo/copyLabel.ts similarity index 100% rename from packages/site/examples/item/label/demo/copyLabel.ts rename to packages/site/examples/element/label/demo/copyLabel.ts diff --git a/packages/site/examples/item/label/demo/labelLen.ts b/packages/site/examples/element/label/demo/labelLen.ts similarity index 100% rename from packages/site/examples/item/label/demo/labelLen.ts rename to packages/site/examples/element/label/demo/labelLen.ts diff --git a/packages/site/examples/item/label/demo/labelLen1.ts b/packages/site/examples/element/label/demo/labelLen1.ts similarity index 100% rename from packages/site/examples/item/label/demo/labelLen1.ts rename to packages/site/examples/element/label/demo/labelLen1.ts diff --git a/packages/site/examples/item/label/demo/meta.json b/packages/site/examples/element/label/demo/meta.json similarity index 100% rename from packages/site/examples/item/label/demo/meta.json rename to packages/site/examples/element/label/demo/meta.json diff --git a/packages/site/examples/item/label/index.en.md b/packages/site/examples/element/label/index.en.md similarity index 100% rename from packages/site/examples/item/label/index.en.md rename to packages/site/examples/element/label/index.en.md diff --git a/packages/site/examples/item/label/index.zh.md b/packages/site/examples/element/label/index.zh.md similarity index 100% rename from packages/site/examples/item/label/index.zh.md rename to packages/site/examples/element/label/index.zh.md diff --git a/packages/site/examples/item/labelBg/demo/label-background.ts b/packages/site/examples/element/labelBg/demo/label-background.ts similarity index 100% rename from packages/site/examples/item/labelBg/demo/label-background.ts rename to packages/site/examples/element/labelBg/demo/label-background.ts diff --git a/packages/site/examples/item/labelBg/demo/meta.json b/packages/site/examples/element/labelBg/demo/meta.json similarity index 100% rename from packages/site/examples/item/labelBg/demo/meta.json rename to packages/site/examples/element/labelBg/demo/meta.json diff --git a/packages/site/examples/item/labelBg/index.en.md b/packages/site/examples/element/labelBg/index.en.md similarity index 100% rename from packages/site/examples/item/labelBg/index.en.md rename to packages/site/examples/element/labelBg/index.en.md diff --git a/packages/site/examples/item/labelBg/index.zh.md b/packages/site/examples/element/labelBg/index.zh.md similarity index 100% rename from packages/site/examples/item/labelBg/index.zh.md rename to packages/site/examples/element/labelBg/index.zh.md diff --git a/packages/site/examples/item/multiEdge/demo/meta.json b/packages/site/examples/element/multiEdge/demo/meta.json similarity index 100% rename from packages/site/examples/item/multiEdge/demo/meta.json rename to packages/site/examples/element/multiEdge/demo/meta.json diff --git a/packages/site/examples/item/multiEdge/demo/multiEdges.ts b/packages/site/examples/element/multiEdge/demo/multiEdges.ts similarity index 100% rename from packages/site/examples/item/multiEdge/demo/multiEdges.ts rename to packages/site/examples/element/multiEdge/demo/multiEdges.ts diff --git a/packages/site/examples/item/multiEdge/index.en.md b/packages/site/examples/element/multiEdge/index.en.md similarity index 100% rename from packages/site/examples/item/multiEdge/index.en.md rename to packages/site/examples/element/multiEdge/index.en.md diff --git a/packages/site/examples/item/multiEdge/index.zh.md b/packages/site/examples/element/multiEdge/index.zh.md similarity index 100% rename from packages/site/examples/item/multiEdge/index.zh.md rename to packages/site/examples/element/multiEdge/index.zh.md diff --git a/packages/site/examples/item/ports/demo/meta.json b/packages/site/examples/element/ports/demo/meta.json similarity index 100% rename from packages/site/examples/item/ports/demo/meta.json rename to packages/site/examples/element/ports/demo/meta.json diff --git a/packages/site/examples/item/ports/demo/ports.ts b/packages/site/examples/element/ports/demo/ports.ts similarity index 100% rename from packages/site/examples/item/ports/demo/ports.ts rename to packages/site/examples/element/ports/demo/ports.ts diff --git a/packages/site/examples/item/ports/index.en.md b/packages/site/examples/element/ports/index.en.md similarity index 100% rename from packages/site/examples/item/ports/index.en.md rename to packages/site/examples/element/ports/index.en.md diff --git a/packages/site/examples/item/ports/index.zh.md b/packages/site/examples/element/ports/index.zh.md similarity index 100% rename from packages/site/examples/item/ports/index.zh.md rename to packages/site/examples/element/ports/index.zh.md diff --git a/packages/site/examples/net/arcDiagram/demo/basicArcDiagram.js b/packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js similarity index 100% rename from packages/site/examples/net/arcDiagram/demo/basicArcDiagram.js rename to packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js diff --git a/packages/site/examples/net/arcDiagram/demo/circularArcDiagram.js b/packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js similarity index 100% rename from packages/site/examples/net/arcDiagram/demo/circularArcDiagram.js rename to packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js diff --git a/packages/site/examples/net/arcDiagram/demo/meta.json b/packages/site/examples/layout/arcDiagram/demo/meta.json similarity index 100% rename from packages/site/examples/net/arcDiagram/demo/meta.json rename to packages/site/examples/layout/arcDiagram/demo/meta.json diff --git a/packages/site/examples/net/arcDiagram/index.en.md b/packages/site/examples/layout/arcDiagram/index.en.md similarity index 100% rename from packages/site/examples/net/arcDiagram/index.en.md rename to packages/site/examples/layout/arcDiagram/index.en.md diff --git a/packages/site/examples/net/arcDiagram/index.zh.md b/packages/site/examples/layout/arcDiagram/index.zh.md similarity index 100% rename from packages/site/examples/net/arcDiagram/index.zh.md rename to packages/site/examples/layout/arcDiagram/index.zh.md diff --git a/packages/site/examples/net/circular/API.en.md b/packages/site/examples/layout/circular/API.en.md similarity index 100% rename from packages/site/examples/net/circular/API.en.md rename to packages/site/examples/layout/circular/API.en.md diff --git a/packages/site/examples/net/circular/API.zh.md b/packages/site/examples/layout/circular/API.zh.md similarity index 100% rename from packages/site/examples/net/circular/API.zh.md rename to packages/site/examples/layout/circular/API.zh.md diff --git a/packages/site/examples/net/circular/demo/basic.ts b/packages/site/examples/layout/circular/demo/basic.ts similarity index 100% rename from packages/site/examples/net/circular/demo/basic.ts rename to packages/site/examples/layout/circular/demo/basic.ts diff --git a/packages/site/examples/net/circular/demo/configurationTranslate.ts b/packages/site/examples/layout/circular/demo/configurationTranslate.ts similarity index 100% rename from packages/site/examples/net/circular/demo/configurationTranslate.ts rename to packages/site/examples/layout/circular/demo/configurationTranslate.ts diff --git a/packages/site/examples/net/circular/demo/degree.ts b/packages/site/examples/layout/circular/demo/degree.ts similarity index 100% rename from packages/site/examples/net/circular/demo/degree.ts rename to packages/site/examples/layout/circular/demo/degree.ts diff --git a/packages/site/examples/net/circular/demo/division.ts b/packages/site/examples/layout/circular/demo/division.ts similarity index 100% rename from packages/site/examples/net/circular/demo/division.ts rename to packages/site/examples/layout/circular/demo/division.ts diff --git a/packages/site/examples/net/circular/demo/meta.json b/packages/site/examples/layout/circular/demo/meta.json similarity index 100% rename from packages/site/examples/net/circular/demo/meta.json rename to packages/site/examples/layout/circular/demo/meta.json diff --git a/packages/site/examples/net/circular/demo/spiral.ts b/packages/site/examples/layout/circular/demo/spiral.ts similarity index 100% rename from packages/site/examples/net/circular/demo/spiral.ts rename to packages/site/examples/layout/circular/demo/spiral.ts diff --git a/packages/site/examples/net/circular/index.en.md b/packages/site/examples/layout/circular/index.en.md similarity index 100% rename from packages/site/examples/net/circular/index.en.md rename to packages/site/examples/layout/circular/index.en.md diff --git a/packages/site/examples/net/circular/index.zh.md b/packages/site/examples/layout/circular/index.zh.md similarity index 100% rename from packages/site/examples/net/circular/index.zh.md rename to packages/site/examples/layout/circular/index.zh.md diff --git a/packages/site/examples/net/comboLayout/API.en.md b/packages/site/examples/layout/comboLayout/API.en.md similarity index 100% rename from packages/site/examples/net/comboLayout/API.en.md rename to packages/site/examples/layout/comboLayout/API.en.md diff --git a/packages/site/examples/net/comboLayout/API.zh.md b/packages/site/examples/layout/comboLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/comboLayout/API.zh.md rename to packages/site/examples/layout/comboLayout/API.zh.md diff --git a/packages/site/examples/net/comboLayout/demo/comboCombined.ts b/packages/site/examples/layout/comboLayout/demo/comboCombined.ts similarity index 100% rename from packages/site/examples/net/comboLayout/demo/comboCombined.ts rename to packages/site/examples/layout/comboLayout/demo/comboCombined.ts diff --git a/packages/site/examples/net/comboLayout/demo/meta.json b/packages/site/examples/layout/comboLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/comboLayout/demo/meta.json rename to packages/site/examples/layout/comboLayout/demo/meta.json diff --git a/packages/site/examples/net/comboLayout/index.en.md b/packages/site/examples/layout/comboLayout/index.en.md similarity index 100% rename from packages/site/examples/net/comboLayout/index.en.md rename to packages/site/examples/layout/comboLayout/index.en.md diff --git a/packages/site/examples/net/comboLayout/index.zh.md b/packages/site/examples/layout/comboLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/comboLayout/index.zh.md rename to packages/site/examples/layout/comboLayout/index.zh.md diff --git a/packages/site/examples/net/compactBox/API.en.md b/packages/site/examples/layout/compactBox/API.en.md similarity index 100% rename from packages/site/examples/net/compactBox/API.en.md rename to packages/site/examples/layout/compactBox/API.en.md diff --git a/packages/site/examples/net/compactBox/API.zh.md b/packages/site/examples/layout/compactBox/API.zh.md similarity index 100% rename from packages/site/examples/net/compactBox/API.zh.md rename to packages/site/examples/layout/compactBox/API.zh.md diff --git a/packages/site/examples/net/compactBox/demo/basicCompactBox.ts b/packages/site/examples/layout/compactBox/demo/basicCompactBox.ts similarity index 100% rename from packages/site/examples/net/compactBox/demo/basicCompactBox.ts rename to packages/site/examples/layout/compactBox/demo/basicCompactBox.ts diff --git a/packages/site/examples/net/compactBox/demo/compactBoxLeftAlign.ts b/packages/site/examples/layout/compactBox/demo/compactBoxLeftAlign.ts similarity index 100% rename from packages/site/examples/net/compactBox/demo/compactBoxLeftAlign.ts rename to packages/site/examples/layout/compactBox/demo/compactBoxLeftAlign.ts diff --git a/packages/site/examples/net/compactBox/demo/meta.json b/packages/site/examples/layout/compactBox/demo/meta.json similarity index 100% rename from packages/site/examples/net/compactBox/demo/meta.json rename to packages/site/examples/layout/compactBox/demo/meta.json diff --git a/packages/site/examples/net/compactBox/demo/topToBottomCompactBox.ts b/packages/site/examples/layout/compactBox/demo/topToBottomCompactBox.ts similarity index 100% rename from packages/site/examples/net/compactBox/demo/topToBottomCompactBox.ts rename to packages/site/examples/layout/compactBox/demo/topToBottomCompactBox.ts diff --git a/packages/site/examples/net/compactBox/index.en.md b/packages/site/examples/layout/compactBox/index.en.md similarity index 100% rename from packages/site/examples/net/compactBox/index.en.md rename to packages/site/examples/layout/compactBox/index.en.md diff --git a/packages/site/examples/net/compactBox/index.zh.md b/packages/site/examples/layout/compactBox/index.zh.md similarity index 100% rename from packages/site/examples/net/compactBox/index.zh.md rename to packages/site/examples/layout/compactBox/index.zh.md diff --git a/packages/site/examples/net/concentricLayout/API.en.md b/packages/site/examples/layout/concentricLayout/API.en.md similarity index 100% rename from packages/site/examples/net/concentricLayout/API.en.md rename to packages/site/examples/layout/concentricLayout/API.en.md diff --git a/packages/site/examples/net/concentricLayout/API.zh.md b/packages/site/examples/layout/concentricLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/concentricLayout/API.zh.md rename to packages/site/examples/layout/concentricLayout/API.zh.md diff --git a/packages/site/examples/net/concentricLayout/demo/basicConcentric.ts b/packages/site/examples/layout/concentricLayout/demo/basicConcentric.ts similarity index 100% rename from packages/site/examples/net/concentricLayout/demo/basicConcentric.ts rename to packages/site/examples/layout/concentricLayout/demo/basicConcentric.ts diff --git a/packages/site/examples/net/concentricLayout/demo/meta.json b/packages/site/examples/layout/concentricLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/concentricLayout/demo/meta.json rename to packages/site/examples/layout/concentricLayout/demo/meta.json diff --git a/packages/site/examples/net/concentricLayout/index.en.md b/packages/site/examples/layout/concentricLayout/index.en.md similarity index 100% rename from packages/site/examples/net/concentricLayout/index.en.md rename to packages/site/examples/layout/concentricLayout/index.en.md diff --git a/packages/site/examples/net/concentricLayout/index.zh.md b/packages/site/examples/layout/concentricLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/concentricLayout/index.zh.md rename to packages/site/examples/layout/concentricLayout/index.zh.md diff --git a/packages/site/examples/net/dagreFlow/API.en.md b/packages/site/examples/layout/dagreFlow/API.en.md similarity index 100% rename from packages/site/examples/net/dagreFlow/API.en.md rename to packages/site/examples/layout/dagreFlow/API.en.md diff --git a/packages/site/examples/net/dagreFlow/API.zh.md b/packages/site/examples/layout/dagreFlow/API.zh.md similarity index 100% rename from packages/site/examples/net/dagreFlow/API.zh.md rename to packages/site/examples/layout/dagreFlow/API.zh.md diff --git a/packages/site/examples/net/dagreFlow/demo/antv-dagre-combo.ts b/packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts similarity index 100% rename from packages/site/examples/net/dagreFlow/demo/antv-dagre-combo.ts rename to packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts diff --git a/packages/site/examples/net/dagreFlow/demo/antv-dagre.ts b/packages/site/examples/layout/dagreFlow/demo/antv-dagre.ts similarity index 100% rename from packages/site/examples/net/dagreFlow/demo/antv-dagre.ts rename to packages/site/examples/layout/dagreFlow/demo/antv-dagre.ts diff --git a/packages/site/examples/net/dagreFlow/demo/dagre.ts b/packages/site/examples/layout/dagreFlow/demo/dagre.ts similarity index 100% rename from packages/site/examples/net/dagreFlow/demo/dagre.ts rename to packages/site/examples/layout/dagreFlow/demo/dagre.ts diff --git a/packages/site/examples/net/dagreFlow/demo/meta.json b/packages/site/examples/layout/dagreFlow/demo/meta.json similarity index 100% rename from packages/site/examples/net/dagreFlow/demo/meta.json rename to packages/site/examples/layout/dagreFlow/demo/meta.json diff --git a/packages/site/examples/net/dagreFlow/index.en.md b/packages/site/examples/layout/dagreFlow/index.en.md similarity index 100% rename from packages/site/examples/net/dagreFlow/index.en.md rename to packages/site/examples/layout/dagreFlow/index.en.md diff --git a/packages/site/examples/net/dagreFlow/index.zh.md b/packages/site/examples/layout/dagreFlow/index.zh.md similarity index 100% rename from packages/site/examples/net/dagreFlow/index.zh.md rename to packages/site/examples/layout/dagreFlow/index.zh.md diff --git a/packages/site/examples/net/dendrogram/API.en.md b/packages/site/examples/layout/dendrogram/API.en.md similarity index 100% rename from packages/site/examples/net/dendrogram/API.en.md rename to packages/site/examples/layout/dendrogram/API.en.md diff --git a/packages/site/examples/net/dendrogram/API.zh.md b/packages/site/examples/layout/dendrogram/API.zh.md similarity index 100% rename from packages/site/examples/net/dendrogram/API.zh.md rename to packages/site/examples/layout/dendrogram/API.zh.md diff --git a/packages/site/examples/net/dendrogram/demo/basicDendrogram.ts b/packages/site/examples/layout/dendrogram/demo/basicDendrogram.ts similarity index 100% rename from packages/site/examples/net/dendrogram/demo/basicDendrogram.ts rename to packages/site/examples/layout/dendrogram/demo/basicDendrogram.ts diff --git a/packages/site/examples/net/dendrogram/demo/meta.json b/packages/site/examples/layout/dendrogram/demo/meta.json similarity index 100% rename from packages/site/examples/net/dendrogram/demo/meta.json rename to packages/site/examples/layout/dendrogram/demo/meta.json diff --git a/packages/site/examples/net/dendrogram/demo/tbDendrogram.ts b/packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts similarity index 100% rename from packages/site/examples/net/dendrogram/demo/tbDendrogram.ts rename to packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts diff --git a/packages/site/examples/net/dendrogram/index.en.md b/packages/site/examples/layout/dendrogram/index.en.md similarity index 100% rename from packages/site/examples/net/dendrogram/index.en.md rename to packages/site/examples/layout/dendrogram/index.en.md diff --git a/packages/site/examples/net/dendrogram/index.zh.md b/packages/site/examples/layout/dendrogram/index.zh.md similarity index 100% rename from packages/site/examples/net/dendrogram/index.zh.md rename to packages/site/examples/layout/dendrogram/index.zh.md diff --git a/packages/site/examples/net/forceDirected/API.en.md b/packages/site/examples/layout/forceDirected/API.en.md similarity index 100% rename from packages/site/examples/net/forceDirected/API.en.md rename to packages/site/examples/layout/forceDirected/API.en.md diff --git a/packages/site/examples/net/forceDirected/API.zh.md b/packages/site/examples/layout/forceDirected/API.zh.md similarity index 100% rename from packages/site/examples/net/forceDirected/API.zh.md rename to packages/site/examples/layout/forceDirected/API.zh.md diff --git a/packages/site/examples/net/forceDirected/demo/basicFA2.js b/packages/site/examples/layout/forceDirected/demo/basicFA2.js similarity index 100% rename from packages/site/examples/net/forceDirected/demo/basicFA2.js rename to packages/site/examples/layout/forceDirected/demo/basicFA2.js diff --git a/packages/site/examples/net/forceDirected/demo/basicForce.js b/packages/site/examples/layout/forceDirected/demo/basicForce.js similarity index 100% rename from packages/site/examples/net/forceDirected/demo/basicForce.js rename to packages/site/examples/layout/forceDirected/demo/basicForce.js diff --git a/packages/site/examples/net/forceDirected/demo/forceDirectedConfigurationTranslate.js b/packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js similarity index 100% rename from packages/site/examples/net/forceDirected/demo/forceDirectedConfigurationTranslate.js rename to packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js diff --git a/packages/site/examples/net/forceDirected/demo/forceDirectedFunctionalParams.js b/packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js similarity index 100% rename from packages/site/examples/net/forceDirected/demo/forceDirectedFunctionalParams.js rename to packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js diff --git a/packages/site/examples/net/forceDirected/demo/meta.json b/packages/site/examples/layout/forceDirected/demo/meta.json similarity index 100% rename from packages/site/examples/net/forceDirected/demo/meta.json rename to packages/site/examples/layout/forceDirected/demo/meta.json diff --git a/packages/site/examples/net/forceDirected/index.en.md b/packages/site/examples/layout/forceDirected/index.en.md similarity index 100% rename from packages/site/examples/net/forceDirected/index.en.md rename to packages/site/examples/layout/forceDirected/index.en.md diff --git a/packages/site/examples/net/forceDirected/index.zh.md b/packages/site/examples/layout/forceDirected/index.zh.md similarity index 100% rename from packages/site/examples/net/forceDirected/index.zh.md rename to packages/site/examples/layout/forceDirected/index.zh.md diff --git a/packages/site/examples/net/fruchtermanLayout/API.en.md b/packages/site/examples/layout/fruchtermanLayout/API.en.md similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/API.en.md rename to packages/site/examples/layout/fruchtermanLayout/API.en.md diff --git a/packages/site/examples/net/fruchtermanLayout/API.zh.md b/packages/site/examples/layout/fruchtermanLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/API.zh.md rename to packages/site/examples/layout/fruchtermanLayout/API.zh.md diff --git a/packages/site/examples/net/fruchtermanLayout/demo/basicFruchterman.ts b/packages/site/examples/layout/fruchtermanLayout/demo/basicFruchterman.ts similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/demo/basicFruchterman.ts rename to packages/site/examples/layout/fruchtermanLayout/demo/basicFruchterman.ts diff --git a/packages/site/examples/net/fruchtermanLayout/demo/fruchtermanCluster.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/demo/fruchtermanCluster.ts rename to packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts diff --git a/packages/site/examples/net/fruchtermanLayout/demo/fruchtermanFix.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/demo/fruchtermanFix.ts rename to packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts diff --git a/packages/site/examples/net/fruchtermanLayout/demo/fruchtermanWebWorker.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/demo/fruchtermanWebWorker.ts rename to packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts diff --git a/packages/site/examples/net/fruchtermanLayout/demo/meta.json b/packages/site/examples/layout/fruchtermanLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/demo/meta.json rename to packages/site/examples/layout/fruchtermanLayout/demo/meta.json diff --git a/packages/site/examples/net/fruchtermanLayout/index.en.md b/packages/site/examples/layout/fruchtermanLayout/index.en.md similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/index.en.md rename to packages/site/examples/layout/fruchtermanLayout/index.en.md diff --git a/packages/site/examples/net/fruchtermanLayout/index.zh.md b/packages/site/examples/layout/fruchtermanLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/fruchtermanLayout/index.zh.md rename to packages/site/examples/layout/fruchtermanLayout/index.zh.md diff --git a/packages/site/examples/net/gpuLayout/API.en.md b/packages/site/examples/layout/gpuLayout/API.en.md similarity index 100% rename from packages/site/examples/net/gpuLayout/API.en.md rename to packages/site/examples/layout/gpuLayout/API.en.md diff --git a/packages/site/examples/net/gpuLayout/API.zh.md b/packages/site/examples/layout/gpuLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/gpuLayout/API.zh.md rename to packages/site/examples/layout/gpuLayout/API.zh.md diff --git a/packages/site/examples/net/gpuLayout/demo/basicFruchterman.ts b/packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts similarity index 100% rename from packages/site/examples/net/gpuLayout/demo/basicFruchterman.ts rename to packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts diff --git a/packages/site/examples/net/gpuLayout/demo/basicGForce.js b/packages/site/examples/layout/gpuLayout/demo/basicGForce.js similarity index 100% rename from packages/site/examples/net/gpuLayout/demo/basicGForce.js rename to packages/site/examples/layout/gpuLayout/demo/basicGForce.js diff --git a/packages/site/examples/net/gpuLayout/demo/fruchtermanComplexData.ts b/packages/site/examples/layout/gpuLayout/demo/fruchtermanComplexData.ts similarity index 100% rename from packages/site/examples/net/gpuLayout/demo/fruchtermanComplexData.ts rename to packages/site/examples/layout/gpuLayout/demo/fruchtermanComplexData.ts diff --git a/packages/site/examples/net/gpuLayout/demo/gForceComplexData.js b/packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js similarity index 100% rename from packages/site/examples/net/gpuLayout/demo/gForceComplexData.js rename to packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js diff --git a/packages/site/examples/net/gpuLayout/demo/meta.json b/packages/site/examples/layout/gpuLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/gpuLayout/demo/meta.json rename to packages/site/examples/layout/gpuLayout/demo/meta.json diff --git a/packages/site/examples/net/gpuLayout/index.en.md b/packages/site/examples/layout/gpuLayout/index.en.md similarity index 100% rename from packages/site/examples/net/gpuLayout/index.en.md rename to packages/site/examples/layout/gpuLayout/index.en.md diff --git a/packages/site/examples/net/gpuLayout/index.zh.md b/packages/site/examples/layout/gpuLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/gpuLayout/index.zh.md rename to packages/site/examples/layout/gpuLayout/index.zh.md diff --git a/packages/site/examples/net/gridLayout/API.en.md b/packages/site/examples/layout/gridLayout/API.en.md similarity index 100% rename from packages/site/examples/net/gridLayout/API.en.md rename to packages/site/examples/layout/gridLayout/API.en.md diff --git a/packages/site/examples/net/gridLayout/API.zh.md b/packages/site/examples/layout/gridLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/gridLayout/API.zh.md rename to packages/site/examples/layout/gridLayout/API.zh.md diff --git a/packages/site/examples/net/gridLayout/demo/grid.ts b/packages/site/examples/layout/gridLayout/demo/grid.ts similarity index 100% rename from packages/site/examples/net/gridLayout/demo/grid.ts rename to packages/site/examples/layout/gridLayout/demo/grid.ts diff --git a/packages/site/examples/net/gridLayout/demo/meta.json b/packages/site/examples/layout/gridLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/gridLayout/demo/meta.json rename to packages/site/examples/layout/gridLayout/demo/meta.json diff --git a/packages/site/examples/net/gridLayout/index.en.md b/packages/site/examples/layout/gridLayout/index.en.md similarity index 100% rename from packages/site/examples/net/gridLayout/index.en.md rename to packages/site/examples/layout/gridLayout/index.en.md diff --git a/packages/site/examples/net/gridLayout/index.zh.md b/packages/site/examples/layout/gridLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/gridLayout/index.zh.md rename to packages/site/examples/layout/gridLayout/index.zh.md diff --git a/packages/site/examples/net/indented/API.en.md b/packages/site/examples/layout/indented/API.en.md similarity index 100% rename from packages/site/examples/net/indented/API.en.md rename to packages/site/examples/layout/indented/API.en.md diff --git a/packages/site/examples/net/indented/API.zh.md b/packages/site/examples/layout/indented/API.zh.md similarity index 100% rename from packages/site/examples/net/indented/API.zh.md rename to packages/site/examples/layout/indented/API.zh.md diff --git a/packages/site/examples/net/indented/demo/filesystem.js b/packages/site/examples/layout/indented/demo/filesystem.js similarity index 100% rename from packages/site/examples/net/indented/demo/filesystem.js rename to packages/site/examples/layout/indented/demo/filesystem.js diff --git a/packages/site/examples/net/indented/demo/graphWithIntended.js b/packages/site/examples/layout/indented/demo/graphWithIntended.js similarity index 100% rename from packages/site/examples/net/indented/demo/graphWithIntended.js rename to packages/site/examples/layout/indented/demo/graphWithIntended.js diff --git a/packages/site/examples/net/indented/demo/hIntended.js b/packages/site/examples/layout/indented/demo/hIntended.js similarity index 100% rename from packages/site/examples/net/indented/demo/hIntended.js rename to packages/site/examples/layout/indented/demo/hIntended.js diff --git a/packages/site/examples/net/indented/demo/intendAlignTop.js b/packages/site/examples/layout/indented/demo/intendAlignTop.js similarity index 100% rename from packages/site/examples/net/indented/demo/intendAlignTop.js rename to packages/site/examples/layout/indented/demo/intendAlignTop.js diff --git a/packages/site/examples/net/indented/demo/meta.json b/packages/site/examples/layout/indented/demo/meta.json similarity index 100% rename from packages/site/examples/net/indented/demo/meta.json rename to packages/site/examples/layout/indented/demo/meta.json diff --git a/packages/site/examples/net/indented/index.en.md b/packages/site/examples/layout/indented/index.en.md similarity index 100% rename from packages/site/examples/net/indented/index.en.md rename to packages/site/examples/layout/indented/index.en.md diff --git a/packages/site/examples/net/indented/index.zh.md b/packages/site/examples/layout/indented/index.zh.md similarity index 100% rename from packages/site/examples/net/indented/index.zh.md rename to packages/site/examples/layout/indented/index.zh.md diff --git a/packages/site/examples/net/layoutMechanism/API.en.md b/packages/site/examples/layout/layoutMechanism/API.en.md similarity index 100% rename from packages/site/examples/net/layoutMechanism/API.en.md rename to packages/site/examples/layout/layoutMechanism/API.en.md diff --git a/packages/site/examples/net/layoutMechanism/API.zh.md b/packages/site/examples/layout/layoutMechanism/API.zh.md similarity index 100% rename from packages/site/examples/net/layoutMechanism/API.zh.md rename to packages/site/examples/layout/layoutMechanism/API.zh.md diff --git a/packages/site/examples/net/layoutMechanism/demo/customBigraph.js b/packages/site/examples/layout/layoutMechanism/demo/customBigraph.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/customBigraph.js rename to packages/site/examples/layout/layoutMechanism/demo/customBigraph.js diff --git a/packages/site/examples/net/layoutMechanism/demo/dataChange.js b/packages/site/examples/layout/layoutMechanism/demo/dataChange.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/dataChange.js rename to packages/site/examples/layout/layoutMechanism/demo/dataChange.js diff --git a/packages/site/examples/net/layoutMechanism/demo/layoutTiming.js b/packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/layoutTiming.js rename to packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js diff --git a/packages/site/examples/net/layoutMechanism/demo/layoutTranslate.js b/packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/layoutTranslate.js rename to packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js diff --git a/packages/site/examples/net/layoutMechanism/demo/meta.json b/packages/site/examples/layout/layoutMechanism/demo/meta.json similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/meta.json rename to packages/site/examples/layout/layoutMechanism/demo/meta.json diff --git a/packages/site/examples/net/layoutMechanism/demo/subgraphLayout.js b/packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/subgraphLayout.js rename to packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js diff --git a/packages/site/examples/net/layoutMechanism/demo/sublayoutPipes.js b/packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js similarity index 100% rename from packages/site/examples/net/layoutMechanism/demo/sublayoutPipes.js rename to packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js diff --git a/packages/site/examples/net/layoutMechanism/index.en.md b/packages/site/examples/layout/layoutMechanism/index.en.md similarity index 100% rename from packages/site/examples/net/layoutMechanism/index.en.md rename to packages/site/examples/layout/layoutMechanism/index.en.md diff --git a/packages/site/examples/net/layoutMechanism/index.zh.md b/packages/site/examples/layout/layoutMechanism/index.zh.md similarity index 100% rename from packages/site/examples/net/layoutMechanism/index.zh.md rename to packages/site/examples/layout/layoutMechanism/index.zh.md diff --git a/packages/site/examples/net/mdsLayout/API.en.md b/packages/site/examples/layout/mdsLayout/API.en.md similarity index 100% rename from packages/site/examples/net/mdsLayout/API.en.md rename to packages/site/examples/layout/mdsLayout/API.en.md diff --git a/packages/site/examples/net/mdsLayout/API.zh.md b/packages/site/examples/layout/mdsLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/mdsLayout/API.zh.md rename to packages/site/examples/layout/mdsLayout/API.zh.md diff --git a/packages/site/examples/net/mdsLayout/demo/basicMDS.ts b/packages/site/examples/layout/mdsLayout/demo/basicMDS.ts similarity index 100% rename from packages/site/examples/net/mdsLayout/demo/basicMDS.ts rename to packages/site/examples/layout/mdsLayout/demo/basicMDS.ts diff --git a/packages/site/examples/net/mdsLayout/demo/meta.json b/packages/site/examples/layout/mdsLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/mdsLayout/demo/meta.json rename to packages/site/examples/layout/mdsLayout/demo/meta.json diff --git a/packages/site/examples/net/mdsLayout/index.en.md b/packages/site/examples/layout/mdsLayout/index.en.md similarity index 100% rename from packages/site/examples/net/mdsLayout/index.en.md rename to packages/site/examples/layout/mdsLayout/index.en.md diff --git a/packages/site/examples/net/mdsLayout/index.zh.md b/packages/site/examples/layout/mdsLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/mdsLayout/index.zh.md rename to packages/site/examples/layout/mdsLayout/index.zh.md diff --git a/packages/site/examples/net/mindmap/API.en.md b/packages/site/examples/layout/mindmap/API.en.md similarity index 100% rename from packages/site/examples/net/mindmap/API.en.md rename to packages/site/examples/layout/mindmap/API.en.md diff --git a/packages/site/examples/net/mindmap/API.zh.md b/packages/site/examples/layout/mindmap/API.zh.md similarity index 100% rename from packages/site/examples/net/mindmap/API.zh.md rename to packages/site/examples/layout/mindmap/API.zh.md diff --git a/packages/site/examples/net/mindmap/demo/hCustomSideMindmap.ts b/packages/site/examples/layout/mindmap/demo/hCustomSideMindmap.ts similarity index 100% rename from packages/site/examples/net/mindmap/demo/hCustomSideMindmap.ts rename to packages/site/examples/layout/mindmap/demo/hCustomSideMindmap.ts diff --git a/packages/site/examples/net/mindmap/demo/hLeftMindmap.ts b/packages/site/examples/layout/mindmap/demo/hLeftMindmap.ts similarity index 100% rename from packages/site/examples/net/mindmap/demo/hLeftMindmap.ts rename to packages/site/examples/layout/mindmap/demo/hLeftMindmap.ts diff --git a/packages/site/examples/net/mindmap/demo/hMindmap.ts b/packages/site/examples/layout/mindmap/demo/hMindmap.ts similarity index 100% rename from packages/site/examples/net/mindmap/demo/hMindmap.ts rename to packages/site/examples/layout/mindmap/demo/hMindmap.ts diff --git a/packages/site/examples/net/mindmap/demo/hRightMindmap.ts b/packages/site/examples/layout/mindmap/demo/hRightMindmap.ts similarity index 100% rename from packages/site/examples/net/mindmap/demo/hRightMindmap.ts rename to packages/site/examples/layout/mindmap/demo/hRightMindmap.ts diff --git a/packages/site/examples/net/mindmap/demo/meta.json b/packages/site/examples/layout/mindmap/demo/meta.json similarity index 100% rename from packages/site/examples/net/mindmap/demo/meta.json rename to packages/site/examples/layout/mindmap/demo/meta.json diff --git a/packages/site/examples/net/mindmap/index.en.md b/packages/site/examples/layout/mindmap/index.en.md similarity index 100% rename from packages/site/examples/net/mindmap/index.en.md rename to packages/site/examples/layout/mindmap/index.en.md diff --git a/packages/site/examples/net/mindmap/index.zh.md b/packages/site/examples/layout/mindmap/index.zh.md similarity index 100% rename from packages/site/examples/net/mindmap/index.zh.md rename to packages/site/examples/layout/mindmap/index.zh.md diff --git a/packages/site/examples/net/radialLayout/API.en.md b/packages/site/examples/layout/radialLayout/API.en.md similarity index 100% rename from packages/site/examples/net/radialLayout/API.en.md rename to packages/site/examples/layout/radialLayout/API.en.md diff --git a/packages/site/examples/net/radialLayout/API.zh.md b/packages/site/examples/layout/radialLayout/API.zh.md similarity index 100% rename from packages/site/examples/net/radialLayout/API.zh.md rename to packages/site/examples/layout/radialLayout/API.zh.md diff --git a/packages/site/examples/net/radialLayout/demo/basic.ts b/packages/site/examples/layout/radialLayout/demo/basic.ts similarity index 100% rename from packages/site/examples/net/radialLayout/demo/basic.ts rename to packages/site/examples/layout/radialLayout/demo/basic.ts diff --git a/packages/site/examples/net/radialLayout/demo/configurationTranslate.ts b/packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts similarity index 100% rename from packages/site/examples/net/radialLayout/demo/configurationTranslate.ts rename to packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts diff --git a/packages/site/examples/net/radialLayout/demo/meta.json b/packages/site/examples/layout/radialLayout/demo/meta.json similarity index 100% rename from packages/site/examples/net/radialLayout/demo/meta.json rename to packages/site/examples/layout/radialLayout/demo/meta.json diff --git a/packages/site/examples/net/radialLayout/demo/preventOverlap.ts b/packages/site/examples/layout/radialLayout/demo/preventOverlap.ts similarity index 100% rename from packages/site/examples/net/radialLayout/demo/preventOverlap.ts rename to packages/site/examples/layout/radialLayout/demo/preventOverlap.ts diff --git a/packages/site/examples/net/radialLayout/demo/preventOverlapUnstrict.ts b/packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts similarity index 100% rename from packages/site/examples/net/radialLayout/demo/preventOverlapUnstrict.ts rename to packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts diff --git a/packages/site/examples/net/radialLayout/demo/sort.ts b/packages/site/examples/layout/radialLayout/demo/sort.ts similarity index 100% rename from packages/site/examples/net/radialLayout/demo/sort.ts rename to packages/site/examples/layout/radialLayout/demo/sort.ts diff --git a/packages/site/examples/net/radialLayout/index.en.md b/packages/site/examples/layout/radialLayout/index.en.md similarity index 100% rename from packages/site/examples/net/radialLayout/index.en.md rename to packages/site/examples/layout/radialLayout/index.en.md diff --git a/packages/site/examples/net/radialLayout/index.zh.md b/packages/site/examples/layout/radialLayout/index.zh.md similarity index 100% rename from packages/site/examples/net/radialLayout/index.zh.md rename to packages/site/examples/layout/radialLayout/index.zh.md diff --git a/packages/site/examples/net/radialtree/API.en.md b/packages/site/examples/layout/radialtree/API.en.md similarity index 100% rename from packages/site/examples/net/radialtree/API.en.md rename to packages/site/examples/layout/radialtree/API.en.md diff --git a/packages/site/examples/net/radialtree/API.zh.md b/packages/site/examples/layout/radialtree/API.zh.md similarity index 100% rename from packages/site/examples/net/radialtree/API.zh.md rename to packages/site/examples/layout/radialtree/API.zh.md diff --git a/packages/site/examples/net/radialtree/demo/meta.json b/packages/site/examples/layout/radialtree/demo/meta.json similarity index 100% rename from packages/site/examples/net/radialtree/demo/meta.json rename to packages/site/examples/layout/radialtree/demo/meta.json diff --git a/packages/site/examples/net/radialtree/demo/radialTree.js b/packages/site/examples/layout/radialtree/demo/radialTree.js similarity index 100% rename from packages/site/examples/net/radialtree/demo/radialTree.js rename to packages/site/examples/layout/radialtree/demo/radialTree.js diff --git a/packages/site/examples/net/radialtree/index.en.md b/packages/site/examples/layout/radialtree/index.en.md similarity index 100% rename from packages/site/examples/net/radialtree/index.en.md rename to packages/site/examples/layout/radialtree/index.en.md diff --git a/packages/site/examples/net/radialtree/index.zh.md b/packages/site/examples/layout/radialtree/index.zh.md similarity index 100% rename from packages/site/examples/net/radialtree/index.zh.md rename to packages/site/examples/layout/radialtree/index.zh.md diff --git a/packages/site/examples/tool/contextMenu/API.en.md b/packages/site/examples/plugin/contextMenu/API.en.md similarity index 100% rename from packages/site/examples/tool/contextMenu/API.en.md rename to packages/site/examples/plugin/contextMenu/API.en.md diff --git a/packages/site/examples/tool/contextMenu/API.zh.md b/packages/site/examples/plugin/contextMenu/API.zh.md similarity index 100% rename from packages/site/examples/tool/contextMenu/API.zh.md rename to packages/site/examples/plugin/contextMenu/API.zh.md diff --git a/packages/site/examples/tool/contextMenu/demo/contextMenu.ts b/packages/site/examples/plugin/contextMenu/demo/contextMenu.ts similarity index 100% rename from packages/site/examples/tool/contextMenu/demo/contextMenu.ts rename to packages/site/examples/plugin/contextMenu/demo/contextMenu.ts diff --git a/packages/site/examples/tool/contextMenu/demo/meta.json b/packages/site/examples/plugin/contextMenu/demo/meta.json similarity index 100% rename from packages/site/examples/tool/contextMenu/demo/meta.json rename to packages/site/examples/plugin/contextMenu/demo/meta.json diff --git a/packages/site/examples/tool/contextMenu/index.en.md b/packages/site/examples/plugin/contextMenu/index.en.md similarity index 100% rename from packages/site/examples/tool/contextMenu/index.en.md rename to packages/site/examples/plugin/contextMenu/index.en.md diff --git a/packages/site/examples/tool/contextMenu/index.zh.md b/packages/site/examples/plugin/contextMenu/index.zh.md similarity index 100% rename from packages/site/examples/tool/contextMenu/index.zh.md rename to packages/site/examples/plugin/contextMenu/index.zh.md diff --git a/packages/site/examples/tool/edgeFilterLens/demo/default.ts b/packages/site/examples/plugin/edgeFilterLens/demo/default.ts similarity index 99% rename from packages/site/examples/tool/edgeFilterLens/demo/default.ts rename to packages/site/examples/plugin/edgeFilterLens/demo/default.ts index b1bca56c28b..6c1400ff920 100644 --- a/packages/site/examples/tool/edgeFilterLens/demo/default.ts +++ b/packages/site/examples/plugin/edgeFilterLens/demo/default.ts @@ -47,7 +47,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') .then((res) => res.json()) .then((data) => { graph.read(data); -window.graph = graph; + window.graph = graph; }); const buttonContainer = document.createElement('div'); diff --git a/packages/site/examples/tool/edgeFilterLens/demo/meta.json b/packages/site/examples/plugin/edgeFilterLens/demo/meta.json similarity index 100% rename from packages/site/examples/tool/edgeFilterLens/demo/meta.json rename to packages/site/examples/plugin/edgeFilterLens/demo/meta.json diff --git a/packages/site/examples/tool/edgeFilterLens/demo/moreConfig.ts b/packages/site/examples/plugin/edgeFilterLens/demo/moreConfig.ts similarity index 99% rename from packages/site/examples/tool/edgeFilterLens/demo/moreConfig.ts rename to packages/site/examples/plugin/edgeFilterLens/demo/moreConfig.ts index 27dfee9e6a2..c39b4f216ab 100644 --- a/packages/site/examples/tool/edgeFilterLens/demo/moreConfig.ts +++ b/packages/site/examples/plugin/edgeFilterLens/demo/moreConfig.ts @@ -65,7 +65,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') .then((res) => res.json()) .then((data) => { graph.read(data); -window.graph = graph; + window.graph = graph; }); const buttonContainer = document.createElement('div'); diff --git a/packages/site/examples/tool/edgeFilterLens/index.en.md b/packages/site/examples/plugin/edgeFilterLens/index.en.md similarity index 100% rename from packages/site/examples/tool/edgeFilterLens/index.en.md rename to packages/site/examples/plugin/edgeFilterLens/index.en.md diff --git a/packages/site/examples/tool/edgeFilterLens/index.zh.md b/packages/site/examples/plugin/edgeFilterLens/index.zh.md similarity index 100% rename from packages/site/examples/tool/edgeFilterLens/index.zh.md rename to packages/site/examples/plugin/edgeFilterLens/index.zh.md diff --git a/packages/site/examples/tool/fisheye/API.en.md b/packages/site/examples/plugin/fisheye/API.en.md similarity index 100% rename from packages/site/examples/tool/fisheye/API.en.md rename to packages/site/examples/plugin/fisheye/API.en.md diff --git a/packages/site/examples/tool/fisheye/API.zh.md b/packages/site/examples/plugin/fisheye/API.zh.md similarity index 100% rename from packages/site/examples/tool/fisheye/API.zh.md rename to packages/site/examples/plugin/fisheye/API.zh.md diff --git a/packages/site/examples/tool/fisheye/demo/fisheye.ts b/packages/site/examples/plugin/fisheye/demo/fisheye.ts similarity index 100% rename from packages/site/examples/tool/fisheye/demo/fisheye.ts rename to packages/site/examples/plugin/fisheye/demo/fisheye.ts diff --git a/packages/site/examples/tool/fisheye/demo/fisheyeStyle.js b/packages/site/examples/plugin/fisheye/demo/fisheyeStyle.js similarity index 100% rename from packages/site/examples/tool/fisheye/demo/fisheyeStyle.js rename to packages/site/examples/plugin/fisheye/demo/fisheyeStyle.js diff --git a/packages/site/examples/tool/fisheye/demo/meta.json b/packages/site/examples/plugin/fisheye/demo/meta.json similarity index 100% rename from packages/site/examples/tool/fisheye/demo/meta.json rename to packages/site/examples/plugin/fisheye/demo/meta.json diff --git a/packages/site/examples/tool/fisheye/index.en.md b/packages/site/examples/plugin/fisheye/index.en.md similarity index 100% rename from packages/site/examples/tool/fisheye/index.en.md rename to packages/site/examples/plugin/fisheye/index.en.md diff --git a/packages/site/examples/tool/fisheye/index.zh.md b/packages/site/examples/plugin/fisheye/index.zh.md similarity index 100% rename from packages/site/examples/tool/fisheye/index.zh.md rename to packages/site/examples/plugin/fisheye/index.zh.md diff --git a/packages/site/examples/tool/grid/demo/default.ts b/packages/site/examples/plugin/grid/demo/default.ts similarity index 100% rename from packages/site/examples/tool/grid/demo/default.ts rename to packages/site/examples/plugin/grid/demo/default.ts diff --git a/packages/site/examples/tool/grid/demo/meta.json b/packages/site/examples/plugin/grid/demo/meta.json similarity index 100% rename from packages/site/examples/tool/grid/demo/meta.json rename to packages/site/examples/plugin/grid/demo/meta.json diff --git a/packages/site/examples/tool/grid/index.en.md b/packages/site/examples/plugin/grid/index.en.md similarity index 100% rename from packages/site/examples/tool/grid/index.en.md rename to packages/site/examples/plugin/grid/index.en.md diff --git a/packages/site/examples/tool/grid/index.zh.md b/packages/site/examples/plugin/grid/index.zh.md similarity index 100% rename from packages/site/examples/tool/grid/index.zh.md rename to packages/site/examples/plugin/grid/index.zh.md diff --git a/packages/site/examples/tool/history/demo/default.ts b/packages/site/examples/plugin/history/demo/default.ts similarity index 100% rename from packages/site/examples/tool/history/demo/default.ts rename to packages/site/examples/plugin/history/demo/default.ts diff --git a/packages/site/examples/tool/history/demo/meta.json b/packages/site/examples/plugin/history/demo/meta.json similarity index 100% rename from packages/site/examples/tool/history/demo/meta.json rename to packages/site/examples/plugin/history/demo/meta.json diff --git a/packages/site/examples/tool/history/index.en.md b/packages/site/examples/plugin/history/index.en.md similarity index 100% rename from packages/site/examples/tool/history/index.en.md rename to packages/site/examples/plugin/history/index.en.md diff --git a/packages/site/examples/tool/history/index.zh.md b/packages/site/examples/plugin/history/index.zh.md similarity index 100% rename from packages/site/examples/tool/history/index.zh.md rename to packages/site/examples/plugin/history/index.zh.md diff --git a/packages/site/examples/tool/hull/API.en.md b/packages/site/examples/plugin/hull/API.en.md similarity index 100% rename from packages/site/examples/tool/hull/API.en.md rename to packages/site/examples/plugin/hull/API.en.md diff --git a/packages/site/examples/tool/hull/API.zh.md b/packages/site/examples/plugin/hull/API.zh.md similarity index 100% rename from packages/site/examples/tool/hull/API.zh.md rename to packages/site/examples/plugin/hull/API.zh.md diff --git a/packages/site/examples/tool/hull/demo/changeMembers.ts b/packages/site/examples/plugin/hull/demo/changeMembers.ts similarity index 100% rename from packages/site/examples/tool/hull/demo/changeMembers.ts rename to packages/site/examples/plugin/hull/demo/changeMembers.ts diff --git a/packages/site/examples/tool/hull/demo/hull.ts b/packages/site/examples/plugin/hull/demo/hull.ts similarity index 100% rename from packages/site/examples/tool/hull/demo/hull.ts rename to packages/site/examples/plugin/hull/demo/hull.ts diff --git a/packages/site/examples/tool/hull/demo/meta.json b/packages/site/examples/plugin/hull/demo/meta.json similarity index 100% rename from packages/site/examples/tool/hull/demo/meta.json rename to packages/site/examples/plugin/hull/demo/meta.json diff --git a/packages/site/examples/tool/hull/index.en.md b/packages/site/examples/plugin/hull/index.en.md similarity index 100% rename from packages/site/examples/tool/hull/index.en.md rename to packages/site/examples/plugin/hull/index.en.md diff --git a/packages/site/examples/tool/hull/index.zh.md b/packages/site/examples/plugin/hull/index.zh.md similarity index 100% rename from packages/site/examples/tool/hull/index.zh.md rename to packages/site/examples/plugin/hull/index.zh.md diff --git a/packages/site/examples/tool/legend/API.en.md b/packages/site/examples/plugin/legend/API.en.md similarity index 100% rename from packages/site/examples/tool/legend/API.en.md rename to packages/site/examples/plugin/legend/API.en.md diff --git a/packages/site/examples/tool/legend/API.zh.md b/packages/site/examples/plugin/legend/API.zh.md similarity index 100% rename from packages/site/examples/tool/legend/API.zh.md rename to packages/site/examples/plugin/legend/API.zh.md diff --git a/packages/site/examples/tool/legend/demo/legend-click.ts b/packages/site/examples/plugin/legend/demo/legend-click.ts similarity index 100% rename from packages/site/examples/tool/legend/demo/legend-click.ts rename to packages/site/examples/plugin/legend/demo/legend-click.ts diff --git a/packages/site/examples/tool/legend/demo/legend.ts b/packages/site/examples/plugin/legend/demo/legend.ts similarity index 100% rename from packages/site/examples/tool/legend/demo/legend.ts rename to packages/site/examples/plugin/legend/demo/legend.ts diff --git a/packages/site/examples/tool/legend/demo/meta.json b/packages/site/examples/plugin/legend/demo/meta.json similarity index 100% rename from packages/site/examples/tool/legend/demo/meta.json rename to packages/site/examples/plugin/legend/demo/meta.json diff --git a/packages/site/examples/tool/legend/demo/style.ts b/packages/site/examples/plugin/legend/demo/style.ts similarity index 100% rename from packages/site/examples/tool/legend/demo/style.ts rename to packages/site/examples/plugin/legend/demo/style.ts diff --git a/packages/site/examples/tool/legend/index.en.md b/packages/site/examples/plugin/legend/index.en.md similarity index 100% rename from packages/site/examples/tool/legend/index.en.md rename to packages/site/examples/plugin/legend/index.en.md diff --git a/packages/site/examples/tool/legend/index.zh.md b/packages/site/examples/plugin/legend/index.zh.md similarity index 100% rename from packages/site/examples/tool/legend/index.zh.md rename to packages/site/examples/plugin/legend/index.zh.md diff --git a/packages/site/examples/tool/minimap/API.en.md b/packages/site/examples/plugin/minimap/API.en.md similarity index 100% rename from packages/site/examples/tool/minimap/API.en.md rename to packages/site/examples/plugin/minimap/API.en.md diff --git a/packages/site/examples/tool/minimap/API.zh.md b/packages/site/examples/plugin/minimap/API.zh.md similarity index 100% rename from packages/site/examples/tool/minimap/API.zh.md rename to packages/site/examples/plugin/minimap/API.zh.md diff --git a/packages/site/examples/tool/minimap/demo/meta.json b/packages/site/examples/plugin/minimap/demo/meta.json similarity index 100% rename from packages/site/examples/tool/minimap/demo/meta.json rename to packages/site/examples/plugin/minimap/demo/meta.json diff --git a/packages/site/examples/tool/minimap/demo/minimap-api.ts b/packages/site/examples/plugin/minimap/demo/minimap-api.ts similarity index 100% rename from packages/site/examples/tool/minimap/demo/minimap-api.ts rename to packages/site/examples/plugin/minimap/demo/minimap-api.ts diff --git a/packages/site/examples/tool/minimap/demo/minimap.ts b/packages/site/examples/plugin/minimap/demo/minimap.ts similarity index 100% rename from packages/site/examples/tool/minimap/demo/minimap.ts rename to packages/site/examples/plugin/minimap/demo/minimap.ts diff --git a/packages/site/examples/tool/minimap/index.en.md b/packages/site/examples/plugin/minimap/index.en.md similarity index 100% rename from packages/site/examples/tool/minimap/index.en.md rename to packages/site/examples/plugin/minimap/index.en.md diff --git a/packages/site/examples/tool/minimap/index.zh.md b/packages/site/examples/plugin/minimap/index.zh.md similarity index 100% rename from packages/site/examples/tool/minimap/index.zh.md rename to packages/site/examples/plugin/minimap/index.zh.md diff --git a/packages/site/examples/tool/overview/demo/default.ts b/packages/site/examples/plugin/overview/demo/default.ts similarity index 100% rename from packages/site/examples/tool/overview/demo/default.ts rename to packages/site/examples/plugin/overview/demo/default.ts diff --git a/packages/site/examples/tool/overview/demo/meta.json b/packages/site/examples/plugin/overview/demo/meta.json similarity index 100% rename from packages/site/examples/tool/overview/demo/meta.json rename to packages/site/examples/plugin/overview/demo/meta.json diff --git a/packages/site/examples/tool/overview/index.en.md b/packages/site/examples/plugin/overview/index.en.md similarity index 100% rename from packages/site/examples/tool/overview/index.en.md rename to packages/site/examples/plugin/overview/index.en.md diff --git a/packages/site/examples/tool/overview/index.zh.md b/packages/site/examples/plugin/overview/index.zh.md similarity index 100% rename from packages/site/examples/tool/overview/index.zh.md rename to packages/site/examples/plugin/overview/index.zh.md diff --git a/packages/site/examples/tool/snapline/demo/meta.json b/packages/site/examples/plugin/snapline/demo/meta.json similarity index 100% rename from packages/site/examples/tool/snapline/demo/meta.json rename to packages/site/examples/plugin/snapline/demo/meta.json diff --git a/packages/site/examples/tool/snapline/demo/snapline.ts b/packages/site/examples/plugin/snapline/demo/snapline.ts similarity index 100% rename from packages/site/examples/tool/snapline/demo/snapline.ts rename to packages/site/examples/plugin/snapline/demo/snapline.ts diff --git a/packages/site/examples/tool/snapline/index.en.md b/packages/site/examples/plugin/snapline/index.en.md similarity index 100% rename from packages/site/examples/tool/snapline/index.en.md rename to packages/site/examples/plugin/snapline/index.en.md diff --git a/packages/site/examples/tool/snapline/index.zh.md b/packages/site/examples/plugin/snapline/index.zh.md similarity index 100% rename from packages/site/examples/tool/snapline/index.zh.md rename to packages/site/examples/plugin/snapline/index.zh.md diff --git a/packages/site/examples/tool/timebar/API.en.md b/packages/site/examples/plugin/timebar/API.en.md similarity index 100% rename from packages/site/examples/tool/timebar/API.en.md rename to packages/site/examples/plugin/timebar/API.en.md diff --git a/packages/site/examples/tool/timebar/API.zh.md b/packages/site/examples/plugin/timebar/API.zh.md similarity index 100% rename from packages/site/examples/tool/timebar/API.zh.md rename to packages/site/examples/plugin/timebar/API.zh.md diff --git a/packages/site/examples/tool/timebar/demo/meta.json b/packages/site/examples/plugin/timebar/demo/meta.json similarity index 100% rename from packages/site/examples/tool/timebar/demo/meta.json rename to packages/site/examples/plugin/timebar/demo/meta.json diff --git a/packages/site/examples/tool/timebar/demo/timebar-chart.ts b/packages/site/examples/plugin/timebar/demo/timebar-chart.ts similarity index 100% rename from packages/site/examples/tool/timebar/demo/timebar-chart.ts rename to packages/site/examples/plugin/timebar/demo/timebar-chart.ts diff --git a/packages/site/examples/tool/timebar/demo/timebar-time.ts b/packages/site/examples/plugin/timebar/demo/timebar-time.ts similarity index 100% rename from packages/site/examples/tool/timebar/demo/timebar-time.ts rename to packages/site/examples/plugin/timebar/demo/timebar-time.ts diff --git a/packages/site/examples/tool/timebar/index.en.md b/packages/site/examples/plugin/timebar/index.en.md similarity index 100% rename from packages/site/examples/tool/timebar/index.en.md rename to packages/site/examples/plugin/timebar/index.en.md diff --git a/packages/site/examples/tool/timebar/index.zh.md b/packages/site/examples/plugin/timebar/index.zh.md similarity index 100% rename from packages/site/examples/tool/timebar/index.zh.md rename to packages/site/examples/plugin/timebar/index.zh.md diff --git a/packages/site/examples/tool/toolbar/API.en.md b/packages/site/examples/plugin/toolbar/API.en.md similarity index 100% rename from packages/site/examples/tool/toolbar/API.en.md rename to packages/site/examples/plugin/toolbar/API.en.md diff --git a/packages/site/examples/tool/toolbar/API.zh.md b/packages/site/examples/plugin/toolbar/API.zh.md similarity index 100% rename from packages/site/examples/tool/toolbar/API.zh.md rename to packages/site/examples/plugin/toolbar/API.zh.md diff --git a/packages/site/examples/tool/toolbar/demo/customized-toolbar.ts b/packages/site/examples/plugin/toolbar/demo/customized-toolbar.ts similarity index 100% rename from packages/site/examples/tool/toolbar/demo/customized-toolbar.ts rename to packages/site/examples/plugin/toolbar/demo/customized-toolbar.ts diff --git a/packages/site/examples/tool/toolbar/demo/meta.json b/packages/site/examples/plugin/toolbar/demo/meta.json similarity index 100% rename from packages/site/examples/tool/toolbar/demo/meta.json rename to packages/site/examples/plugin/toolbar/demo/meta.json diff --git a/packages/site/examples/tool/toolbar/demo/toolbar.ts b/packages/site/examples/plugin/toolbar/demo/toolbar.ts similarity index 100% rename from packages/site/examples/tool/toolbar/demo/toolbar.ts rename to packages/site/examples/plugin/toolbar/demo/toolbar.ts diff --git a/packages/site/examples/tool/toolbar/index.en.md b/packages/site/examples/plugin/toolbar/index.en.md similarity index 100% rename from packages/site/examples/tool/toolbar/index.en.md rename to packages/site/examples/plugin/toolbar/index.en.md diff --git a/packages/site/examples/tool/toolbar/index.zh.md b/packages/site/examples/plugin/toolbar/index.zh.md similarity index 100% rename from packages/site/examples/tool/toolbar/index.zh.md rename to packages/site/examples/plugin/toolbar/index.zh.md diff --git a/packages/site/examples/tool/tooltip/API.en.md b/packages/site/examples/plugin/tooltip/API.en.md similarity index 100% rename from packages/site/examples/tool/tooltip/API.en.md rename to packages/site/examples/plugin/tooltip/API.en.md diff --git a/packages/site/examples/tool/tooltip/API.zh.md b/packages/site/examples/plugin/tooltip/API.zh.md similarity index 100% rename from packages/site/examples/tool/tooltip/API.zh.md rename to packages/site/examples/plugin/tooltip/API.zh.md diff --git a/packages/site/examples/tool/tooltip/demo/meta.json b/packages/site/examples/plugin/tooltip/demo/meta.json similarity index 100% rename from packages/site/examples/tool/tooltip/demo/meta.json rename to packages/site/examples/plugin/tooltip/demo/meta.json diff --git a/packages/site/examples/tool/tooltip/demo/tooltipClick.ts b/packages/site/examples/plugin/tooltip/demo/tooltipClick.ts similarity index 100% rename from packages/site/examples/tool/tooltip/demo/tooltipClick.ts rename to packages/site/examples/plugin/tooltip/demo/tooltipClick.ts diff --git a/packages/site/examples/tool/tooltip/demo/tooltipPlugin.ts b/packages/site/examples/plugin/tooltip/demo/tooltipPlugin.ts similarity index 100% rename from packages/site/examples/tool/tooltip/demo/tooltipPlugin.ts rename to packages/site/examples/plugin/tooltip/demo/tooltipPlugin.ts diff --git a/packages/site/examples/tool/tooltip/index.en.md b/packages/site/examples/plugin/tooltip/index.en.md similarity index 100% rename from packages/site/examples/tool/tooltip/index.en.md rename to packages/site/examples/plugin/tooltip/index.en.md diff --git a/packages/site/examples/tool/tooltip/index.zh.md b/packages/site/examples/plugin/tooltip/index.zh.md similarity index 100% rename from packages/site/examples/tool/tooltip/index.zh.md rename to packages/site/examples/plugin/tooltip/index.zh.md diff --git a/packages/site/examples/tool/watermarker/demo/background.ts b/packages/site/examples/plugin/watermarker/demo/background.ts similarity index 100% rename from packages/site/examples/tool/watermarker/demo/background.ts rename to packages/site/examples/plugin/watermarker/demo/background.ts diff --git a/packages/site/examples/tool/watermarker/demo/imgWatermark.ts b/packages/site/examples/plugin/watermarker/demo/imgWatermark.ts similarity index 100% rename from packages/site/examples/tool/watermarker/demo/imgWatermark.ts rename to packages/site/examples/plugin/watermarker/demo/imgWatermark.ts diff --git a/packages/site/examples/tool/watermarker/demo/meta.json b/packages/site/examples/plugin/watermarker/demo/meta.json similarity index 100% rename from packages/site/examples/tool/watermarker/demo/meta.json rename to packages/site/examples/plugin/watermarker/demo/meta.json diff --git a/packages/site/examples/tool/watermarker/demo/textWatermark.ts b/packages/site/examples/plugin/watermarker/demo/textWatermark.ts similarity index 100% rename from packages/site/examples/tool/watermarker/demo/textWatermark.ts rename to packages/site/examples/plugin/watermarker/demo/textWatermark.ts diff --git a/packages/site/examples/tool/watermarker/index.en.md b/packages/site/examples/plugin/watermarker/index.en.md similarity index 100% rename from packages/site/examples/tool/watermarker/index.en.md rename to packages/site/examples/plugin/watermarker/index.en.md diff --git a/packages/site/examples/tool/watermarker/index.zh.md b/packages/site/examples/plugin/watermarker/index.zh.md similarity index 100% rename from packages/site/examples/tool/watermarker/index.zh.md rename to packages/site/examples/plugin/watermarker/index.zh.md diff --git a/packages/site/package.json b/packages/site/package.json index 65ea558ac98..8ca6240d365 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -25,6 +25,7 @@ "author": "https://github.com/orgs/antvis/people", "type": "module", "scripts": { + "add-doc": "node ./scripts/doc-template.js", "build": "npm run doc && dumi build", "deploy": "npm run build && gh-pages -d dist", "dev": "dumi dev", diff --git a/packages/site/scripts/doc-template.js b/packages/site/scripts/doc-template.js new file mode 100644 index 00000000000..187acfeb111 --- /dev/null +++ b/packages/site/scripts/doc-template.js @@ -0,0 +1,33 @@ +/** + * @description 在当前目录下创建中英文文档模板 + * @param {string} path - 文件路径，指定为 $PWD + * @param {string} title - 文件标题 + * @param {string} order - 文件排序[可选] + * @example npm run add-doc $PWD overview + */ +import chalk from 'chalk'; +import { existsSync, writeFileSync } from 'fs'; + +const [path, title, order] = process.argv.slice(2); + +if (!path || !title) { + console.log(chalk.bold(chalk.green('Example:')), chalk.greenBright('npm run add-doc $PWD overview')); +} else { + const zhPath = `${path}/${title}.zh.md`; + const enPath = `${path}/${title}.en.md`; + + const content = + '---\n' + + Object.entries({ title, order }) + .filter(([, v]) => !!v) + .map(([k, v]) => `${k}: ${v}`) + .join('\n') + + '\n---'; + + if (!existsSync(zhPath) && !existsSync(enPath)) { + writeFileSync(zhPath, content); + writeFileSync(enPath, content); + } else console.log(chalk.bold(chalk.red('Error:')), chalk.redBright('File already exists!')); + + console.log(chalk.bold(chalk.green('Success:')), chalk.greenBright('Create doc file successfully!')); +}