{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-76b238a2cd5d993aa820ea82a2268aa1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"direction\"><a href=\"#direction\" aria-label=\"direction 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>direction</h2>\n<p><strong>Type</strong>: String<br /><strong>Options</strong>: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'<br /><strong>Default</strong>: 'LR'<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The direction of layout. </p>\n<ul>\n<li>TB —— Root is on the top, layout from the top to the bottom</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833657395-7b291d7b-5408-41fa-bfb6-533ef39250ad.png#align=left&#x26;display=inline&#x26;height=59&#x26;name=image.png&#x26;originHeight=744&#x26;originWidth=1786&#x26;search=&#x26;size=397159&#x26;status=done&#x26;width=141\" alt=\"image.png\"></p>\n<ul>\n<li>BT —— Root is on the bottom, layout from the bottom to the top</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833676794-31f862f3-8cb5-412e-81d4-2ac246e37c0d.png#align=left&#x26;display=inline&#x26;height=60&#x26;name=image.png&#x26;originHeight=762&#x26;originWidth=1790&#x26;search=&#x26;size=390312&#x26;status=done&#x26;width=140\" alt=\"image.png\"></p>\n<ul>\n<li>LR —— Root is on the left, layout from the left to the right</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833574730-5d76d7a2-0e82-4ef7-a7d9-a45efd5b6b30.png#align=left&#x26;display=inline&#x26;height=119&#x26;name=image.png&#x26;originHeight=906&#x26;originWidth=518&#x26;search=&#x26;size=164555&#x26;status=done&#x26;width=68\" alt=\"image.png\"></p>\n<ul>\n<li>RL —— Root is on the right, layout from the right to the left</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833593889-e98c6f6d-0c38-4408-a4c0-ba83d0bbba74.png#align=left&#x26;display=inline&#x26;height=115&#x26;name=image.png&#x26;originHeight=932&#x26;originWidth=454&#x26;search=&#x26;size=154391&#x26;status=done&#x26;width=56\" alt=\"image.png\"></p>\n<ul>\n<li>H —— Root is on the middle, layout in horizontal symmetry.</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833726277-822e5104-2189-4fe4-bcdc-7b43d183d541.png#align=left&#x26;display=inline&#x26;height=110&#x26;name=image.png&#x26;originHeight=906&#x26;originWidth=824&#x26;search=&#x26;size=226469&#x26;status=done&#x26;width=100\" alt=\"image.png\"></p>\n<ul>\n<li>V —— Root is on the middle, layout in vertical symmetry.</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833702068-8f409559-1765-4154-bd4d-bb782de8cd23.png#align=left&#x26;display=inline&#x26;height=92&#x26;name=image.png&#x26;originHeight=924&#x26;originWidth=1028&#x26;search=&#x26;size=314177&#x26;status=done&#x26;width=102\" alt=\"image.png\"></p>\n<h2 id=\"getwidth\"><a href=\"#getwidth\" aria-label=\"getwidth 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>getWidth</h2>\n<p><strong>Type</strong>: Number | Function<br /><strong>Example</strong>: </p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token parameter\">d</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// d is a node</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span>id <span class=\"token operator\">===</span> <span class=\"token string\">'testId'</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token number\">50</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">100</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>Required</strong>: false<br /><strong>Explanation</strong>: The width of each node</p>\n<h2 id=\"getheight\"><a href=\"#getheight\" aria-label=\"getheight 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>getHeight</h2>\n<p><strong>Type</strong>: Number | Function<br /><strong>Example</strong>: </p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token parameter\">d</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// d is a node</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span>id <span class=\"token operator\">===</span> <span class=\"token string\">'testId'</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token number\">50</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">100</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>Required</strong>: false<br /><strong>Explanation</strong>: The height of each node</p>\n<h2 id=\"gethgap\"><a href=\"#gethgap\" aria-label=\"gethgap 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>getHGap</h2>\n<p><strong>Type</strong>: Number | Function<br /><strong>Example</strong>: </p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token parameter\">d</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// d is a node</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span>id <span class=\"token operator\">===</span> <span class=\"token string\">'testId'</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token number\">50</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">100</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>默认值</strong>: 18<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The horizontal separation of nodes</p>\n<h2 id=\"getvgap\"><a href=\"#getvgap\" aria-label=\"getvgap 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>getVGap</h2>\n<p><strong>Type</strong>: Number | Function<br /><strong>Example</strong>: </p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token parameter\">d</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// d is a node</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span>id <span class=\"token operator\">===</span> <span class=\"token string\">'testId'</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token number\">50</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">100</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>默认值</strong>: 18<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The vertical separation of nodes</p>\n<h2 id=\"radial\"><a href=\"#radial\" aria-label=\"radial 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>radial</h2>\n<p><strong>Type</strong>: Boolean<br /><strong>默认值</strong>: false<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: If layout the graph in radial style. If <code class=\"language-text\">radial</code> is <code class=\"language-text\">true</code>, we recommend to set <code class=\"language-text\">direction</code> to <code class=\"language-text\">&#39;LR&#39;</code> or <code class=\"language-text\">&#39;RL&#39;</code>:<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833817425-f944eadd-fd68-4107-8425-81c1c9bd1ce4.png#align=left&#x26;display=inline&#x26;height=175&#x26;name=image.png&#x26;originHeight=886&#x26;originWidth=990&#x26;search=&#x26;size=213310&#x26;status=done&#x26;width=195\" alt=\"image.png\"></p>"}