https://en.1991421.cn/tag/x6/X6Hugo Blox Builder (https://hugoblox.com)en-USWed, 20 Nov 2024 18:34:08 +0800https://en.1991421.cn/media/sharing.pnghttps://en.1991421.cn/tag/x6/https://en.1991421.cn/2024/11/20/antv-x6/Wed, 20 Nov 2024 18:34:08 +0800https://en.1991421.cn/2024/11/20/antv-x6/<blockquote> <p>Recently, a work requirement needed to draw DAG graphs with interactive operations. After research, I decided to use AntV X6 as the solution. After using it in practice, here&rsquo;s a summary of common issues.</p> </blockquote> <h2 id="how-to-choose-between-x6-g6-and-others"> <a class="heading-anchor-link" href="#how-to-choose-between-x6-g6-and-others">How to choose between X6, G6, and others</a> <button class="heading-anchor" type="button" data-anchor="how-to-choose-between-x6-g6-and-others" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><p>There are many visualization graph libraries under AntV, so how do you choose? In fact, each library has a different positioning, so use what fits your needs. Here&rsquo;s the official introduction to each library.</p> <h2 id="antv-plugins"> <a class="heading-anchor-link" href="#antv-plugins">AntV plugins</a> <button class="heading-anchor" type="button" data-anchor="antv-plugins" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><p>As you can see, AntV provides many plugins that can be loaded as needed. For example, to implement a component that deletes selected nodes with the backspace key, you need the selection and keyboard plugins.</p> <p>For a specific list of plugins, see here: <a href="https://github.com/antvis/X6/tree/master/packages" target="_blank" rel="noopener">https://github.com/antvis/X6/tree/master/packages</a></p> <h2 id="custom-node-styles"> <a class="heading-anchor-link" href="#custom-node-styles">Custom node styles</a> <button class="heading-anchor" type="button" data-anchor="custom-node-styles" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><h2 id="automatic-layout"> <a class="heading-anchor-link" href="#automatic-layout">Automatic layout</a> <button class="heading-anchor" type="button" data-anchor="automatic-layout" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><ul> <li>Install the dependency package <a href="https://www.npmjs.com/package/dagre" target="_blank" rel="noopener"><code>dagre</code></a></li> <li>During initial rendering, just call the <code>layout(graph)</code> method.</li> </ul> <p>The implementation code for layout is as follows, for reference only.</p> <p><a href="https://gist.githubusercontent.com/alanhe421/1e2942d8e7134a53f1e54d4802c3e437/raw/f0b06508525f12874d36831935e8fb04dcb39a4c/antv-x6-layout.ts" target="_blank" rel="noopener">https://gist.githubusercontent.com/alanhe421/1e2942d8e7134a53f1e54d4802c3e437/raw/f0b06508525f12874d36831935e8fb04dcb39a4c/antv-x6-layout.ts</a></p> <h2 id="3d25d-support"> <a class="heading-anchor-link" href="#3d25d-support">3D/2.5D support?</a> <button class="heading-anchor" type="button" data-anchor="3d25d-support" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><p>The official library doesn&rsquo;t provide a solution for this; you currently need to solve it yourself.</p> <h2 id="20-plan"> <a class="heading-anchor-link" href="#20-plan">2.0 Plan</a> <button class="heading-anchor" type="button" data-anchor="20-plan" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><p>👉 <a href="https://www.yuque.com/antv/x6/sk3zdn_nsgg4p" target="_blank" rel="noopener">https://www.yuque.com/antv/x6/sk3zdn_nsgg4p</a></p> <h2 id="related-documentation"> <a class="heading-anchor-link" href="#related-documentation">Related Documentation</a> <button class="heading-anchor" type="button" data-anchor="related-documentation" aria-label="Copy anchor link" title="Copy anchor link" > <span class="heading-anchor-wrap" aria-hidden="true"> <svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"> <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path> </svg> <svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z"></path> </svg> </span> </button> </h2><ul> <li><a href="https://antv.antgroup.com/" target="_blank" rel="noopener">https://antv.antgroup.com/</a></li> </ul>