@antv/g6
Version:
graph visualization frame work
1 lines • 10.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-44da8ad16863b56a797fb6f1066bc9ce-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>: 'H' | 'V'<br /><strong>Default</strong>: 'H'<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The direction of layout. </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/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=122&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=170\" 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/1571830515639-e66a5347-09fe-4583-81d6-178aa6920f7b.png#align=left&display=inline&height=136&name=image.png&originHeight=920&originWidth=982&search=&size=252410&status=done&width=145\" alt=\"image.png\"></p>\n<p><a name=\"MUDRY\"></a></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>: 每个节点的宽度</p>\n<p><a name=\"Bvvg1\"></a></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<p><a name=\"c4eUs\"></a></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>Default</strong>: 18<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The horizontal separation of nodes</p>\n<p><a name=\"G1Yxp\"></a></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>Default</strong>: 18<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The vertical separation of nodes</p>\n<p><a name=\"NJnDM\"></a></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\">'test-child-id'</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token string\">'right'</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token string\">'left'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>Default</strong>: 'right'<br /><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>"}