@antv/g6
Version:
graph visualization frame work
1 lines • 10.2 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-d9a4dc5f4360cf12bf664f660790400a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"center\"><a href=\"#center\" aria-label=\"center 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>center</h2>\n<p><strong>Type</strong>: Array<br /><strong>Example</strong>: [ 0, 0 ]<br /><strong>Default</strong>: The center of graph<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The center of the layout</p>\n<h2 id=\"linkdistance\"><a href=\"#linkdistance\" aria-label=\"linkdistance 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>linkDistance</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 50<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: Edge length</p>\n<h2 id=\"maxiteration\"><a href=\"#maxiteration\" aria-label=\"maxiteration 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>maxIteration</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 1000<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The max number of iteration to stop</p>\n<h2 id=\"focusnode\"><a href=\"#focusnode\" aria-label=\"focusnode 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>focusNode</h2>\n<p><strong>Type</strong>: String | Object<br /><strong>Default</strong>: null<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The focus node of the radial layout. If it is not assigned, the first node in the data will take effect. This parameter can be the node's id as String, or the node object.</p>\n<h2 id=\"unitradius\"><a href=\"#unitradius\" aria-label=\"unitradius 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>unitRadius</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 100<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The distance between circles. If it is not assigned, this algorithm will calculate a value to fill the whole canvas.</p>\n<h2 id=\"preventoverlap\"><a href=\"#preventoverlap\" aria-label=\"preventoverlap 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>preventOverlap</h2>\n<p><strong>Type</strong>: Boolean<br /><strong>Default</strong>: false<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: Switch to prevent the node overlappings. It should be used with <a href=\"https://www.yuque.com/antv/g6/ngp0vg#xWjHN\" target=\"_self\" rel=\"nofollow\"><code class=\"language-text\">nodeSize</code></a>. Only if the <code class=\"language-text\">nodeSize</code> is assigned, the collide detection will take effect.</p>\n<h2 id=\"nodesize\"><a href=\"#nodesize\" aria-label=\"nodesize 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>nodeSize</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 10<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.</p>\n<h2 id=\"maxpreventoverlapiteration\"><a href=\"#maxpreventoverlapiteration\" aria-label=\"maxpreventoverlapiteration 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>maxPreventOverlapIteration</h2>\n<p><strong>Type</strong>: Number<br /><strong>Default</strong>: 200<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: The max number of iterations to stop the prevent node overlappings.</p>\n<h2 id=\"strictradial\"><a href=\"#strictradial\" aria-label=\"strictradial 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>strictRadial</h2>\n<p><strong>Type</strong>: Boolean<br /><strong>Default</strong>: true<br /><strong>Required</strong>: false<br /><strong>Explanation</strong>: Whether layout the radial strictly, which means place the nodes with same level on a circle strictly. It will take effect while <code class=\"language-text\">preventOverlap</code> is <code class=\"language-text\">true</code>.</p>\n<ul>\n<li>When <code class=\"language-text\">preventOverlap</code> is <code class=\"language-text\">true</code> and <code class=\"language-text\">strictRadial</code> is <code class=\"language-text\">false</code>, this algorithm will try to place the overlapped nodes alone a circle without overlappings as much as possible. But the overlappings might not be able to avoid while there are too many nodes in a small circle.</li>\n<li>When <code class=\"language-text\">preventOverlap</code> is <code class=\"language-text\">true</code> and <code class=\"language-text\">strictRadial</code> is <code class=\"language-text\">true</code>, this algorithm allows offsets between nodes on the same level to prevent node overlappings.</li>\n</ul>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571823019221-9dca17b5-de09-4a1f-bc2e-d3449bcf3b15.png#align=left&display=inline&height=99&name=image.png&originHeight=782&originWidth=1708&search=&size=618660&status=done&width=217\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571822948753-8770ced2-4d49-4e32-8b63-d4274b3d954b.png#align=left&display=inline&height=115&name=image.png&originHeight=1022&originWidth=1730&search=&size=777561&status=done&width=194\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571822993803-287544ef-2b0a-4187-862b-39d9cba314c5.png#align=left&display=inline&height=113&name=image.png&originHeight=920&originWidth=1716&search=&size=709533&status=done&width=210\" alt=\"image.png\"></p>\n<blockquote>\n<p>（Left）preventOverlap = false。（Center）preventOverlap = false，strictRadial = true。（Right）preventOverlap = false，strictRadial = false。</p>\n</blockquote>"}