@antv/g6

Version:

graph visualization frame work

1 lines • 311 kB

JSON

{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-0-9-49-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/tree/dendrogram","result":{"data":{"site":{"siteMetadata":{"title":"G6","githubUrl":"git@github.com:antvis/g6.git","examples":[{"slug":"tree","icon":"tree","title":{"zh":"树图","en":"Tree Graph"}},{"slug":"net","icon":"net","title":{"zh":"一般图","en":"General Graph"}},{"slug":"graphql","icon":"graphql","title":{"zh":"其他表达形式","en":"Net Charts"}},{"slug":"shape","icon":"shape","title":{"zh":"元素","en":"Shape"}},{"slug":"interaction","icon":"interaction","title":{"zh":"交互","en":"Interaction"}},{"slug":"scatter","icon":"scatter","title":{"zh":"动画","en":"Animation"}},{"slug":"tool","icon":"tool","title":{"zh":"组件","en":"Component"}},{"slug":"case","icon":"case","title":{"zh":"复杂案例","en":"Case"}}],"playground":null},"pathPrefix":null},"allMarkdownRemark":{"edges":[{"node":{"html":"<p>G6 中内置的 Tooltip 组件。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>下面的代码演示展示了如何在图上使用 tooltip。如果需要定义 tooltip 的样式，需要定义类名为 <code class=\"language-text\">g6-tooltip</code> 的标签的 CSS 样式：</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.g6-tooltip {\n border: 1px solid #e2e2e2;\n border-radius: 4px;\n font-size: 12px;\n color: #545454;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 10px 8px;\n box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n }</code></pre></div>","fields":{"slug":"/zh/examples/tool/tooltip"},"frontmatter":{"title":"提示框","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tool/tooltip/index.zh.md"}}},{"node":{"html":"<p>Tooltip is a built-in components in G6.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The demo below show how to use tooltip on graph. Tooltip's style can be defined by the CSS with class name <code class=\"language-text\">g6-tooltip</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.g6-tooltip {\n border: 1px solid #e2e2e2;\n border-radius: 4px;\n font-size: 12px;\n color: #545454;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 10px 8px;\n box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n }</code></pre></div>","fields":{"slug":"/en/examples/tool/tooltip"},"frontmatter":{"title":"Tooltip","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tool/tooltip/index.en.md"}}},{"node":{"html":"<p>There are 8 kinds of built-in nodes in G6, which can be extended by configurations.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>8 built-in nodes and their extensions allow users to select appropriate ones for their scenario. For example, rect node is suitable for flow graph. Parameter <code class=\"language-text\">linkPoint</code> is the link points for related edges. </p>\n<p>Please refer to <a href=\"/zh/docs/manual/middle/elements/defaultNode\">Built-in Nodes in G6</a> for more information.</p>","fields":{"slug":"/en/examples/shape/basic"},"frontmatter":{"title":"Built-in Nodes","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/index.en.md"}}},{"node":{"html":"<p>G6 共内置了 8 种不同类型的节点，支持通过配置项进行扩展。</p>\n<h2 id=\"何时使用\"><a href=\"#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8\" aria-label=\"何时使用 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>何时使用</h2>\n<p>用户可根据具体的业务场景，选择合适的内置节点。如，矩形节点适合在流程图中使用。 <code class=\"language-text\">linkPoints</code> 用于配置相关边的连入位置。更多内容请参考 <a href=\"/zh/docs/manual/middle/elements/defaultNode\">G6 内置的节点</a>。</p>","fields":{"slug":"/zh/examples/shape/basic"},"frontmatter":{"title":"内置节点","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/index.zh.md"}}},{"node":{"html":"<p>通过自定义节点，可以实现节点的动画效果。</p>\n<h3 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h3>\n<p>下面代码演示了三种通过自定义边实现的边动画：</p>\n<ul>\n<li>节点上图形的动画；</li>\n<li>增加带有动画的背景图形；</li>\n<li>节点上部分图形的旋转动画。</li>\n</ul>\n<p>G6 中更多关于动画的内容，请参考<a href=\"/zh/docs/manual/advanced/animation-zh\">动画文档</a>。</p>","fields":{"slug":"/zh/examples/scatter/node"},"frontmatter":{"title":"节点动画","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.zh.md"}}},{"node":{"html":"<p>Node animation can be realized by customing a node.</p>\n<h3 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h3>\n<p>The three demos below show the node animation realized by customing node:</p>\n<ul>\n<li>Example 1 : Animated shape of a node;</li>\n<li>Example 2 : Animated background of a node;</li>\n<li>Example 3 : Shape rotate animation on the node.</li>\n</ul>\n<p>For more information, please refer to document <a href=\"/zh/docs/manual/advanced/animation-zh\">Animation</a>。</p>","fields":{"slug":"/en/examples/scatter/node"},"frontmatter":{"title":"Node Animation","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.en.md"}}},{"node":{"html":"<p>Highlighting a node and its neighbors when user hover it is a common requirement in graph analysis applications.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The demos below show two ways to satisfy the highlight requirement:</p>\n<ul>\n<li>Built-in behavior: activate-relations;</li>\n<li><code class=\"language-text\">graph.on</code> or <a href=\"zh/docs/manual/advanced/custom-behavior\">Custom Behavior</a>.</li>\n</ul>","fields":{"slug":"/en/examples/interaction/highlight"},"frontmatter":{"title":"Highlight Nodes","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/highlight/index.en.md"}}},{"node":{"html":"<p>在图分析应用中，鼠标 hover 到某个节点后，高亮其相邻的节点及边是一种非常常见的需求。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>该示例演示了 G6 内置的 activate-relations 和自定义实现高亮相邻节点的方式。另外，如果内置高亮关注点及其邻居的行为不能满足需求，用户也可以通过使用 <code class=\"language-text\">graph.on</code> 或<a href=\"zh/docs/manual/advanced/custom-behavior\">自定义 Behavior</a> 实现。</p>","fields":{"slug":"/zh/examples/interaction/highlight"},"frontmatter":{"title":"高亮相邻节点","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/highlight/index.zh.md"}}},{"node":{"html":"<p>Force-directed layout is a set of algorithms which are imporved and extended by lots of researchers based on the earliest classical force-directed algorithm. They simulate the nodes and edges in the graph as the physical objects. There are attractive forces and repulsive forces between nodes to iteratively move them to reach a reasonable layout.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>. </p>\n<ul>\n<li>Example 1 : Basic force-directed layout and dragging interactions.</li>\n<li>Example 2 : Prevent node overlappings.</li>\n<li>Example 3 : Adjust the link distances and forces for different nodes.</li>\n<li>Example 4 : Fix the dragged node.</li>\n<li>Example 5 : Translate the layout parameters in dynamic.</li>\n<li>Example 6 : The bubbles layout and interactions.</li>\n</ul>","fields":{"slug":"/en/examples/net/forceDirected"},"frontmatter":{"title":"Force-directed Layout","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/index.en.md"}}},{"node":{"html":"<p>力导向图布局作为较早被发明的一种实际应用布局算法，经过研究者多年改进、扩展，已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力，施加在节点上，并迭代计算以达到合理放置节点、美观布局的一类算法。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>G6 内置的经典力导向算法引用了 d3.js 的力导向算法。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。</p>\n<ul>\n<li>代码演示 1 ：基础的经典力导向布局及节点的拖拽。</li>\n<li>代码演示 2 ：节点不重叠。</li>\n<li>代码演示 3 ：为不同节点调整边长和力。</li>\n<li>代码演示 4 ：固定被拖拽的节点。</li>\n<li>代码演示 5 ：支持布局参数的动态切换。</li>\n<li>代码演示 6 ：使用力导向算法实现气泡效果及交互。</li>\n</ul>","fields":{"slug":"/zh/examples/net/forceDirected"},"frontmatter":{"title":"力导向图布局","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/index.zh.md"}}},{"node":{"html":"<p>从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z-ESRoHTpvIAAAAAAAAAAABkARQnAQ' alt='compactbox' width='300'/></p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>紧凑树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。</p>\n<p>其配置项中 Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。</p>","fields":{"slug":"/zh/examples/tree/compactBox"},"frontmatter":{"title":"紧凑树","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.zh.md"}}},{"node":{"html":"<p>The nodes with the same depth will be layed on the same level. The node size will be considred while doing layout.\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z-ESRoHTpvIAAAAAAAAAAABkARQnAQ' alt='compactbox' width='300'/></p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>CompactBox is an appropriate layout method for tree data structure. As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>.</p>\n<p>You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.</p>","fields":{"slug":"/en/examples/tree/compactBox"},"frontmatter":{"title":"CompactBox","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.en.md"}}},{"node":{"html":"<p>There are several built-in edges in G6, including line, polyline, bezier curve, arc, loop, and so on.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The demos below show the usage of <code class=\"language-text\">polyline</code>、<code class=\"language-text\">cubic</code>、<code class=\"language-text\">arc</code> and <code class=\"language-text\">loop</code>.</p>\n<p>Please refer to <a href=\"/zh/docs/manual/middle/elements/defaultEdge\">Built-in Edges in G6</a> for more information.</p>","fields":{"slug":"/en/examples/shape/defaultEdges"},"frontmatter":{"title":"Built-in Edges","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.en.md"}}},{"node":{"html":"<p>G6 共内置了多种不同类型的边，包括直线、折线、曲线、自环等。</p>\n<h2 id=\"何时使用\"><a href=\"#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8\" aria-label=\"何时使用 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>何时使用</h2>\n<p>以下代码演示了：<code class=\"language-text\">polyline</code>、<code class=\"language-text\">cubic</code>、<code class=\"language-text\">arc</code> 和 <code class=\"language-text\">loop</code> 四种内置边。</p>\n<p>更多信息参见<a href=\"/zh/docs/manual/middle/elements/defaultEdge\">G6 的内置边</a></p>","fields":{"slug":"/zh/examples/shape/defaultEdges"},"frontmatter":{"title":"内置边","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.zh.md"}}},{"node":{"html":"<p>API 信息。</p>\n<h3 id=\"api\"><a href=\"#api\" aria-label=\"api permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>API</h3>\n<h4 id=\"ann\"><a href=\"#ann\" aria-label=\"ann permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AnN</h4>\n<p>ddgg</p>","fields":{"slug":"/zh/examples/shape/basic/API"},"frontmatter":{"title":"API","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/API.zh.md"}}},{"node":{"html":"<p>Click the nodes on the tree graph to onload multiple data.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The following demos show two ways to load data:</p>\n<ul>\n<li><code class=\"language-text\">graph.refreshLayout</code>;</li>\n<li><code class=\"language-text\">graph.changeData</code>.</li>\n</ul>","fields":{"slug":"/en/examples/interaction/loadData"},"frontmatter":{"title":"Onload Multiple Data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/loadData/index.en.md"}}},{"node":{"html":"<p>点击树图中的节点，动态加载多条数据。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>共演示了两种动态添加数据的方式：</p>\n<ul>\n<li>使用 <code class=\"language-text\">graph.refreshLayout</code> ；</li>\n<li>使用 <code class=\"language-text\">graph.changeData</code>。</li>\n</ul>","fields":{"slug":"/zh/examples/interaction/loadData"},"frontmatter":{"title":"动态加载多条数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/loadData/index.zh.md"}}},{"node":{"html":"<p>使用 Fruchterman 布局实现交互式折叠/扩展聚类。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>尝试点击节点以折叠/扩展一个聚类。</p>","fields":{"slug":"/zh/examples/case/simplifyCluster"},"frontmatter":{"title":"聚类的折叠/扩展","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.zh.md"}}},{"node":{"html":"<p>This demo shows interactively collapse and expand clusters with Fruchterman layout.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>Try to click a node to collapse and expand the corresponding cluster.</p>","fields":{"slug":"/en/examples/case/simplifyCluster"},"frontmatter":{"title":"Collapse/Expand Cluster","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.en.md"}}},{"node":{"html":"<p>Dagre Layout is an appropriate layout method for directed flow graph. It will calculate the levels and positions of nodes automatically according to the edge directions in the data.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>. By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.</p>\n<ul>\n<li>Example 1 : Simple Dagre Layout.</li>\n<li>Example 2 : Dagre Layout from left to right.</li>\n<li>Example 3 : Translate the layout parameters in dynamic.</li>\n</ul>","fields":{"slug":"/en/examples/net/dagreFlow"},"frontmatter":{"title":"Dagre Layout","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/index.en.md"}}},{"node":{"html":"<p>Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向，自动计算节点的层级及位置。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>G6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。</p>\n<ul>\n<li>代码演示 1 ：简单的 Dagre 布局。</li>\n<li>代码演示 2 ：自左向右的 Dagre 布局。</li>\n<li>代码演示 3 ：Dagre 布局参数动态变化。</li>\n</ul>","fields":{"slug":"/zh/examples/net/dagreFlow"},"frontmatter":{"title":"Dagre 流程图布局","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/index.zh.md"}}},{"node":{"html":"<p>通过自定义边，可以实现边的动画效果。</p>\n<h3 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h3>\n<p>下面代码演示了三种通过自定义边实现的边动画：</p>\n<ul>\n<li>圆点在沿着线运动；</li>\n<li>虚线运动的效果；</li>\n<li>线从无到有的效果。</li>\n</ul>\n<p>G6 中更多关于动画的内容，请参考<a href=\"/zh/docs/manual/advanced/animation-zh\">动画文档</a>。</p>","fields":{"slug":"/zh/examples/scatter/edge"},"frontmatter":{"title":"边动画","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.zh.md"}}},{"node":{"html":"<p>Edge animation can be realized by customing an edge.</p>\n<h3 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h3>\n<p>The three demos below show the edge animation realized by customing edge:</p>\n<ul>\n<li>Example 1 : A dot runs alone the edge;</li>\n<li>Example 2 : A running dashed edge;</li>\n<li>Example 3 : A edge grow from source to target.</li>\n</ul>\n<p>For more information, please refer to document <a href=\"/zh/docs/manual/advanced/animation-zh\">Animation</a>。</p>","fields":{"slug":"/en/examples/scatter/edge"},"frontmatter":{"title":"Edge Animation","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.en.md"}}},{"node":{"html":"<p>The leaves will be aligned on the same level. This algorithm does not consider the node size, which means all the nodes will be regarded as unit size with 1px.\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zX7tSLqBvwcAAAAAAAAAAABkARQnAQ' alt='dendrogram' width='300'/></p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>Dendrogram is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>.</p>\n<p>You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.</p>","fields":{"slug":"/en/examples/tree/dendrogram"},"frontmatter":{"title":"Dendrogram","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.en.md"}}},{"node":{"html":"<p>不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zX7tSLqBvwcAAAAAAAAAAABkARQnAQ' alt='dendrogram' width='300'/></p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>生态树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。</p>","fields":{"slug":"/zh/examples/tree/dendrogram"},"frontmatter":{"title":"生态树","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.zh.md"}}},{"node":{"html":"<p>The custom node mechanism in G6 allows users to design their own node when there are no appropriate built-in nodes for their scenario. </p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>For more information, please refer to <a href=\"/zh/docs/manual/advanced/custom-node\">Custom Node</a>。</p>","fields":{"slug":"/en/examples/shape/customNode"},"frontmatter":{"title":"Custom Node","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.en.md"}}},{"node":{"html":"<p>当 G6 的内置节点不能满足需求时，G6 的自定义节点机制允许用户设计和定制新的边类型。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>更多信息参见<a href=\"/zh/docs/manual/advanced/custom-node\">自定义节点</a>。</p>","fields":{"slug":"/zh/examples/shape/customNode"},"frontmatter":{"title":"自定义节点","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.zh.md"}}},{"node":{"html":"<p>State of G6 includes interaction states and bussiness states.</p>\n<h3 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h3>\n<p>Animation is an important part of visualization. Users can realized complex animation by <code class=\"language-text\">onFrame</code>.\nThe Demo below shows how to realized edge animation with interaction by states.</p>\n<p>For more information, please refer to document <a href=\"/zh/docs/manual/advanced/animation-zh\">Animation</a>。</p>","fields":{"slug":"/en/examples/scatter/stateChange"},"frontmatter":{"title":"State Switch","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.en.md"}}},{"node":{"html":"<p>G6 中的 state，指的是状态，包括交互状态和业务状态两种。</p>\n<h3 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h3>\n<p>动画是可视化中非常重要的内容。对于一些复杂的动画效果，可以通过 <code class=\"language-text\">onFrame</code> 来实现。\n下面代码演示展示通过结合状态，实现在交互过程中，展示单条边或多条边的动画。</p>\n<p>G6 中更多关于动画的内容，请参考<a href=\"/zh/docs/manual/advanced/animation-zh\">动画文档</a>。</p>","fields":{"slug":"/zh/examples/scatter/stateChange"},"frontmatter":{"title":"状态切换","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.zh.md"}}},{"node":{"html":"<p>Update the label or background of items with interaction.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>In some scenario, labels and background need to be updated by interaction. The following demos show the implementation.</p>\n<p>For more information about properties of label, please refre to <a href=\"/zh/docs/api/properties/TextProperties\">Text API</a>。</p>","fields":{"slug":"/en/examples/interaction/label"},"frontmatter":{"title":"Label and Background Updating","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.en.md"}}},{"node":{"html":"<p>交互过程中动态改变节点或边上的文本。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>在有些业务场景中，需要通过交互来修改节点或边上的文本，也有可能会通过点击来切换节点的背景图片，对于这类需求，可以使用演示案例中的方式来实现。</p>\n<p>G6 中支持的所有文本属性可以参考 <a href=\"/zh/docs/api/properties/TextProperties\">API文档</a>。</p>","fields":{"slug":"/zh/examples/interaction/label"},"frontmatter":{"title":"改变标签或背景","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.zh.md"}}},{"node":{"html":"<p>Fruchterman Reingold Layout is a kind of force-directed layout in theory. The differences are the definitions of attracitve force and repulsive force.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>. By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on. </p>\n<ul>\n<li>Example 1 : Basic Fruchterman Layout.</li>\n<li>Example 2 : Fruchterman clustering layout.</li>\n<li>Example 3 : Translate the layout parameters in dynamic.</li>\n</ul>","fields":{"slug":"/en/examples/net/furchtermanLayout"},"frontmatter":{"title":"Fruchterman Layout","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/index.en.md"}}},{"node":{"html":"<p>Fruchterman Reingold 布局算法在原理上而言属于力导向布局算法。其引力与斥力的定义方式与经典的 Force Diected 力导向图布局有少许不同。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>G6 内置的 Fruchterman 布局可在实例化 Graph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。该布局可以通过配置调整迭代次数、紧凑程度、是否按照聚类布局等。</p>\n<ul>\n<li>代码演示 1 ：基本的 Fruchterman 布局。</li>\n<li>代码演示 2 ：Fruchterman 的聚类布局。</li>\n<li>代码演示 3 ：Fruchterman 布局参数动态变化。</li>\n</ul>","fields":{"slug":"/zh/examples/net/furchtermanLayout"},"frontmatter":{"title":"Fruchterman 图布局","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/index.zh.md"}}},{"node":{"html":"<p>The nodes with same depth will be placed on the same level. Difference from compactBox, Mindmap will not consider the node size.\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J1l5RofvbP0AAAAAAAAAAABkARQnAQ' alt='mindmap' width='250'/></p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>Mindmap is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>.</p>\n<p>You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.</p>","fields":{"slug":"/en/examples/tree/mindmap"},"frontmatter":{"title":"Mindmap","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/index.en.md"}}},{"node":{"html":"<p>深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。\n<br />\n<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J1l5RofvbP0AAAAAAAAAAABkARQnAQ' alt='mindmap' width='250'/></p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>脑图树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如<a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">子图布局</a>所示单独使用布局。</p>\n<p>该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。</p>\n<ul>\n<li><strong>direction</strong>:\nString 类型，树的布局方向。可选值有：'H'：根节点的子节点分成两部分横向放置在根节点左右两侧，如代码演示 1 | 'V'：将根节点的所有孩子纵向排列。</li>\n<li><strong>getWidth</strong>:\nNumber | Function 类型，每个节点的宽度。</li>\n<li><strong>getHeight</strong>:\nNumber | Function 类型，每个节点的高度。</li>\n<li><strong>getHGap</strong>:\nNumber | Function 类型，每个节点的水平间隙。</li>\n<li><strong>getVGap</strong>:\nNumber | Function 类型，每个节点的垂直间隙。</li>\n<li><strong>getSide</strong>:\nFunction 类型，节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。如代码演示 2、3、4。</li>\n</ul>","fields":{"slug":"/zh/examples/tree/mindmap"},"frontmatter":{"title":"脑图树","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/index.zh.md"}}},{"node":{"html":"<p>当 G6 的内置边不能满足需求时，G6 的自定义边机制允许用户设计和定制新的边类型。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用指南</h2>\n<p>下面代码演示了自定义折线 polyline 边。自定义边可以通过两种方式实现：</p>\n<ol>\n<li>继承 line，复写 <code class=\"language-text\">getPath</code> 和 <code class=\"language-text\">getShapeStyle</code> 方法；</li>\n<li>复写 <code class=\"language-text\">draw</code> 方法。</li>\n</ol>\n<p>拖动边的两个端点时，常常需要动态更新折线的控制点位置。建议使用 G6 内置的 <code class=\"language-text\">polyline</code> 满足这一需求。</p>\n<p>更多信息参见<a href=\"/zh/docs/manual/advanced/custom-edge\">自定义边</a>。</p>","fields":{"slug":"/zh/examples/shape/customEdge"},"frontmatter":{"title":"自定义边","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.zh.md"}}},{"node":{"html":"<p>The custom edge mechanism in G6 allows users to design their own edge when there are no appropriate built-in edges for their scenario. </p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>The demos below show how to custom polyline edge. There are two ways to custom an edge:</p>\n<ol>\n<li>Extend the line edge, rewrite <code class=\"language-text\">getPath</code> and <code class=\"language-text\">getShapeStyle</code>;</li>\n<li>Rewrite <code class=\"language-text\">draw</code>.</li>\n</ol>\n<p>Updating the control points of polyline while dragging the end nodes is an important problem of polyline edge. For this situation, we recommend users to use built-in <code class=\"language-text\">polyline</code> edge.</p>\n<p>For more information, please refer to the document <a href=\"/zh/docs/manual/advanced/custom-edge\">Custom Edge</a>.</p>","fields":{"slug":"/en/examples/shape/customEdge"},"frontmatter":{"title":"Custom Edge","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.en.md"}}},{"node":{"html":"<p>Radial Layout will place the nodes to the concentric circles around the <code class=\"language-text\">focusNode</code> according to the shortest path length to <code class=\"language-text\">focusNode</code>.</p>\n<h2 id=\"usage\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h2>\n<p>As the demo below, you can deploy it in <code class=\"language-text\">layout</code> while instantiating Graph. it can also be used for <a href=\"https://www.yuque.com/antv/g6/qopkkg#eYZc6\" target=\"_self\" rel=\"nofollow\">Subgraph Layout</a>. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the radial radius, preven node overlappings, relaxed radial, and so on.</p>\n<ul>\n<li>Example 1 : Basic Radial Layout.</li>\n<li>Example 2 : Prevent node overlappings according each node's size.</li>\n<li>Example 3 : Relaxed radial layout allows offsets between nodes on the same level to prevent node overlappings.</li>\n<li>Example 4 : By using the subgraph layout mechanism, we extend nodes by interaction. Try to click node 2.</li>\n<li>Example 5 : Translate the parameters of Radial Layout.</li>\n</ul>","fields":{"slug":"/en/examples/net/radialLayout"},"frontmatter":{"title":"Radial Layout","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/index.en.md"}}},{"node":{"html":"<p>Radial 辐射布局根据参数中指定的 focusNode 为中心点，根据其他节点与中心点的拓扑距离（最短路径长度）将其余节点放置在以中心点为圆心的同心圆上。</p>\n<h2 id=\"使用指南\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97\" aria-label=\"使用指南 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98