{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-f1de056f7026fc3f167c2736302dcf32-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>可选值</strong>: 'LR' | 'RL' | 'H'<br /><strong>Default</strong>: 'LR'<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The direction of layout. </p>\n<ul>\n<li>LR —— Root is on the left, layout from the left to the right(left image below)<br /></li>\n<li>RL —— Root is on the right, layout from the right to the left(center image below)<br /></li>\n<li>H —— Root is on the middle, layout in horizontal symmetry(right image below)</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832031826-33f11b5c-3d7a-4767-89b0-1d7cb6f64510.png#align=left&#x26;display=inline&#x26;height=282&#x26;name=image.png&#x26;originHeight=908&#x26;originWidth=354&#x26;search=&#x26;size=141929&#x26;status=done&#x26;width=110\" alt=\"image.png\">          <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832083137-c38a3f7a-885e-4acf-954a-73fbeb822bde.png#align=left&#x26;display=inline&#x26;height=279&#x26;name=image.png&#x26;originHeight=890&#x26;originWidth=278&#x26;search=&#x26;size=133215&#x26;status=done&#x26;width=87\" alt=\"image.png\">           <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832100885-51d8526e-d530-4090-9f37-4fdd4f9e865a.png#align=left&#x26;display=inline&#x26;height=272&#x26;name=image.png&#x26;originHeight=910&#x26;originWidth=526&#x26;search=&#x26;size=205642&#x26;status=done&#x26;width=157\" alt=\"image.png\"></p>\n<blockquote>\n<p>（Left）LR。（Center）RL。（Right）H。</p>\n</blockquote>\n<h2 id=\"indent\"><a href=\"#indent\" aria-label=\"indent 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>indent</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 20<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: Colunm separation</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 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 node</p>\n<h2 id=\"getside\"><a href=\"#getside\" aria-label=\"getside 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>getSide</h2>\n<p><strong>Type</strong>: 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 string\">'left'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'right'</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 callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.</p>"}