{"id":7633,"date":"2026-07-30T11:21:11","date_gmt":"2026-07-30T03:21:11","guid":{"rendered":"https:\/\/www.hightopo.com\/blog\/?p=7633"},"modified":"2026-07-30T14:46:01","modified_gmt":"2026-07-30T06:46:01","slug":"%e4%ba%8c%e4%b8%89%e7%bb%b4%e6%8b%93%e6%89%91%e5%9b%be%e5%8d%a1%e9%a1%bf%ef%bc%9f%e8%af%95%e8%af%95-ht-%e6%b8%b2%e6%9f%93%e4%bc%98%e5%8c%96%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/7633.html","title":{"rendered":"\u4e8c\u4e09\u7ef4\u62d3\u6251\u56fe\u5361\u987f\uff1f\u8bd5\u8bd5 HT \u6e32\u67d3\u4f18\u5316\u65b9\u6848"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/01-1.webp\"><img loading=\"lazy\" width=\"1080\" height=\"1507\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/01-1.webp\" alt=\"\" class=\"wp-image-7643\"\/><\/a><\/figure><\/div>\n\n\n\n<p>\u62d3\u6251\u56fe\u4f5c\u4e3a\u62bd\u8c61\u5316\u7684\u5173\u7cfb\u8868\u8fbe\u5de5\u5177\uff0c\u4ee5<strong>\u8282\u70b9<\/strong>\u4e0e<strong>\u8fde\u7ebf<\/strong>\u4e3a\u6838\u5fc3\u5143\u7d20\uff0c\u53ef\u76f4\u89c2\u5448\u73b0\u5404\u9886\u57df\u590d\u6742\u7cfb\u7edf\u7684\u5173\u8054\u7f51\u7edc\uff0c<strong>\u6e05\u6670\u63ed\u793a\u7cfb\u7edf\u5185\u90e8\u7ed3\u6784\u3001\u5c42\u7ea7\u4f9d\u8d56\u4e0e\u4e1a\u52a1\u903b\u8f91<\/strong>\uff0c\u4e3a\u7cfb\u7edf\u7406\u89e3\u3001\u8fd0\u884c\u7ba1\u7406\u53ca\u7ed3\u6784\u4f18\u5316\u63d0\u4f9b\u53ef\u89c6\u5316\u652f\u6491\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02.png\"><img loading=\"lazy\" width=\"1024\" height=\"578\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-1024x578.png\" alt=\"\" class=\"wp-image-7634\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-1024x578.png 1024w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-300x169.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-768x434.png 768w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-660x373.png 660w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02.png 1238w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>\u57fa\u7840\u62d3\u6251\u4ec5\u901a\u8fc7\u8282\u70b9\u4e0e\u8fde\u7ebf\u53ef\u8868\u8fbe\u57fa\u7840\u8fde\u63a5\u5173\u7cfb\uff0c\u4f46\u89c6\u89c9\u4e0a\u65e0\u6cd5\u76f4\u89c2\u5448\u73b0\u8fde\u63a5\u7c7b\u578b\u3001\u6570\u636e\u6d41\u5411\u3001\u4e1a\u52a1\u5c5e\u6027\u7b49\u6269\u5c55\u4fe1\u606f\u3002\u56e0\u6b64\u5728\u5b9e\u9645\u5de5\u7a0b\u5e94\u7528\u4e2d\uff0c\u9700\u901a\u8fc7<strong>\u56fe\u6807\u3001\u6587\u672c\u3001\u6807\u6ce8<\/strong>\u7b49\u5f62\u5f0f\u5bf9\u8fde\u7ebf\u4fe1\u606f\u8fdb\u884c\u589e\u5f3a\u8868\u8fbe\uff0c\u5b8c\u6574\u5448\u73b0\u7cfb\u7edf\u8fd0\u884c\u903b\u8f91\u4e0e\u5b9e\u65f6\u72b6\u6001\u3002<\/p>\n\n\n\n<h2>01 <strong>\u8fde\u7ebf\u4fe1\u606f\u663e\u793a\u5b9e\u73b0\u65b9\u5f0f<\/strong><\/h2>\n\n\n\n<p>\u5728&nbsp;HT&nbsp;\u53ef\u89c6\u5316\u6846\u67b6\u4e2d\uff0c<strong>\u8282\u70b9\u4e0e\u8fde\u7ebf\u5206\u522b\u901a\u8fc7&nbsp;ht.Node&nbsp;\u4e0e&nbsp;ht.Edge&nbsp;\u5bf9\u8c61\u8fdb\u884c\u5efa\u6a21<\/strong>\u3002\u9488\u5bf9\u8fde\u7ebf\u4fe1\u606f\u5c55\u793a\u9700\u6c42\uff0c\u5e73\u53f0\u63d0\u4f9b\u591a\u79cd\u6807\u51c6\u5316\u5b9e\u73b0\u65b9\u5f0f\u3002<\/p>\n\n\n\n<h3><strong>\u57fa\u7840\u6587\u672c\u6807\u6ce8<\/strong><\/h3>\n\n\n\n<ul><li><strong>label \u5c5e\u6027<\/strong><br>\u7528\u4e8e\u5728\u8fde\u7ebf\u5bf9\u8c61\u4e0a\u76f4\u63a5\u663e\u793a\u6587\u672c\u4fe1\u606f\uff0c\u662f\u6700\u5e38\u7528\u7684\u6587\u672c\u6807\u6ce8\u65b9\u5f0f\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>edge.s('label', '\u6587\u672c\u4fe1\u606f');<\/code><\/pre>\n\n\n\n<ul><li><strong>note \u5c5e\u6027<\/strong><br>\u4ee5\u6c14\u6ce1\u63d0\u793a\u5f62\u5f0f\u5448\u73b0\u9644\u52a0\u8bf4\u660e\uff0c\u5e38\u7528\u4e8e\u72b6\u6001\u6807\u6ce8\u3001\u7b80\u8981\u63d0\u793a\u7b49\u573a\u666f\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>edge.s('note',&nbsp;'\u6587\u672c\u4fe1\u606f');<\/code><\/pre>\n\n\n\n<ul><li><strong>\u56fe\u6807\u4e0e\u590d\u5408\u4fe1\u606f\u663e\u793a<\/strong><br>\u5982\u9700\u5728\u8fde\u7ebf\u4e0a\u663e\u793a\u56fe\u6807\u6216\u66f4\u4e3a\u590d\u6742\u7684\u6587\u672c\u4fe1\u606f\u65f6\uff08\u5982\u72b6\u6001\u56fe\u6807\u3001\u6570\u636e\u6d41\u5411\u7b26\u53f7\uff09\uff0c\u901a\u5e38\u53ef\u4ee5\u4f7f\u7528\u8fde\u7ebf\u4e0a\u7684&nbsp;icons&nbsp;\u5c5e\u6027\u8868\u793a\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>edge.s({\n    \"arrow\": {\n        \"position\": 17, \n        \"keepOrien\": true,\n        \"names\": &#91;\n            \"symbols\/\u62d3\u6251\u56fe\/arrow.json\"\n        ]\n    }\n});<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/03.webp\"><img loading=\"lazy\" width=\"1080\" height=\"1351\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/03.webp\" alt=\"\" class=\"wp-image-7635\"\/><\/a><\/figure><\/div>\n\n\n\n<p>\u9664\u6b64\u4e4b\u5916\uff0c\u5f53\u8fde\u7ebf\u4fe1\u606f\u5185\u5bb9\u8f83\u591a\u7684\u60c5\u51b5\uff0c\u8fd8\u53ef\u4ee5\u9009\u62e9<strong>\u76f4\u63a5\u5728\u9875\u9762\u4e2d\u6dfb\u52a0\u56fe\u6807\u8282\u70b9<\/strong>\u6765\u5c55\u793a\u4fe1\u606f\uff0c\u8fd9\u7c7b\u8282\u70b9\u53ef\u901a\u8fc7&nbsp;node.setHost(edge)&nbsp;\u5438\u9644\u5728\u5bf9\u5e94\u8fde\u7ebf\u4e0a\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/04-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/04-1.gif\" alt=\"\" class=\"wp-image-7636\"\/><\/a><\/figure><\/div>\n\n\n\n<h2>02 <strong>\u5927\u89c4\u6a21\u62d3\u6251\u6027\u80fd\u5f71\u54cd\u5206\u6790<\/strong><\/h2>\n\n\n\n<p>\u5728\u5927\u578b\u7cfb\u7edf\u53ef\u89c6\u5316\u573a\u666f\u4e2d\uff0c\u5927\u91cf\u6587\u672c\u3001\u56fe\u6807\u53ca\u81ea\u5b9a\u4e49\u8282\u70b9\u7684\u53e0\u52a0\u663e\u793a\uff0c\u4f1a\u5e26\u6765\uff1a<\/p>\n\n\n\n<ul><li><strong>\u6e32\u67d3\u8d1f\u8f7d\u63d0\u5347<\/strong>\uff1a\u8fc7\u591a\u7ed8\u5236\u5143\u7d20\u589e\u52a0\u753b\u5e03\u7ed8\u5236\u538b\u529b\uff0c\u5bfc\u81f4\u4ea4\u4e92\u5361\u987f\u3001\u5e27\u7387\u4e0b\u964d\u3002<\/li><li><strong>\u4fe1\u606f\u5bc6\u5ea6\u8fc7\u8f7d<\/strong>\uff1a\u89c6\u56fe\u5143\u7d20\u8fc7\u4e8e\u5bc6\u96c6\uff0c\u5173\u952e\u4fe1\u606f\u96be\u4ee5\u8fa8\u8bc6\uff0c\u5f71\u54cd\u53ef\u89c6\u5316\u53ef\u8bfb\u6027\u4e0e\u51b3\u7b56\u6548\u7387\u3002<\/li><\/ul>\n\n\n\n<p><strong>\u9488\u5bf9\u4e0a\u8ff0\u95ee\u9898<\/strong>\uff0cHT&nbsp;\u62d3\u6251\u7f29\u653e\u81ea\u9002\u5e94\u6e32\u67d3\u65b9\u6848\uff0c\u6839\u636e\u89c6\u56fe\u7f29\u653e\u7a0b\u5ea6\u52a8\u6001\u63a7\u5236\u975e\u5fc5\u8981\u5143\u7d20\u7684\u663e\u9690\uff0c\u5e73\u8861\u4fe1\u606f\u5b8c\u6574\u6027\u4e0e\u6e32\u67d3\u6027\u80fd\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/05-1.gif\"><img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/05-1.gif\" alt=\"\" class=\"wp-image-7637\"\/><\/a><\/figure><\/div>\n\n\n\n<h3><strong>\u62d3\u6251\u56fe\u6e32\u67d3\u5b9e\u73b0\u65b9\u6848<\/strong><\/h3>\n\n\n\n<h4><strong>01<\/strong> <strong>\u573a\u666f\u7f29\u653e\u63a7\u5236\u5143\u7d20\u663e\u9690<\/strong><\/h4>\n\n\n\n<p>\u5bf9\u4e8e\u5927\u56fe\u7eb8\uff0c\u7528\u6237\u901a\u5e38\u9700\u8981\u653e\u5927\u5230\u4e00\u5b9a\u7a0b\u5ea6\u624d\u80fd\u770b\u6e05\u8fde\u7ebf \/ \u8282\u70b9\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u56e0\u6b64\u53ef\u8bbe\u7f6e\uff1a<strong>\u5f53\u56fe\u7eb8\u7f29\u653e\u503c\u5927\u4e8e\u67d0\u4e2a\u9608\u503c\u65f6\uff0c\u624d\u5c55\u793a&nbsp;label\/note\/icons&nbsp;\u5185\u5bb9<\/strong>\u3002<\/p>\n\n\n\n<p>\u5728&nbsp;HT&nbsp;\u7684\u89c6\u56fe\u7ec4\u4ef6&nbsp;ht.graph.GraphView\uff082D&nbsp;\u56fe\u7eb8\uff09\u548c&nbsp;ht.graph3d.Graph3dView\uff083D&nbsp;\u573a\u666f\uff09\u4e2d\uff0c\u63d0\u4f9b\u4e86&nbsp;isNoteVisible&nbsp;\u548c&nbsp;isLabelVisible&nbsp;\u65b9\u6cd5\u7528\u4e8e\u63a7\u5236&nbsp;label&nbsp;\u4e0e&nbsp;note&nbsp;\u7684\u663e\u793a\u903b\u8f91\u3002<\/p>\n\n\n\n<ul><li><strong>Label \u4e0e Note \u52a8\u6001\u63a7\u5236<\/strong><br>\u5728&nbsp;2D&nbsp;\u56fe\u7eb8\u4e2d\uff0c\u9ed8\u8ba4\u5f53\u56fe\u7eb8\u7f29\u653e\u503c\uff08zoom\uff09\u5c0f\u4e8e&nbsp;0.15&nbsp;\u65f6\uff0c\u4f1a\u81ea\u52a8\u9690\u85cf\u6240\u6709&nbsp;label&nbsp;\u548c&nbsp;note\u3002\u5982\u9700\u81ea\u5b9a\u4e49\u903b\u8f91\uff0c\u53ef\u91cd\u5199\u8fd9\u4e24\u4e2a\u65b9\u6cd5\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>view.isLabelVisible = function (data) {\n    return this.getZoom() > 1;\n};<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/06-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/06-1.gif\" alt=\"\" class=\"wp-image-7638\"\/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/07-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/07-1.gif\" alt=\"\" class=\"wp-image-7639\"\/><\/a><\/figure><\/div>\n\n\n\n<ul><li><strong>Icons \u52a8\u6001\u63a7\u5236<\/strong><br>\u901a\u8fc7\u76d1\u542c\u753b\u5e03\u7f29\u653e\u4e8b\u4ef6\uff0c\u52a8\u6001\u63a7\u5236\u56fe\u6807\u53ef\u89c1\u6027\uff0c\u51cf\u5c11\u975e\u5fc5\u8981\u6e32\u67d3\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>view.mp(e =&gt; {\n    if (e.property === 'zoom') {\n        const visible = e.newValue &gt; 1;\n        if (visible !== g2d._iconVisible) {\n            g2d._iconVisible = visible;\n            g2d.dm().toDatas().each(data =&gt; {\n                if (data.s('icons')) {\n                    for (let key in data.s('icons')) {\n                        data.s('icons')&#91;key].visible = visible;\n                    }\n                    data.iv();\n                }\n            });\n        }\n    }\n});<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/08-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/08-1.gif\" alt=\"\" class=\"wp-image-7640\"\/><\/a><\/figure><\/div>\n\n\n\n<h4><strong>02<\/strong> <strong>\u57fa\u4e8e\u56fe\u5c42\u7ba1\u7406\u7684\u6279\u91cf\u63a7\u5236<\/strong><\/h4>\n\n\n\n<p>\u5728\u67d0\u4e9b\u7279\u6b8a\u573a\u666f\u4e0b\uff08\u5982\u9644\u52a0\u4fe1\u606f\u56fe\u6807\u9700\u663e\u793a\u5728\u975e\u5e38\u89c4\u4f4d\u7f6e\uff09\uff0c\u6807\u51c6\u65b9\u5f0f\u65e0\u6cd5\u6ee1\u8db3\u9700\u6c42\uff0c\u53ef\u91c7\u7528\u66f4\u7075\u6d3b\u7684\u65b9\u6848\uff1a\u76f4\u63a5\u5c06&nbsp;ht.Node&nbsp;\u653e\u7f6e\u5728\u8fde\u7ebf\u9644\u8fd1\uff0c\u5e76\u53ef\u8bbe\u7f6e\u5438\u9644\u4e8e\u8fde\u7ebf\u76ee\u6807 \/ \u8d77\u59cb\u8282\u70b9\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node.setHost(target\/source)<\/code><\/pre>\n\n\n\n<p>\u5bf9\u6b64\u7c7b\u9644\u52a0\u4fe1\u606f\u8282\u70b9\uff0c\u540c\u6837\u53ef\u6839\u636e\u7f29\u653e\u7a0b\u5ea6\u63a7\u5236\u663e\u793a\uff0c\u5b9e\u73b0\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n\n\n\n<ul><li><strong>\u521b\u5efa\u81ea\u5b9a\u4e49\u56fe\u5c42<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const layer = g2d.getLayers();\nlayer.push({\n    \"name\": \"newLayer\",\n    \"visible\": true,\n    \"selectable\": true,\n    \"movable\": true,\n    \"editable\": true\n});<\/code><\/pre>\n\n\n\n<ul><li><strong>\u7ed1\u5b9a\u9644\u52a0\u4fe1\u606f\u8282\u70b9\u81f3\u56fe\u5c42<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>node.setLayer('newLayer');<\/code><\/pre>\n\n\n\n<ul><li><strong>\u6839\u636e\u7f29\u653e\u63a7\u5236\u56fe\u5c42\u53ef\u89c1\u6027<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>g2d.mp(e =&gt; {\n    if (e.property === 'zoom') {\n        const visible = e.newValue &gt; 1;\n        if (visible !== g2d._layerVisible) {\n            g2d._layerVisible = visible;\n            const layer = g2d.getLayers();\n            layer&#91;1].visible = visible;\n        }\n    }\n});<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/09-1.gif\"><img loading=\"lazy\" width=\"801\" height=\"395\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/09-1.gif\" alt=\"\" class=\"wp-image-7641\"\/><\/a><\/figure><\/div>\n\n\n\n<h4><strong>03<\/strong> <strong>\u6d77\u91cf\u8fde\u7ebf\u4f18\u5316\uff1aht.Shape \u5408\u5e76\u6e32\u67d3<\/strong><\/h4>\n\n\n\n<p>\u5728\u5b58\u5728\u5927\u91cf\u8fde\u7ebf\u7684\u573a\u666f\u4e2d\uff0c\u8fc7\u591a&nbsp;ht.Edge&nbsp;\u5b9e\u4f8b\u4f1a\u663e\u8457\u964d\u4f4e\u6e32\u67d3\u6548\u7387\u3002\u53ef\u901a\u8fc7&nbsp;ht.Shape&nbsp;\u5bf9\u8c61\u5408\u5e76\u591a\u6761\u8fde\u7ebf\u8def\u5f84\uff0c\u7edf\u4e00\u6e32\u67d3\u4ee5\u63d0\u5347\u5e27\u7387\u4e0e\u4ea4\u4e92\u6d41\u7545\u5ea6\u3002<\/p>\n\n\n\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u5b9e\u73b0\u903b\u8f91<\/strong><\/p>\n\n\n\n<ul><li>\u904d\u5386\u6570\u636e\u6a21\u578b\uff0c\u7b5b\u9009\u6240\u6709\u8fde\u7ebf\u5bf9\u8c61\uff1b<\/li><li>\u63d0\u53d6\u5404\u8fde\u7ebf\u8d77\u70b9\u3001\u62d0\u70b9\u4e0e\u7ec8\u70b9\u5750\u6807\uff1b<\/li><li>\u6784\u5efa\u7edf\u4e00\u8def\u5f84\u5e76\u8d4b\u503c\u7ed9&nbsp;ht.Shape\uff1b<\/li><li>\u9690\u85cf\u539f\u8fde\u7ebf\uff0c\u4f7f\u7528&nbsp;Shape&nbsp;\u66ff\u4ee3\u6e32\u67d3\u3002<\/li><\/ul>\n\n\n\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u6838\u5fc3\u4ee3\u7801<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u8fc7\u6ee4\u6570\u636e\u6a21\u578b\uff0c\u83b7\u53d6\u6240\u6709 edges\nconst edges = dm.toDatas((d) =&gt; {\n    return d.getClassName() === 'ht.Edge'\n})\n\/\/ \u521b\u5efa ht.Shape \u8282\u70b9\nconst shape = new ht.Shape();\nlet points = &#91;];\nlet segments = &#91;];\nlet edgeColor = edges.get(0).s('edge.color'),\n    edgeWidth = edges.get(0).s('edge.width');\n\n\/\/ \u904d\u5386\u6240\u6709\u7684 edge\uff0c\u83b7\u53d6\u70b9\u4f4d\u4fe1\u606f\nedges.each((edge) =&gt; {\n    const edgeInfo = view.getEdgeInfo(edge);\n    if (!edgeInfo) return;\n    let edgePoints = &#91;];\n    edgePoints.push(edgeInfo.sourcePoint);\n    if (edgeInfo.points) {\n        edgePoints = edgePoints.concat(edgeInfo.points.toArray());\n    }\n    edgePoints.push(edgeInfo.targetPoint);\n\n    points = points.concat(edgePoints);\n    edgePoints.forEach((item, i) =&gt; {\n        segments.push(i === 0 ? 1 : 2);\n    })\n    edge.s('2d.visible', false) \/\/ \u5c06 edge \u8bbe\u7f6e\u4e3a\u4e0d\u53ef\u89c1\n})\n\/\/ \u8bbe\u7f6e shape \u7684\u70b9\u4f4d\u548c\u6837\u5f0f\nshape.setPoints(points)\nshape.setSegments(segments);\nshape.s({\n    \"shape.background\": null,\n    \"shape.border.width\": edgeWidth,\n    \"shape.border.color\": edgeColor\n})\ndm.add(shape);<\/code><\/pre>\n\n\n\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u6027\u80fd\u5bf9\u6bd4<\/strong><\/p>\n\n\n\n<p>\u5728\u7ea6&nbsp;2048&nbsp;\u6761\u8fde\u7ebf\u7684\u6d4b\u8bd5\u573a\u666f\u4e2d\uff0c\u5408\u5e76\u6e32\u67d3\u53ef\u663e\u8457\u63d0\u5347\u9ad8\u5bc6\u8fde\u7ebf\u573a\u666f\u4e0b\u7684\u8fd0\u884c\u6027\u80fd\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/10.webp\"><img loading=\"lazy\" width=\"1080\" height=\"560\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/10.webp\" alt=\"\" class=\"wp-image-7642\"\/><\/a><figcaption>\u5de6\u4e3a ht.Shape | \u53f3\u4e3a ht.Edge<\/figcaption><\/figure>\n\n\n\n<h2>\u603b\u7ed3<\/h2>\n\n\n\n<p>\u672c\u6587\u4ecb\u7ecd\u4e86&nbsp;HT&nbsp;\u5e73\u53f0\u4e0b\u62d3\u6251\u56fe\u8fde\u7ebf\u4fe1\u606f\u7684\u6807\u51c6\u5316\u5c55\u793a\u65b9\u6848\uff0c\u4ee5\u53ca\u9488\u5bf9\u5927\u89c4\u6a21\u62d3\u6251\u573a\u666f\u7684\u6027\u80fd\u4f18\u5316\u7b56\u7565\uff1a<\/p>\n\n\n\n<ul><li>\u57fa\u7840\u4fe1\u606f\u53ef\u901a\u8fc7&nbsp;label\u3001note&nbsp;\u5feb\u901f\u5b9e\u73b0\u6587\u672c\u6807\u6ce8\uff1b<\/li><li>\u590d\u6742\u56fe\u6807\u4e0e\u6d41\u5411\u4fe1\u606f\u53ef\u901a\u8fc7&nbsp;icons&nbsp;\u6216\u81ea\u5b9a\u4e49\u8282\u70b9\u6269\u5c55\uff1b<\/li><li>\u5927\u89c4\u6a21\u89c6\u56fe\u91c7\u7528\u81ea\u9002\u5e94\u7f29\u653e\u6e32\u67d3\uff0c\u6839\u636e\u7f29\u653e\u52a8\u6001\u63a7\u5236\u5143\u7d20\u4e0e\u56fe\u5c42\u663e\u9690\uff1b<\/li><li>\u6d77\u91cf\u8fde\u7ebf\u573a\u666f\u4f7f\u7528&nbsp;ht.Shape&nbsp;\u5408\u5e76\u8def\u5f84\uff0c\u964d\u4f4e\u5b9e\u4f8b\u6570\u91cf\uff0c\u63d0\u5347\u6e32\u67d3\u6548\u7387\u3002<\/li><\/ul>\n\n\n\n<p>\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u53ef\u7ed3\u5408\u9879\u76ee\u4e1a\u52a1\u9700\u6c42\u3001\u89c6\u56fe\u590d\u6742\u5ea6\u4e0e\u6027\u80fd\u6307\u6807\uff0c\u7075\u6d3b\u9009\u7528\u6216\u7ec4\u5408\u4f7f\u7528\u4e0a\u8ff0\u65b9\u6848\uff0c\u5b9e\u73b0\u53ef\u89c6\u5316\u6548\u679c\u4e0e\u8fd0\u884c\u6548\u7387\u7684\u6700\u4f18\u5e73\u8861\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p><!-- wp:image {\"align\":\"center\",\"id\":7643,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/01-1.webp\"><img loading=\"lazy\" width=\"1080\" height=\"1507\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/01-1.webp\" alt=\"\" class=\"wp-image-7643\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u62d3\u6251\u56fe\u4f5c\u4e3a\u62bd\u8c61\u5316\u7684\u5173\u7cfb\u8868\u8fbe\u5de5\u5177\uff0c\u4ee5<strong>\u8282\u70b9<\/strong>\u4e0e<strong>\u8fde\u7ebf<\/strong>\u4e3a\u6838\u5fc3\u5143\u7d20\uff0c\u53ef\u76f4\u89c2\u5448\u73b0\u5404\u9886\u57df\u590d\u6742\u7cfb\u7edf\u7684\u5173\u8054\u7f51\u7edc\uff0c<strong>\u6e05\u6670\u63ed\u793a\u7cfb\u7edf\u5185\u90e8\u7ed3\u6784\u3001\u5c42\u7ea7\u4f9d\u8d56\u4e0e\u4e1a\u52a1\u903b\u8f91<\/strong>\uff0c\u4e3a\u7cfb\u7edf\u7406\u89e3\u3001\u8fd0\u884c\u7ba1\u7406\u53ca\u7ed3\u6784\u4f18\u5316\u63d0\u4f9b\u53ef\u89c6\u5316\u652f\u6491\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7634,\"sizeSlug\":\"large\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02.png\"><img loading=\"lazy\" width=\"1024\" height=\"578\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-1024x578.png\" alt=\"\" class=\"wp-image-7634\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-1024x578.png 1024w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-300x169.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-768x434.png 768w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02-660x373.png 660w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/02.png 1238w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u57fa\u7840\u62d3\u6251\u4ec5\u901a\u8fc7\u8282\u70b9\u4e0e\u8fde\u7ebf\u53ef\u8868\u8fbe\u57fa\u7840\u8fde\u63a5\u5173\u7cfb\uff0c\u4f46\u89c6\u89c9\u4e0a\u65e0\u6cd5\u76f4\u89c2\u5448\u73b0\u8fde\u63a5\u7c7b\u578b\u3001\u6570\u636e\u6d41\u5411\u3001\u4e1a\u52a1\u5c5e\u6027\u7b49\u6269\u5c55\u4fe1\u606f\u3002\u56e0\u6b64\u5728\u5b9e\u9645\u5de5\u7a0b\u5e94\u7528\u4e2d\uff0c\u9700\u901a\u8fc7<strong>\u56fe\u6807\u3001\u6587\u672c\u3001\u6807\u6ce8<\/strong>\u7b49\u5f62\u5f0f\u5bf9\u8fde\u7ebf\u4fe1\u606f\u8fdb\u884c\u589e\u5f3a\u8868\u8fbe\uff0c\u5b8c\u6574\u5448\u73b0\u7cfb\u7edf\u8fd0\u884c\u903b\u8f91\u4e0e\u5b9e\u65f6\u72b6\u6001\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>01 <strong>\u8fde\u7ebf\u4fe1\u606f\u663e\u793a\u5b9e\u73b0\u65b9\u5f0f<\/strong><\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728&nbsp;HT&nbsp;\u53ef\u89c6\u5316\u6846\u67b6\u4e2d\uff0c<strong>\u8282\u70b9\u4e0e\u8fde\u7ebf\u5206\u522b\u901a\u8fc7&nbsp;ht.Node&nbsp;\u4e0e&nbsp;ht.Edge&nbsp;\u5bf9\u8c61\u8fdb\u884c\u5efa\u6a21<\/strong>\u3002\u9488\u5bf9\u8fde\u7ebf\u4fe1\u606f\u5c55\u793a\u9700\u6c42\uff0c\u5e73\u53f0\u63d0\u4f9b\u591a\u79cd\u6807\u51c6\u5316\u5b9e\u73b0\u65b9\u5f0f\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3><strong>\u57fa\u7840\u6587\u672c\u6807\u6ce8<\/strong><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>label \u5c5e\u6027<\/strong><br \/>\u7528\u4e8e\u5728\u8fde\u7ebf\u5bf9\u8c61\u4e0a\u76f4\u63a5\u663e\u793a\u6587\u672c\u4fe1\u606f\uff0c\u662f\u6700\u5e38\u7528\u7684\u6587\u672c\u6807\u6ce8\u65b9\u5f0f\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>edge.s('label', '\u6587\u672c\u4fe1\u606f');<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>note \u5c5e\u6027<\/strong><br \/>\u4ee5\u6c14\u6ce1\u63d0\u793a\u5f62\u5f0f\u5448\u73b0\u9644\u52a0\u8bf4\u660e\uff0c\u5e38\u7528\u4e8e\u72b6\u6001\u6807\u6ce8\u3001\u7b80\u8981\u63d0\u793a\u7b49\u573a\u666f\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>edge.s('note',&nbsp;'\u6587\u672c\u4fe1\u606f');<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>\u56fe\u6807\u4e0e\u590d\u5408\u4fe1\u606f\u663e\u793a<\/strong><br \/>\u5982\u9700\u5728\u8fde\u7ebf\u4e0a\u663e\u793a\u56fe\u6807\u6216\u66f4\u4e3a\u590d\u6742\u7684\u6587\u672c\u4fe1\u606f\u65f6\uff08\u5982\u72b6\u6001\u56fe\u6807\u3001\u6570\u636e\u6d41\u5411\u7b26\u53f7\uff09\uff0c\u901a\u5e38\u53ef\u4ee5\u4f7f\u7528\u8fde\u7ebf\u4e0a\u7684&nbsp;icons&nbsp;\u5c5e\u6027\u8868\u793a\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>edge.s({\n    \"arrow\": {\n        \"position\": 17, \n        \"keepOrien\": true,\n        \"names\": &#91;\n            \"symbols\/\u62d3\u6251\u56fe\/arrow.json\"\n        ]\n    }\n});<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7635,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/03.webp\"><img loading=\"lazy\" width=\"1080\" height=\"1351\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/03.webp\" alt=\"\" class=\"wp-image-7635\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u9664\u6b64\u4e4b\u5916\uff0c\u5f53\u8fde\u7ebf\u4fe1\u606f\u5185\u5bb9\u8f83\u591a\u7684\u60c5\u51b5\uff0c\u8fd8\u53ef\u4ee5\u9009\u62e9<strong>\u76f4\u63a5\u5728\u9875\u9762\u4e2d\u6dfb\u52a0\u56fe\u6807\u8282\u70b9<\/strong>\u6765\u5c55\u793a\u4fe1\u606f\uff0c\u8fd9\u7c7b\u8282\u70b9\u53ef\u901a\u8fc7&nbsp;node.setHost(edge)&nbsp;\u5438\u9644\u5728\u5bf9\u5e94\u8fde\u7ebf\u4e0a\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7636,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/04-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/04-1.gif\" alt=\"\" class=\"wp-image-7636\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>02 <strong>\u5927\u89c4\u6a21\u62d3\u6251\u6027\u80fd\u5f71\u54cd\u5206\u6790<\/strong><\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728\u5927\u578b\u7cfb\u7edf\u53ef\u89c6\u5316\u573a\u666f\u4e2d\uff0c\u5927\u91cf\u6587\u672c\u3001\u56fe\u6807\u53ca\u81ea\u5b9a\u4e49\u8282\u70b9\u7684\u53e0\u52a0\u663e\u793a\uff0c\u4f1a\u5e26\u6765\uff1a<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>\u6e32\u67d3\u8d1f\u8f7d\u63d0\u5347<\/strong>\uff1a\u8fc7\u591a\u7ed8\u5236\u5143\u7d20\u589e\u52a0\u753b\u5e03\u7ed8\u5236\u538b\u529b\uff0c\u5bfc\u81f4\u4ea4\u4e92\u5361\u987f\u3001\u5e27\u7387\u4e0b\u964d\u3002<\/li>\n<li><strong>\u4fe1\u606f\u5bc6\u5ea6\u8fc7\u8f7d<\/strong>\uff1a\u89c6\u56fe\u5143\u7d20\u8fc7\u4e8e\u5bc6\u96c6\uff0c\u5173\u952e\u4fe1\u606f\u96be\u4ee5\u8fa8\u8bc6\uff0c\u5f71\u54cd\u53ef\u89c6\u5316\u53ef\u8bfb\u6027\u4e0e\u51b3\u7b56\u6548\u7387\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>\u9488\u5bf9\u4e0a\u8ff0\u95ee\u9898<\/strong>\uff0cHT&nbsp;\u62d3\u6251\u7f29\u653e\u81ea\u9002\u5e94\u6e32\u67d3\u65b9\u6848\uff0c\u6839\u636e\u89c6\u56fe\u7f29\u653e\u7a0b\u5ea6\u52a8\u6001\u63a7\u5236\u975e\u5fc5\u8981\u5143\u7d20\u7684\u663e\u9690\uff0c\u5e73\u8861\u4fe1\u606f\u5b8c\u6574\u6027\u4e0e\u6e32\u67d3\u6027\u80fd\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7637,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/05-1.gif\"><img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/05-1.gif\" alt=\"\" class=\"wp-image-7637\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3><strong>\u62d3\u6251\u56fe\u6e32\u67d3\u5b9e\u73b0\u65b9\u6848<\/strong><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:heading {\"level\":4} --><\/p>\n<h4><strong>01<\/strong> <strong>\u573a\u666f\u7f29\u653e\u63a7\u5236\u5143\u7d20\u663e\u9690<\/strong><\/h4>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5bf9\u4e8e\u5927\u56fe\u7eb8\uff0c\u7528\u6237\u901a\u5e38\u9700\u8981\u653e\u5927\u5230\u4e00\u5b9a\u7a0b\u5ea6\u624d\u80fd\u770b\u6e05\u8fde\u7ebf \/ \u8282\u70b9\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u56e0\u6b64\u53ef\u8bbe\u7f6e\uff1a<strong>\u5f53\u56fe\u7eb8\u7f29\u653e\u503c\u5927\u4e8e\u67d0\u4e2a\u9608\u503c\u65f6\uff0c\u624d\u5c55\u793a&nbsp;label\/note\/icons&nbsp;\u5185\u5bb9<\/strong>\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728&nbsp;HT&nbsp;\u7684\u89c6\u56fe\u7ec4\u4ef6&nbsp;ht.graph.GraphView\uff082D&nbsp;\u56fe\u7eb8\uff09\u548c&nbsp;ht.graph3d.Graph3dView\uff083D&nbsp;\u573a\u666f\uff09\u4e2d\uff0c\u63d0\u4f9b\u4e86&nbsp;isNoteVisible&nbsp;\u548c&nbsp;isLabelVisible&nbsp;\u65b9\u6cd5\u7528\u4e8e\u63a7\u5236&nbsp;label&nbsp;\u4e0e&nbsp;note&nbsp;\u7684\u663e\u793a\u903b\u8f91\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>Label \u4e0e Note \u52a8\u6001\u63a7\u5236<\/strong><br \/>\u5728&nbsp;2D&nbsp;\u56fe\u7eb8\u4e2d\uff0c\u9ed8\u8ba4\u5f53\u56fe\u7eb8\u7f29\u653e\u503c\uff08zoom\uff09\u5c0f\u4e8e&nbsp;0.15&nbsp;\u65f6\uff0c\u4f1a\u81ea\u52a8\u9690\u85cf\u6240\u6709&nbsp;label&nbsp;\u548c&nbsp;note\u3002\u5982\u9700\u81ea\u5b9a\u4e49\u903b\u8f91\uff0c\u53ef\u91cd\u5199\u8fd9\u4e24\u4e2a\u65b9\u6cd5\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>view.isLabelVisible = function (data) {\n    return this.getZoom() > 1;\n};<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7638,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/06-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/06-1.gif\" alt=\"\" class=\"wp-image-7638\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7639,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/07-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/07-1.gif\" alt=\"\" class=\"wp-image-7639\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>Icons \u52a8\u6001\u63a7\u5236<\/strong><br \/>\u901a\u8fc7\u76d1\u542c\u753b\u5e03\u7f29\u653e\u4e8b\u4ef6\uff0c\u52a8\u6001\u63a7\u5236\u56fe\u6807\u53ef\u89c1\u6027\uff0c\u51cf\u5c11\u975e\u5fc5\u8981\u6e32\u67d3\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>view.mp(e =&gt; {\n    if (e.property === 'zoom') {\n        const visible = e.newValue &gt; 1;\n        if (visible !== g2d._iconVisible) {\n            g2d._iconVisible = visible;\n            g2d.dm().toDatas().each(data =&gt; {\n                if (data.s('icons')) {\n                    for (let key in data.s('icons')) {\n                        data.s('icons')&#91;key].visible = visible;\n                    }\n                    data.iv();\n                }\n            });\n        }\n    }\n});<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7640,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/08-1.gif\"><img loading=\"lazy\" width=\"640\" height=\"316\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/08-1.gif\" alt=\"\" class=\"wp-image-7640\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading {\"level\":4} --><\/p>\n<h4><strong>02<\/strong> <strong>\u57fa\u4e8e\u56fe\u5c42\u7ba1\u7406\u7684\u6279\u91cf\u63a7\u5236<\/strong><\/h4>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728\u67d0\u4e9b\u7279\u6b8a\u573a\u666f\u4e0b\uff08\u5982\u9644\u52a0\u4fe1\u606f\u56fe\u6807\u9700\u663e\u793a\u5728\u975e\u5e38\u89c4\u4f4d\u7f6e\uff09\uff0c\u6807\u51c6\u65b9\u5f0f\u65e0\u6cd5\u6ee1\u8db3\u9700\u6c42\uff0c\u53ef\u91c7\u7528\u66f4\u7075\u6d3b\u7684\u65b9\u6848\uff1a\u76f4\u63a5\u5c06&nbsp;ht.Node&nbsp;\u653e\u7f6e\u5728\u8fde\u7ebf\u9644\u8fd1\uff0c\u5e76\u53ef\u8bbe\u7f6e\u5438\u9644\u4e8e\u8fde\u7ebf\u76ee\u6807 \/ \u8d77\u59cb\u8282\u70b9\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>node.setHost(target\/source)<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5bf9\u6b64\u7c7b\u9644\u52a0\u4fe1\u606f\u8282\u70b9\uff0c\u540c\u6837\u53ef\u6839\u636e\u7f29\u653e\u7a0b\u5ea6\u63a7\u5236\u663e\u793a\uff0c\u5b9e\u73b0\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>\u521b\u5efa\u81ea\u5b9a\u4e49\u56fe\u5c42<\/strong><\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>const layer = g2d.getLayers();\nlayer.push({\n    \"name\": \"newLayer\",\n    \"visible\": true,\n    \"selectable\": true,\n    \"movable\": true,\n    \"editable\": true\n});<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>\u7ed1\u5b9a\u9644\u52a0\u4fe1\u606f\u8282\u70b9\u81f3\u56fe\u5c42<\/strong><\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>node.setLayer('newLayer');<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li><strong>\u6839\u636e\u7f29\u653e\u63a7\u5236\u56fe\u5c42\u53ef\u89c1\u6027<\/strong><\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>g2d.mp(e =&gt; {\n    if (e.property === 'zoom') {\n        const visible = e.newValue &gt; 1;\n        if (visible !== g2d._layerVisible) {\n            g2d._layerVisible = visible;\n            const layer = g2d.getLayers();\n            layer&#91;1].visible = visible;\n        }\n    }\n});<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:image {\"align\":\"center\",\"id\":7641,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/09-1.gif\"><img loading=\"lazy\" width=\"801\" height=\"395\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/09-1.gif\" alt=\"\" class=\"wp-image-7641\"\/><\/a><\/figure>\n<\/div>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading {\"level\":4} --><\/p>\n<h4><strong>03<\/strong> <strong>\u6d77\u91cf\u8fde\u7ebf\u4f18\u5316\uff1aht.Shape \u5408\u5e76\u6e32\u67d3<\/strong><\/h4>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728\u5b58\u5728\u5927\u91cf\u8fde\u7ebf\u7684\u573a\u666f\u4e2d\uff0c\u8fc7\u591a&nbsp;ht.Edge&nbsp;\u5b9e\u4f8b\u4f1a\u663e\u8457\u964d\u4f4e\u6e32\u67d3\u6548\u7387\u3002\u53ef\u901a\u8fc7&nbsp;ht.Shape&nbsp;\u5bf9\u8c61\u5408\u5e76\u591a\u6761\u8fde\u7ebf\u8def\u5f84\uff0c\u7edf\u4e00\u6e32\u67d3\u4ee5\u63d0\u5347\u5e27\u7387\u4e0e\u4ea4\u4e92\u6d41\u7545\u5ea6\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u5b9e\u73b0\u903b\u8f91<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li>\u904d\u5386\u6570\u636e\u6a21\u578b\uff0c\u7b5b\u9009\u6240\u6709\u8fde\u7ebf\u5bf9\u8c61\uff1b<\/li>\n<li>\u63d0\u53d6\u5404\u8fde\u7ebf\u8d77\u70b9\u3001\u62d0\u70b9\u4e0e\u7ec8\u70b9\u5750\u6807\uff1b<\/li>\n<li>\u6784\u5efa\u7edf\u4e00\u8def\u5f84\u5e76\u8d4b\u503c\u7ed9&nbsp;ht.Shape\uff1b<\/li>\n<li>\u9690\u85cf\u539f\u8fde\u7ebf\uff0c\u4f7f\u7528&nbsp;Shape&nbsp;\u66ff\u4ee3\u6e32\u67d3\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u6838\u5fc3\u4ee3\u7801<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code --><\/p>\n<pre class=\"wp-block-code\"><code>\/\/ \u8fc7\u6ee4\u6570\u636e\u6a21\u578b\uff0c\u83b7\u53d6\u6240\u6709 edges\nconst edges = dm.toDatas((d) =&gt; {\n    return d.getClassName() === 'ht.Edge'\n})\n\/\/ \u521b\u5efa ht.Shape \u8282\u70b9\nconst shape = new ht.Shape();\nlet points = &#91;];\nlet segments = &#91;];\nlet edgeColor = edges.get(0).s('edge.color'),\n    edgeWidth = edges.get(0).s('edge.width');\n\n\/\/ \u904d\u5386\u6240\u6709\u7684 edge\uff0c\u83b7\u53d6\u70b9\u4f4d\u4fe1\u606f\nedges.each((edge) =&gt; {\n    const edgeInfo = view.getEdgeInfo(edge);\n    if (!edgeInfo) return;\n    let edgePoints = &#91;];\n    edgePoints.push(edgeInfo.sourcePoint);\n    if (edgeInfo.points) {\n        edgePoints = edgePoints.concat(edgeInfo.points.toArray());\n    }\n    edgePoints.push(edgeInfo.targetPoint);\n\n    points = points.concat(edgePoints);\n    edgePoints.forEach((item, i) =&gt; {\n        segments.push(i === 0 ? 1 : 2);\n    })\n    edge.s('2d.visible', false) \/\/ \u5c06 edge \u8bbe\u7f6e\u4e3a\u4e0d\u53ef\u89c1\n})\n\/\/ \u8bbe\u7f6e shape \u7684\u70b9\u4f4d\u548c\u6837\u5f0f\nshape.setPoints(points)\nshape.setSegments(segments);\nshape.s({\n    \"shape.background\": null,\n    \"shape.border.width\": edgeWidth,\n    \"shape.border.color\": edgeColor\n})\ndm.add(shape);<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong><em>\u25a0<\/em><\/strong> <strong>\u6027\u80fd\u5bf9\u6bd4<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5728\u7ea6&nbsp;2048&nbsp;\u6761\u8fde\u7ebf\u7684\u6d4b\u8bd5\u573a\u666f\u4e2d\uff0c\u5408\u5e76\u6e32\u67d3\u53ef\u663e\u8457\u63d0\u5347\u9ad8\u5bc6\u8fde\u7ebf\u573a\u666f\u4e0b\u7684\u8fd0\u884c\u6027\u80fd\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":7642,\"sizeSlug\":\"full\",\"linkDestination\":\"media\"} --><\/p>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/10.webp\"><img loading=\"lazy\" width=\"1080\" height=\"560\" src=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2026\/07\/10.webp\" alt=\"\" class=\"wp-image-7642\"\/><\/a><figcaption>\u5de6\u4e3a ht.Shape | \u53f3\u4e3a ht.Edge<\/figcaption><\/figure>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>\u603b\u7ed3<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u672c\u6587\u4ecb\u7ecd\u4e86&nbsp;HT&nbsp;\u5e73\u53f0\u4e0b\u62d3\u6251\u56fe\u8fde\u7ebf\u4fe1\u606f\u7684\u6807\u51c6\u5316\u5c55\u793a\u65b9\u6848\uff0c\u4ee5\u53ca\u9488\u5bf9\u5927\u89c4\u6a21\u62d3\u6251\u573a\u666f\u7684\u6027\u80fd\u4f18\u5316\u7b56\u7565\uff1a<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul>\n<li>\u57fa\u7840\u4fe1\u606f\u53ef\u901a\u8fc7&nbsp;label\u3001note&nbsp;\u5feb\u901f\u5b9e\u73b0\u6587\u672c\u6807\u6ce8\uff1b<\/li>\n<li>\u590d\u6742\u56fe\u6807\u4e0e\u6d41\u5411\u4fe1\u606f\u53ef\u901a\u8fc7&nbsp;icons&nbsp;\u6216\u81ea\u5b9a\u4e49\u8282\u70b9\u6269\u5c55\uff1b<\/li>\n<li>\u5927\u89c4\u6a21\u89c6\u56fe\u91c7\u7528\u81ea\u9002\u5e94\u7f29\u653e\u6e32\u67d3\uff0c\u6839\u636e\u7f29\u653e\u52a8\u6001\u63a7\u5236\u5143\u7d20\u4e0e\u56fe\u5c42\u663e\u9690\uff1b<\/li>\n<li>\u6d77\u91cf\u8fde\u7ebf\u573a\u666f\u4f7f\u7528&nbsp;ht.Shape&nbsp;\u5408\u5e76\u8def\u5f84\uff0c\u964d\u4f4e\u5b9e\u4f8b\u6570\u91cf\uff0c\u63d0\u5347\u6e32\u67d3\u6548\u7387\u3002<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u53ef\u7ed3\u5408\u9879\u76ee\u4e1a\u52a1\u9700\u6c42\u3001\u89c6\u56fe\u590d\u6742\u5ea6\u4e0e\u6027\u80fd\u6307\u6807\uff0c\u7075\u6d3b\u9009\u7528\u6216\u7ec4\u5408\u4f7f\u7528\u4e0a\u8ff0\u65b9\u6848\uff0c\u5b9e\u73b0\u53ef\u89c6\u5316\u6548\u679c\u4e0e\u8fd0\u884c\u6548\u7387\u7684\u6700\u4f18\u5e73\u8861\u3002<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n","protected":false},"author":2,"featured_media":7646,"comment_status":"closed","ping_status":"","sticky":true,"template":"","format":"standard","meta":[],"categories":[1],"tags":[7,9,909,20,912,831,913,911,25,724],"_links":{"self":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/7633"}],"collection":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/comments?post=7633"}],"version-history":[{"count":6,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/7633\/revisions"}],"predecessor-version":[{"id":7650,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/7633\/revisions\/7650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media\/7646"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=7633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=7633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=7633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}