{"loaderData":{"67":{"en":{"data":{"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/triggertooltip.gif","title":"触发 ID","keywords":"","category":"examples","group":"react","link":"demo-spec/reactTooltip","option":""},"content":"---\ncategory: examples\ngroup: react\ntitle: Trigger ID\ncover:\nlink: demo-spec/reactTooltip\noption:\n---\n# Trigger ID\n\nShowing a tooltip when hovering a specific shape is a common requirement. VGraph supports this interaction through simple configuration.
Interaction: hover icon to show the node tooltip.\n\n## Code Demo\n\n```livedemo-files template=vgraph-react\n>>> app.tsx\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Graph, panZoom } from '@visactor/vgraph';\nimport { Tooltip } from '@visactor/react-vgraph-ui';\nimport '@arco-design/web-react/dist/css/arco.css';\n\nvar container = document.getElementById(CONTAINER_ID);\nvar width = container ? container.offsetWidth : 800;\nvar height = container ? container.offsetHeight : 600;\n\nfunction App() {\n var [data, setData] = useState(null);\n var [graph, setGraph] = useState(null);\n\n useEffect(function() {\n var url = 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-demo/job.json';\n fetch(url)\n .then(function(res) { return res.json(); })\n .then(function(d) { setData(d); });\n }, []);\n\n useEffect(function() {\n if (!data) return;\n var colors = {'Not Ready': '#7152E8', 'Waiting': '#EE8B24', 'Running': '#2367EA', 'Success': '#07A35A', 'Failed': '#D94147', 'Terminated': '#5470A5'};\n var icons = {'Not Ready': '', 'Waiting': '', 'Running': '', 'Success': '', 'Failed': '', 'Terminated': ''};\n var g = new Graph({container: CONTAINER_ID, width: width, height: height, minRatio: 0.3, maxRatio: 8, layout: {type: 'dag'}, setDefaultNode: function(node) {return {type: 'tag', width: 120, height: 40, color: colors[node.status], label: node.name, anchors: [[0.5, 0.0], [0.5, 1.0]], icon: {icon: icons[node.status], size: 25, background: {width: 40}, triggerId: 'triggerIcon'}};}, setDefaultEdge: function() {return {type: 'vLine', endArrow: {width: 3, height: 5}, strokeStyle: '#D1D5DA', appendSize: 2};}});\n g.addBehavior(panZoom);\n g.data(data);\n g.fitView();\n document.fonts.ready.then(function() { g.draw(); });\n setGraph(g);\n return function() { g.destroy(); };\n }, [data]);\n\n function getNodeContent(entity) {\n return entity.get('name') + ': ' + entity.get('status');\n }\n\n return (\n

\n \n

\n );\n}\n\nReactDOM.render(, document.getElementById(CONTAINER_ID));\n```\n"},"navDemoData":[{"path":"dataLineage","title":{"zh":"数据表血缘-表视图","en":"Table Lineage - Table View"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/data-lineage.gif","title":"数据表血缘-表视图","keywords":"","category":"examples","group":"solutions","link":"demo-spec/dataLineage","option":""},"data":{"fullPath":"solutions/dataLineage"}},{"path":"columnLineage","title":{"zh":"数据表血缘-列视图","en":"Table Lineage - Column View"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/column-lineage.gif","title":"数据表血缘-列视图","keywords":"","category":"examples","group":"solutions","link":"demo-spec/columnLineage","option":""},"data":{"fullPath":"solutions/columnLineage"}},{"path":"commonFlowEditor","title":{"zh":"有向图自由编辑","en":"Free DAG Editor"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor.gif","title":"有向图自由编辑","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditor","option":""},"data":{"fullPath":"editor/commonFlowEditor"}},{"path":"commonFlowEditorReact","title":{"zh":"有向图自由编辑-React 节点","en":"Free DAG Editor - React Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor_react.gif","title":"有向图自由编辑-React 节点","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditorReact","option":""},"data":{"fullPath":"editor/commonFlowEditorReact"}},{"path":"commonFlowEditorForm","title":{"zh":"有向图自由编辑-React 表单","en":"Free DAG Editor - React Form"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor_form.gif","title":"有向图自由编辑-React 表单","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditorForm","option":""},"data":{"fullPath":"editor/commonFlowEditorForm"}},{"path":"commonFlowEditorAddNode","title":{"zh":"有向图自由编辑-快速添加节点","en":"Free DAG Editor - Quick Add Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor_add_node.gif","title":"有向图自由编辑-快速添加节点","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditorAddNode","option":""},"data":{"fullPath":"editor/commonFlowEditorAddNode"}},{"path":"commonFlowEditorGroup","title":{"zh":"有向图自由编辑-分组","en":"Free DAG Editor - Group"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_group.gif","title":"有向图自由编辑-分组","keywords":"","category":"examples","group":"editor","link":"editor-solution-spec/commonFlowEditor","option":""},"data":{"fullPath":"editor/commonFlowEditorGroup"}},{"path":"commonFlowEditorLimitGroup","title":{"zh":"有向图自由编辑-限制分组移动","en":"Free DAG Editor - Limit Group Move"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor_group_limit.gif","title":"有向图自由编辑-限制分组移动","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditorLimitGroup","option":""},"data":{"fullPath":"editor/commonFlowEditorLimitGroup"}},{"path":"commonFlowEditorEdges","title":{"zh":"有向图自由编辑-重复连线","en":"Free DAG Editor - Duplicate Edges"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/common_flow_editor_group_edges.gif","title":"有向图自由编辑-重复连线","keywords":"","category":"examples","group":"editor","link":"editor/commonFlowEditorEdges","option":""},"data":{"fullPath":"editor/commonFlowEditorEdges"}},{"path":"dagFlowEditor","title":{"zh":"流水线编辑","en":"Pipeline Editor"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dag_flow_editor.gif","title":"流水线编辑","keywords":"","category":"examples","group":"editor","link":"editor/dagFlowEditor","option":""},"data":{"fullPath":"editor/dagFlowEditor"}},{"path":"dagFlowEditorReact","title":{"zh":"流水线编辑-React 节点","en":"Pipeline Editor - React Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dag_flow_editor_react.gif","title":"流水线编辑-React 节点","keywords":"","category":"examples","group":"editor","link":"editor/dagFlowEditorReact","option":""},"data":{"fullPath":"editor/dagFlowEditorReact"}},{"path":"dagFlowEditorBatch","title":{"zh":"流水线编辑-批量添加节点","en":"Pipeline Editor - Batch Add Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dag_flow_editor_batch.gif","title":"流水线编辑-批量添加节点","keywords":"","category":"examples","group":"editor","link":"editor/dagFlowEditorBatch","option":""},"data":{"fullPath":"editor/dagFlowEditorBatch"}},{"path":"dagTreeEditor","title":{"zh":"树图编辑-React 节点","en":"Tree Editor - React Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/tree_editor.gif","title":"树图编辑-React 节点","keywords":"","category":"examples","group":"editor","link":"editor/dagTreeEditor","option":""},"data":{"fullPath":"editor/dagTreeEditor"}},{"path":"dagMindmapEditor","title":{"zh":"思维导图编辑","en":"Mindmap Editor"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dagMindmapEditor.gif","title":"思维导图编辑","keywords":"","category":"examples","group":"editor","link":"editor/dagMindmapEditor","option":""},"data":{"fullPath":"editor/dagMindmapEditor"}},{"path":"reactNode","title":{"zh":"React 节点","en":"React Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_node.gif","title":"React 节点","keywords":"","category":"examples","group":"reactNodes","link":"react-node-spec/react-viewer","option":""},"data":{"fullPath":"reactNodes/reactNode"}},{"path":"reactGroupTitle","title":{"zh":"React 分组标题","en":"React Group Title"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_group_title.gif","title":"React 分组标题","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/reactGroupTitle","option":""},"data":{"fullPath":"reactNodes/reactGroupTitle"}},{"path":"reactGraph","title":{"zh":"React 展开节点","en":"React Expand Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_graph.gif","title":"React 展开节点","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/reactGraph","option":""},"data":{"fullPath":"reactNodes/reactGraph"}},{"path":"reactTreeGraph","title":{"zh":"React 展开树图节点","en":"React Tree Graph Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_treegraph.gif","title":"React 展开树图节点","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/reactTreeGraph","option":""},"data":{"fullPath":"reactNodes/reactTreeGraph"}},{"path":"reactScroll","title":{"zh":"React 节点内滚动","en":"React Node Scroll"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_scroll.gif","title":"React 节点内滚动","keywords":"","category":"examples","group":"reactNodes","link":"react-node-spec/react-viewer","option":""},"data":{"fullPath":"reactNodes/reactScroll"}},{"path":"useZoomRatio","title":{"zh":"hooks-useZoomRatio","en":"hooks-useZoomRatio"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/useZoomRatio.gif","title":"hooks-useZoomRatio","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/useZoomRatio","option":""},"data":{"fullPath":"reactNodes/useZoomRatio"}},{"path":"useSelections","title":{"zh":"hooks-useSelections","en":"hooks-useSelections"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/useZoomRatio.gif","title":"hooks-useSelections","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/useSelections","option":""},"data":{"fullPath":"reactNodes/useSelections"}},{"path":"reactNodeExport","title":{"zh":"React 节点大量导出","en":"React Node Bulk Export"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/react_node.gif","title":"React 节点大量导出","keywords":"","category":"examples","group":"reactNodes","link":"reactNodes/reactNodeExport","option":""},"data":{"fullPath":"reactNodes/reactNodeExport"}},{"path":"fundFlow","title":{"zh":"基础有向图","en":"Basic DAG"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/fundflow.png","title":"基础有向图","keywords":"","category":"examples","group":"dag","link":"dag/fundFlow","option":""},"data":{"fullPath":"dag/fundFlow"}},{"path":"dataAnalysis","title":{"zh":"简易泳道图-垂直","en":"Simple Swimlane - Vertical"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/swim_lane.gif","title":"简易泳道图-垂直","keywords":"","category":"examples","group":"dag","link":"dag/dataAnalysis","option":""},"data":{"fullPath":"dag/dataAnalysis"}},{"path":"dataAnalysisH","title":{"zh":"简易泳道图-水平","en":"Simple Swimlane - Horizontal"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/swim_lane_h.png","title":"简易泳道图-水平","keywords":"","category":"examples","group":"dag","link":"dag/dataAnalysisH","option":""},"data":{"fullPath":"dag/dataAnalysisH"}},{"path":"rankFixed","title":{"zh":"有向图灵活定制层级","en":"DAG Custom Rank"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/rankfixed_dag.png","title":"有向图灵活定制层级","keywords":"","category":"examples","group":"dag","link":"dag/rankFixed","option":""},"data":{"fullPath":"dag/rankFixed"}},{"path":"acyclicDag","title":{"zh":"有向无环图收起展开","en":"Acyclic DAG Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/acyclic_dag.gif","title":"有向无环图收起展开","keywords":"","category":"examples","group":"dag","link":"dag/acyclicDag","option":""},"data":{"fullPath":"dag/acyclicDag"}},{"path":"cycleDag","title":{"zh":"有环有向图收起展开","en":"Cycle DAG Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/cycle_dag.gif","title":"有环有向图收起展开","keywords":"","category":"examples","group":"dag","link":"dag/cycleDag","option":""},"data":{"fullPath":"dag/cycleDag"}},{"path":"nested","title":{"zh":"嵌套布局","en":"Nested Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/nested.png","title":"嵌套布局","keywords":"","category":"examples","group":"dag","link":"dag/nested","option":""},"data":{"fullPath":"dag/nested"}},{"path":"nestedExpand","title":{"zh":"嵌套布局-全量数据展开收起","en":"Nested Layout - Full Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/nested_expand.gif","title":"嵌套布局-全量数据展开收起","keywords":"","category":"examples","group":"dag","link":"dag/nestedExpand","option":""},"data":{"fullPath":"dag/nestedExpand"}},{"path":"nestedAsyncExpand","title":{"zh":"嵌套布局-异步展开收起","en":"Nested Layout - Async Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/nested_async_expand.gif","title":"嵌套布局-异步展开收起","keywords":"","category":"examples","group":"dag","link":"dag/nestedAsyncExpand","option":""},"data":{"fullPath":"dag/nestedAsyncExpand"}},{"path":"multiNested","title":{"zh":"嵌套布局-多层嵌套","en":"Nested Layout - Multi-level"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/multinested_dag.png","title":"嵌套布局-多层嵌套","keywords":"","category":"examples","group":"dag","link":"dag/multiNested","option":""},"data":{"fullPath":"dag/multiNested"}},{"path":"multiNestedCollapse","title":{"zh":"嵌套布局-多层嵌套-默认收起","en":"Nested Layout - Multi-level Collapsed"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/multinested_dag.png","title":"嵌套布局-多层嵌套-默认收起","keywords":"","category":"examples","group":"dag","link":"dag/multiNestedCollapse","option":""},"data":{"fullPath":"dag/multiNestedCollapse"}},{"path":"columnView","title":{"zh":"表字段关系","en":"Column View"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/column_view.png","title":"表字段关系","keywords":"","category":"examples","group":"dag","link":"dag/columnView","option":""},"data":{"fullPath":"dag/columnView"}},{"path":"force","title":{"zh":"基础力导向图","en":"Basic Force Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/force_basic.png","title":"基础力导向图","keywords":"","category":"examples","group":"force","link":"force-spec/force","option":""},"data":{"fullPath":"force/force"}},{"path":"keptPosition","title":{"zh":"展开收起保留原有结构","en":"Expand/Collapse Keep Structure"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/keptPosition.gif","title":"展开收起保留原有结构","keywords":"","category":"examples","group":"force","link":"force-spec/keptPosition","option":""},"data":{"fullPath":"force/keptPosition"}},{"path":"cluster","title":{"zh":"聚簇图布局","en":"Cluster Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/force_cluster.png","title":"聚簇图布局","keywords":"","category":"examples","group":"force","link":"force-spec/cluster","option":""},"data":{"fullPath":"force/cluster"}},{"path":"forceGrouping","title":{"zh":"力导向节点分组布局","en":"Force Grouping Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/forceGroupingDemo.gif","title":"力导向节点分组布局","keywords":"","category":"examples","group":"force","link":"force-spec/forceGrouping","option":""},"data":{"fullPath":"force/forceGrouping"}},{"path":"keptBbox","title":{"zh":"限制节点在视觉窗口内","en":"Keep Nodes in Viewport"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/graphs_force_keptBbox.png","title":"限制节点在视觉窗口内","keywords":"","category":"examples","group":"force","link":"force-spec/keptBbox","option":""},"data":{"fullPath":"force/keptBbox"}},{"path":"labelCollide","title":{"zh":"带标签的无重叠布局","en":"Label Collide Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/labelCollide.png","title":"带标签无重叠力导向布局","keywords":"","category":"examples","group":"force","link":"force-spec/labelCollide","option":""},"data":{"fullPath":"force/labelCollide"}},{"path":"collide","title":{"zh":"基础无重叠","en":"Basic Collide"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/collide.png","title":"基础的圆形无重叠","keywords":"","category":"examples","group":"force","link":"force-spec/collide","option":""},"data":{"fullPath":"force/collide"}},{"path":"radialByForce","title":{"zh":"环状布局","en":"Radial Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/graphs_force_radial.png","title":"环状布局","keywords":"","category":"examples","group":"force","link":"force-spec/radialByForce","option":""},"data":{"fullPath":"force/radialByForce"}},{"path":"ego","title":{"zh":"自我中心网络环状布局","en":"Ego Radial Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/graphs_force_ego.png","title":"自我中心网络环状布局","keywords":"","category":"examples","group":"force","link":"force-spec/ego","option":""},"data":{"fullPath":"force/ego"}},{"path":"autoForce","title":{"zh":"自动配置力导向图","en":"Auto Force"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/force_basic.png","title":"自动配置力导向图","keywords":"","category":"examples","group":"force","link":"force-spec/force","option":""},"data":{"fullPath":"force/autoForce"}},{"path":"fisheye","title":{"zh":"鱼眼放大镜","en":"Fisheye"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/fisheye.gif","title":"鱼眼放大镜","keywords":"","category":"examples","group":"force","link":"force-spec/fisheye","option":""},"data":{"fullPath":"force/fisheye"}},{"path":"basic","title":{"zh":"社交关系","en":"Social Network"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/force_demo.gif","title":"社交关系","keywords":"","category":"examples","group":"force","link":"demo-spec/forceBasic","option":""},"data":{"fullPath":"force/basic"}},{"path":"redMansions","title":{"zh":"知识图谱","en":"Knowledge Graph"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/red.gif","title":"知识图谱","keywords":"","category":"examples","group":"force","link":"demo-spec/redMansions","option":""},"data":{"fullPath":"force/redMansions"}},{"path":"compactBox","title":{"zh":"紧凑树","en":"Compact Box"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/compactbox.png","title":"基础紧凑树示例","keywords":"","category":"examples","group":"tree","link":"tree-graph-spec/options","option":""},"data":{"fullPath":"tree/compactBox"}},{"path":"dendrogram","title":{"zh":"平衡树","en":"Dendrogram"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dendriogram.png","title":"基础平衡树示例","keywords":"","category":"examples","group":"tree","link":"tree-graph-spec/options","option":""},"data":{"fullPath":"tree/dendrogram"}},{"path":"indented","title":{"zh":"缩进树","en":"Indented Tree"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/indented.png","title":"基础缩进树示例","keywords":"","category":"examples","group":"tree","link":"tree-graph-spec/options","option":""},"data":{"fullPath":"tree/indented"}},{"path":"mindMap","title":{"zh":"脑图","en":"Mind Map"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/graphs_tree_mindMap.png","title":"基础脑图示例","keywords":"","category":"examples","group":"tree","link":"demo-spec/treeBasic","option":""},"data":{"fullPath":"tree/mindMap"}},{"path":"basic","title":{"zh":"径向树图","en":"Radial Tree"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/radial.gif","title":"径向树图","keywords":"","category":"examples","group":"tree","link":"demo-spec/treeBasic","option":""},"data":{"fullPath":"tree/basic"}},{"path":"adjustMindMap","title":{"zh":"节点自适应脑图","en":"Adjustable Mind Map"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/adjust_mind_map.png","title":"节点自适应脑图","keywords":"","category":"examples","group":"tree","link":"demo-spec/treeBasic","option":""},"data":{"fullPath":"tree/adjustMindMap"}},{"path":"expandTree","title":{"zh":"逐层展开树","en":"Expand Tree"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/expand_tree.gif","title":"逐层展开树","keywords":"","category":"examples","group":"tree","link":"demo-spec/treeBasic","option":""},"data":{"fullPath":"tree/expandTree"}},{"path":"indentForest","title":{"zh":"缩进森林","en":"Indent Forest"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/indent_forest.png","title":"缩进森林","keywords":"","category":"examples","group":"tree","link":"demo-spec/treeBasic","option":""},"data":{"fullPath":"tree/indentForest"}},{"path":"cap","title":{"zh":"思维导图","en":"Mindmap"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/cap.gif","title":"思维导图","keywords":"","category":"examples","group":"tree","link":"demo-spec/cap","option":""},"data":{"fullPath":"tree/cap"}},{"path":"area","title":{"zh":"行政区划","en":"Administrative Region"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/area.gif","title":"行政区划","keywords":"","category":"examples","group":"tree","link":"demo-spec/area","option":""},"data":{"fullPath":"tree/area"}},{"path":"grid","title":{"zh":"网状布局","en":"Grid Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/grid.jpeg","title":"网状布局","keywords":"","category":"examples","group":"custom","link":"force-spec/concentricCircles","option":""},"data":{"fullPath":"custom/grid"}},{"path":"zigzag","title":{"zh":"回环布局","en":"Zigzag Layout"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/zigzag.jpeg","title":"回环布局","keywords":"","category":"examples","group":"custom","link":"force-spec/concentricCircles","option":""},"data":{"fullPath":"custom/zigzag"}},{"path":"concentricCircles","title":{"zh":"同心圆布局","en":"Concentric Circles"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/graphs_force_concentricCircles.png","title":"同心圆布局","keywords":"","category":"examples","group":"custom","link":"force-spec/concentricCircles","option":""},"data":{"fullPath":"custom/concentricCircles"}},{"path":"defaultNode","title":{"zh":"内置节点","en":"Default Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/inset_nodes.png","title":"内置节点","keywords":"","category":"examples","group":"nodes","link":"node-spec/prebuilt","option":""},"data":{"fullPath":"nodes/defaultNode"}},{"path":"nodeIcon","title":{"zh":"节点图标","en":"Node Icon"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/node_icons.gif","title":"节点图标","keywords":"","category":"examples","group":"nodes","link":"node-spec/prebuilt","option":""},"data":{"fullPath":"nodes/nodeIcon"}},{"path":"colorIcon","title":{"zh":"支持彩色图标","en":"Color Icon"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/color_icons.png","title":"支持彩色图标","keywords":"","category":"examples","group":"nodes","link":"node-spec/prebuilt","option":""},"data":{"fullPath":"nodes/colorIcon"}},{"path":"customNode","title":{"zh":"自定义节点","en":"Custom Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_node1.png","title":"自定义节点","keywords":"","category":"examples","group":"nodes","link":"node-spec/customization","option":""},"data":{"fullPath":"nodes/customNode"}},{"path":"customTagNode","title":{"zh":"带标签的节点","en":"Tag Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/tag_node.png","title":"带标签的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/tag","option":""},"data":{"fullPath":"nodes/customTagNode"}},{"path":"customAddTagNode","title":{"zh":"可添加标签的节点","en":"Add Tag Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/add_tag.gif","title":"可添加标签的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/tag","option":""},"data":{"fullPath":"nodes/customAddTagNode"}},{"path":"customDeleteTagNode","title":{"zh":"可删除标签的节点","en":"Delete Tag Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/del_tag.gif","title":"可删除标签的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/tag","option":""},"data":{"fullPath":"nodes/customDeleteTagNode"}},{"path":"linkNode","title":{"zh":"带链接的节点","en":"Link Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/link_node.gif","title":"带链接的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/link","option":""},"data":{"fullPath":"nodes/linkNode"}},{"path":"noteNode","title":{"zh":"带角标的节点","en":"Note Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/marker_node.gif","title":"带角标的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/note","option":""},"data":{"fullPath":"nodes/noteNode"}},{"path":"progreessNode","title":{"zh":"带进度条的节点","en":"Progress Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/progress_node.gif","title":"带进度条的节点","keywords":"","category":"examples","group":"nodes","link":"node-addon-spec/progress","option":""},"data":{"fullPath":"nodes/progreessNode"}},{"path":"defaultEdge","title":{"zh":"内置连线","en":"Default Edge"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/inset_edges.png","title":"内置连线 Edge","keywords":"","category":"examples","group":"edges","link":"edge-spec/prebuilt","option":""},"data":{"fullPath":"edges/defaultEdge"}},{"path":"customEdge1","title":{"zh":"自定义连线","en":"Custom Edge 1"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_edge1.gif","title":"自定义连线","keywords":"","category":"examples","group":"edges","link":"edge-spec/customization","option":""},"data":{"fullPath":"edges/customEdge1"}},{"path":"customEdge2","title":{"zh":"自定义连线","en":"Custom Edge 2"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_edge2.gif","title":"自定义连线","keywords":"","category":"examples","group":"edges","link":"edge-spec/customization","option":""},"data":{"fullPath":"edges/customEdge2"}},{"path":"customEdge3","title":{"zh":"连线定位节点","en":"Edge Locate Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_edge3.gif","title":"连线定位节点","keywords":"","category":"examples","group":"edges","link":"edge-spec/customization","option":""},"data":{"fullPath":"edges/customEdge3"}},{"path":"defaultGroup","title":{"zh":"内置分组","en":"Default Group"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/default_group.gif","title":"内置分组 Group","keywords":"","category":"examples","group":"groups","link":"group-spec/options","option":""},"data":{"fullPath":"groups/defaultGroup"}},{"path":"customGroup","title":{"zh":"自定义分组标题","en":"Custom Group"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_group.gif","title":"自定义分组","keywords":"","category":"examples","group":"groups","link":"group-spec/options","option":""},"data":{"fullPath":"groups/customGroup"}},{"path":"linkGroupOnCollapse","title":{"zh":"分组收起代理连线","en":"Link Group on Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/link_group_on_collapse.gif","title":"分组收起时连接","keywords":"","category":"examples","group":"groups","link":"group-spec/options","option":""},"data":{"fullPath":"groups/linkGroupOnCollapse"}},{"path":"tooltip","title":{"zh":"文字气泡","en":"Tooltip"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/tooltip.gif","title":"工具提示","keywords":"","category":"examples","group":"react","link":"demo-spec/reactTooltip","option":""},"data":{"fullPath":"react/tooltip"}},{"path":"triggerid","title":{"zh":"局部图形的文字气泡","en":"Trigger ID Tooltip"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/triggertooltip.gif","title":"触发 ID","keywords":"","category":"examples","group":"react","link":"demo-spec/reactTooltip","option":""},"data":{"fullPath":"react/triggerid"}},{"path":"trigger","title":{"zh":"触发器","en":"Trigger"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/triggermenu.gif","title":"触发器","keywords":"","category":"examples","group":"react","link":"demo-spec/reactTrigger","option":""},"data":{"fullPath":"react/trigger"}},{"path":"contextmenu","title":{"zh":"右键菜单","en":"Context Menu"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/contextmenu.gif","title":"右键菜单","keywords":"","category":"examples","group":"react","link":"demo-spec/reactContextmenu","option":""},"data":{"fullPath":"react/contextmenu"}},{"path":"zoomslider","title":{"zh":"缩放 UI 联动","en":"Zoom Slider"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/slider.gif","title":"缩放 UI 联动","keywords":"","category":"examples","group":"react","link":"behaviors","option":""},"data":{"fullPath":"react/zoomslider"}},{"path":"triggerTooltip","title":{"zh":"封装 Tooltip","en":"Wrapped Tooltip"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/tooltip.gif","title":"工具提示","keywords":"","category":"examples","group":"react","link":"node-addon-spec/trigger","option":""},"data":{"fullPath":"react/triggerTooltip"}},{"path":"rawtooltip","title":{"zh":"文字气泡","en":"Raw Tooltip"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/raw_tooltip.gif","title":"文字气泡","keywords":"","category":"examples","group":"plugins","link":"plugins/rawtooltip","option":""},"data":{"fullPath":"plugins/rawtooltip"}},{"path":"rawtriggerid","title":{"zh":"局部图形的文字气泡","en":"Raw Trigger ID Tooltip"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/raw_trigger.gif","title":"局部图形的文字气泡","keywords":"","category":"examples","group":"plugins","link":"plugins/rawtriggerid","option":""},"data":{"fullPath":"plugins/rawtriggerid"}},{"path":"minimap","title":{"zh":"小地图","en":"Minimap"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/minimap.gif","title":"小地图","keywords":"","category":"examples","group":"plugins","link":"plugins/minimap","option":""},"data":{"fullPath":"plugins/minimap"}},{"path":"responsiveLegend","title":{"zh":"响应式图例","en":"Responsive Legend"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/responsive_legend.gif","title":"响应式图例","keywords":"","category":"examples","group":"plugins","link":"plugins/responsiveLegend","option":""},"data":{"fullPath":"plugins/responsiveLegend"}},{"path":"customLegend","title":{"zh":"自定义图例","en":"Custom Legend"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/custom_legend.gif","title":"自定义图例","keywords":"","category":"examples","group":"plugins","link":"plugins/customLegend","option":""},"data":{"fullPath":"plugins/customLegend"}},{"path":"traffic","title":{"zh":"连续图例","en":"Continuous Legend"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/traffic_demo.gif","title":"连续图例","keywords":"","category":"examples","group":"plugins","link":"plugins/traffic","option":""},"data":{"fullPath":"plugins/traffic"}},{"path":"diffuse","title":{"zh":"节点扩散","en":"Node Diffuse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/diffuse.gif","title":"节点扩散","keywords":"","category":"examples","group":"animate","link":"animate/diffuse","option":""},"data":{"fullPath":"animate/diffuse"}},{"path":"loading","title":{"zh":"节点加载","en":"Node Loading"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/loading.gif","title":"节点加载","keywords":"","category":"examples","group":"animate","link":"animate/loading","option":""},"data":{"fullPath":"animate/loading"}},{"path":"flash","title":{"zh":"节点闪烁","en":"Node Flash"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/flash.gif","title":"节点闪烁","keywords":"","category":"examples","group":"animate","link":"animate/flash","option":""},"data":{"fullPath":"animate/flash"}},{"path":"flow","title":{"zh":"虚线连线","en":"Dashed Edge Flow"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/flow.gif","title":"虚线连线","keywords":"","category":"examples","group":"animate","link":"animate/flow","option":""},"data":{"fullPath":"animate/flow"}},{"path":"grow","title":{"zh":"连线延伸","en":"Edge Grow"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/grow.gif","title":"连线延伸","keywords":"","category":"examples","group":"animate","link":"animate/grow","option":""},"data":{"fullPath":"animate/grow"}},{"path":"trail","title":{"zh":"连线轨迹","en":"Edge Trail"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/trail.gif","title":"连线轨迹","keywords":"","category":"examples","group":"animate","link":"animate/trail","option":""},"data":{"fullPath":"animate/trail"}},{"path":"pan","title":{"zh":"限制移动范围","en":"Pan Limit"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/yonly.gif","title":"限制移动范围","keywords":"","category":"examples","group":"behaviors","link":"behaviors/pan","option":""},"data":{"fullPath":"behaviors/pan"}},{"path":"brushSelect","title":{"zh":"框选","en":"Brush Select"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/brush_select.gif","title":"框选","keywords":"","category":"examples","group":"behaviors","link":"behaviors/brushSelect","option":""},"data":{"fullPath":"behaviors/brushSelect"}},{"path":"showDetails","title":{"zh":"先看整体再看细节","en":"Show Details"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/show_details.gif","title":"先看整体再看细节","keywords":"","category":"examples","group":"behaviors","link":"behaviors/showDetails","option":""},"data":{"fullPath":"behaviors/showDetails"}},{"path":"hideDetails","title":{"zh":"先看细节再看整体","en":"Hide Details"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/hide_details.gif","title":"先看细节再看整体","keywords":"","category":"examples","group":"behaviors","link":"behaviors/hideDetails","option":""},"data":{"fullPath":"behaviors/hideDetails"}},{"path":"CompactBox","title":{"zh":"紧凑树收起展开","en":"Compact Tree Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dp_compactbox.gif","title":"紧凑树收起展开","keywords":"","category":"examples","group":"practiceCases","link":"practiceCases/CompactBox","option":""},"data":{"fullPath":"practiceCases/CompactBox"}},{"path":"Mindmap","title":{"zh":"脑图树收起展开","en":"Mindmap Expand/Collapse"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dp_mindmap.gif","title":"脑图树收起展开","keywords":"","category":"examples","group":"practiceCases","link":"practiceCases/Mindmap","option":""},"data":{"fullPath":"practiceCases/Mindmap"}},{"path":"EdgeLabel","title":{"zh":"超长连线文本标签","en":"Long Edge Label"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dp_edge_label.png","title":"超长连线文本标签","keywords":"","category":"examples","group":"practiceCases","link":"practiceCases/EdgeLabel","option":""},"data":{"fullPath":"practiceCases/EdgeLabel"}},{"path":"AddNode","title":{"zh":"添加树节点","en":"Add Tree Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dp_add_node.gif","title":"添加树节点","keywords":"","category":"examples","group":"practiceCases","link":"practiceCases/AddNode","option":""},"data":{"fullPath":"practiceCases/AddNode"}},{"path":"MoveNode","title":{"zh":"重组树节点","en":"Move Tree Node"},"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/dp_move_node.gif","title":"重组树节点","keywords":"","category":"examples","group":"practiceCases","link":"practiceCases/MoveNode","option":""},"data":{"fullPath":"practiceCases/MoveNode"}}]},"zh":{"data":{"meta":{"cover":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-exampleCovers/triggertooltip.gif","title":"触发 ID","keywords":"","category":"examples","group":"react","link":"demo-spec/reactTooltip","option":""},"content":"---\ncategory: examples\ngroup: react\ntitle: 触发 ID\ncover:\n link: demo-spec/reactTooltip\noption:\n---\n# 触发 ID\n\n在鼠标 hover 到指定图形上出 Tooltip 是一个常见的业务需求，VGraph 支持通过简单配置实现此交互。
交互操作：hover icon展示节点的 tooltip。\n\n## Code Demo\n\n```livedemo-files template=vgraph-react\n>>> app.tsx\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Graph, panZoom } from '@visactor/vgraph';\nimport { Tooltip } from '@visactor/react-vgraph-ui';\nimport '@arco-design/web-react/dist/css/arco.css';\n\nvar container = document.getElementById(CONTAINER_ID);\nvar width = container ? container.offsetWidth : 800;\nvar height = container ? container.offsetHeight : 600;\n\nfunction App() {\n var [data, setData] = useState(null);\n var [graph, setGraph] = useState(null);\n\n useEffect(function() {\n var url = 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VGraph/site-demo/job.json';\n fetch(url)\n .then(function(res) { return res.json(); })\n .then(function(d) { setData(d); });\n }, []);\n\n useEffect(function() {\n if (!data) return;\n var colors = {未就绪: '#7152E8', 等待执行: '#EE8B24', 执行中: '#2367EA', 成功: '#07A35A', 失败: '#D94147', 终止: '#5470A5'};\n var icons = {未就绪: '', 等待执行: '', 执行中: '', 成功: '', 失败: '', 终止: ''};\n var g = new Graph({container: CONTAINER_ID, width: width, height: height, minRatio: 0.3, maxRatio: 8, layout: {type: 'dag'}, setDefaultNode: function(node) {return {type: 'tag', width: 120, height: 40, color: colors[node.status], label: node.name, anchors: [[0.5, 0.0], [0.5, 1.0]], icon: {icon: icons[node.status], size: 25, background: {width: 40}, triggerId: 'triggerIcon'}};}, setDefaultEdge: function() {return {type: 'vLine', endArrow: {width: 3, height: 5}, strokeStyle: '#D1D5DA', appendSize: 2};}});\n g.addBehavior(panZoom);\n g.data(data);\n g.fitView();\n document.fonts.ready.then(function() { g.draw(); });\n setGraph(g);\n return function() { g.destroy(); };\n }, [data]);\n\n function getNodeContent(entity) {\n return entity.get('name') + ': ' + entity.get('status');\n }\n\n return (\n

\n \n