@antv/g6
Version:
graph visualization frame work
1 lines • 39.4 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-5e1179c0e8518e80338ca6a7c5d599f1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#图形-shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"图形 shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"图形 Shape","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":12,"offset":12},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":12,"offset":12},"indent":[]},"data":{"id":"图形-shape","htmlAttributes":{"id":"图形-shape"},"hProperties":{"id":"图形-shape"}}},{"type":"paragraph","children":[{"type":"text","value":"Shape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。它一般与 G6 中的节点、边相关。G6 中的每一种节点或边由一个或多个 Shape 组成。","position":{"start":{"line":3,"column":1,"offset":13},"end":{"line":3,"column":79,"offset":91},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":13},"end":{"line":3,"column":79,"offset":91},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"例如下图（左）的节点包含了一个圆形图形；下图（中）的节点含有有一个圆形和一个文本图形；下图（右）的节点中含有 5 个圆形（蓝绿色的圆和上下左右四个锚点）、一个文本图形。但每种节点和边都会有自己的唯一关键图形 keyShape，下图中三个节点的 keyShape 都是蓝绿色的圆，keyShape 主要用于交互检测、样式随","position":{"start":{"line":5,"column":1,"offset":93},"end":{"line":5,"column":161,"offset":253},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/fqnn9w","children":[{"type":"text","value":"状态","position":{"start":{"line":5,"column":162,"offset":254},"end":{"line":5,"column":164,"offset":256},"indent":[]}}],"position":{"start":{"line":5,"column":161,"offset":253},"end":{"line":5,"column":203,"offset":295},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"自动更新等，见 ","position":{"start":{"line":5,"column":203,"offset":295},"end":{"line":5,"column":211,"offset":303},"indent":[]}},{"type":"link","title":null,"url":"#UNCAz","children":[{"type":"text","value":"keyShape","position":{"start":{"line":5,"column":212,"offset":304},"end":{"line":5,"column":220,"offset":312},"indent":[]}}],"position":{"start":{"line":5,"column":211,"offset":303},"end":{"line":5,"column":229,"offset":321},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":5,"column":229,"offset":321},"end":{"line":5,"column":230,"offset":322},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":5,"column":230,"offset":322},"end":{"line":5,"column":236,"offset":328},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570860282365-a580467a-9843-4aa5-a016-d73dff38fc0a.png#align=left&display=inline&height=68&name=image.png&originHeight=136&originWidth=138&search=&size=14236&status=done&width=69","alt":"image.png","position":{"start":{"line":5,"column":236,"offset":328},"end":{"line":5,"column":474,"offset":566},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":5,"column":474,"offset":566},"end":{"line":5,"column":480,"offset":572},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570860291602-5729dfa6-4c25-4547-82f8-2d388422df67.png#align=left&display=inline&height=85&name=image.png&originHeight=170&originWidth=150&search=&size=16796&status=done&width=75","alt":"image.png","position":{"start":{"line":5,"column":480,"offset":572},"end":{"line":5,"column":718,"offset":810},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":5,"column":718,"offset":810},"end":{"line":5,"column":724,"offset":816},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570859851766-0358416c-65d1-4637-93d1-e5cf12017bc8.png#align=left&display=inline&height=94&name=image.png&originHeight=188&originWidth=196&search=&size=24941&status=done&width=98","alt":"image.png","position":{"start":{"line":5,"column":724,"offset":816},"end":{"line":5,"column":962,"offset":1054},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":93},"end":{"line":5,"column":962,"offset":1054},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"（左）只含有一个圆形图形的节点，keyShape 是该圆形。（中）含有圆形和文本图形的节点，keyShape 是圆形。（右）含有主要圆形、文本、上下左右四个小圆形的节点，keyShape 是圆形。","position":{"start":{"line":6,"column":3,"offset":1057},"end":{"line":6,"column":101,"offset":1155},"indent":[]}}],"position":{"start":{"line":6,"column":3,"offset":1057},"end":{"line":6,"column":101,"offset":1155},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":1055},"end":{"line":6,"column":101,"offset":1155},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"G6 使用不同的 shape 及组合，设计了多种内置的节点和边。G6 内置节点的有 'circle'， 'rect'，'ellipse'，...（详见 ","position":{"start":{"line":9,"column":1,"offset":1158},"end":{"line":9,"column":77,"offset":1234},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/internal-node","children":[{"type":"text","value":"内置节点","position":{"start":{"line":9,"column":78,"offset":1235},"end":{"line":9,"column":82,"offset":1239},"indent":[]}}],"position":{"start":{"line":9,"column":77,"offset":1234},"end":{"line":9,"column":128,"offset":1285},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"）；内置边的有 'line'，'polyline'，'cubic'，...（详见 ","position":{"start":{"line":9,"column":128,"offset":1285},"end":{"line":9,"column":169,"offset":1326},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/internal-edge","children":[{"type":"text","value":"内置边","position":{"start":{"line":9,"column":170,"offset":1327},"end":{"line":9,"column":173,"offset":1330},"indent":[]}}],"position":{"start":{"line":9,"column":169,"offset":1326},"end":{"line":9,"column":219,"offset":1376},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"）。","position":{"start":{"line":9,"column":219,"offset":1376},"end":{"line":9,"column":221,"offset":1378},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":1158},"end":{"line":9,"column":221,"offset":1378},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"除了使用内置的节点和边外，G6 还允许用户通过自己搭配和组合 Shape 进行节点和边的自定义，详见 ","position":{"start":{"line":11,"column":1,"offset":1380},"end":{"line":11,"column":52,"offset":1431},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/self-node","children":[{"type":"text","value":"自定义节点","position":{"start":{"line":11,"column":53,"offset":1432},"end":{"line":11,"column":58,"offset":1437},"indent":[]}}],"position":{"start":{"line":11,"column":52,"offset":1431},"end":{"line":11,"column":100,"offset":1479},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 和 ","position":{"start":{"line":11,"column":100,"offset":1479},"end":{"line":11,"column":103,"offset":1482},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/self-edge","children":[{"type":"text","value":"自定义边","position":{"start":{"line":11,"column":104,"offset":1483},"end":{"line":11,"column":108,"offset":1487},"indent":[]}}],"position":{"start":{"line":11,"column":103,"offset":1482},"end":{"line":11,"column":150,"offset":1529},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":11,"column":150,"offset":1529},"end":{"line":11,"column":151,"offset":1530},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":1380},"end":{"line":11,"column":151,"offset":1530},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#keyshape","title":null,"children":[],"data":{"hProperties":{"aria-label":"keyshape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"KeyShape","position":{"start":{"line":13,"column":4,"offset":1535},"end":{"line":13,"column":12,"offset":1543},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":1532},"end":{"line":13,"column":12,"offset":1543},"indent":[]},"data":{"id":"keyshape","htmlAttributes":{"id":"keyshape"},"hProperties":{"id":"keyshape"}}},{"type":"paragraph","children":[{"type":"text","value":"如上所述，每一种节点和边都有一个唯一的关键图形 keyShape。keyShape 是在节点的 draw 方法中返回的图形对象，用于","position":{"start":{"line":14,"column":1,"offset":1544},"end":{"line":14,"column":67,"offset":1610},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"确定节点的包围盒（Bounding Box） —— bbox（x, y, width, height)","position":{"start":{"line":14,"column":69,"offset":1612},"end":{"line":14,"column":120,"offset":1663},"indent":[]}}],"position":{"start":{"line":14,"column":67,"offset":1610},"end":{"line":14,"column":122,"offset":1665},"indent":[]}},{"type":"text","value":" ，从而计算相关边的连入点（与相关边的交点）。若 keyShape 不同，节点与边的交点计算结果不同。 ","position":{"start":{"line":14,"column":122,"offset":1665},"end":{"line":14,"column":174,"offset":1717},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":1544},"end":{"line":14,"column":174,"offset":1717},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"示例 ","position":{"start":{"line":16,"column":5,"offset":1723},"end":{"line":16,"column":8,"offset":1726},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":1719},"end":{"line":16,"column":8,"offset":1726},"indent":[]},"data":{"id":"示例","htmlAttributes":{"id":"示例"},"hProperties":{"id":"示例"}}},{"type":"paragraph","children":[{"type":"text","value":"本例中的一个节点由一个 rect 图形和一个带灰色描边、填充透明的 circle 图形构成。","position":{"start":{"line":17,"column":1,"offset":1727},"end":{"line":17,"column":47,"offset":1773},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":1727},"end":{"line":17,"column":47,"offset":1773},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"当节点的 keyShape 为 circle 时：","position":{"start":{"line":19,"column":3,"offset":1777},"end":{"line":19,"column":28,"offset":1802},"indent":[]}}],"position":{"start":{"line":19,"column":3,"offset":1777},"end":{"line":19,"column":28,"offset":1802},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":1775},"end":{"line":19,"column":28,"offset":1802},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":1775},"end":{"line":19,"column":28,"offset":1802},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/244306/1561033286841-e52f2489-4c31-4235-9d3c-0dfcc95ff4c6.png#align=left&display=inline&height=145&name=%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-13%20%E4%B8%8A%E5%8D%8811.31.07.png&originHeight=166&originWidth=392&search=&size=8734&status=done&width=342","alt":"2019-06-13.07.png","position":{"start":{"line":21,"column":1,"offset":1804},"end":{"line":21,"column":321,"offset":2124},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":1804},"end":{"line":21,"column":321,"offset":2124},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"当节点的 keyShape 为 rect 时：","position":{"start":{"line":23,"column":3,"offset":2128},"end":{"line":23,"column":26,"offset":2151},"indent":[]}}],"position":{"start":{"line":23,"column":3,"offset":2128},"end":{"line":23,"column":26,"offset":2151},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":2126},"end":{"line":23,"column":26,"offset":2151},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":2126},"end":{"line":23,"column":26,"offset":2151},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/244306/1561033286856-823a0f11-a768-456f-b510-d823799d1bfe.png#align=left&display=inline&height=150&name=%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-13%20%E4%B8%8A%E5%8D%8811.31.56.png&originHeight=180&originWidth=432&search=&size=8968&status=done&width=359","alt":"2019-06-13.png","position":{"start":{"line":25,"column":1,"offset":2153},"end":{"line":25,"column":318,"offset":2470},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":2153},"end":{"line":25,"column":318,"offset":2470},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#shape-的生命周期","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape 的生命周期 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"Shape 的生命周期","position":{"start":{"line":28,"column":4,"offset":2476},"end":{"line":28,"column":15,"offset":2487},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":2473},"end":{"line":28,"column":15,"offset":2487},"indent":[]},"data":{"id":"shape-的生命周期","htmlAttributes":{"id":"shape-的生命周期"},"hProperties":{"id":"shape-的生命周期"}}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"当用户需要","position":{"start":{"line":29,"column":3,"offset":2490},"end":{"line":29,"column":8,"offset":2495},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/self-node","children":[{"type":"text","value":"自定义节点","position":{"start":{"line":29,"column":9,"offset":2496},"end":{"line":29,"column":14,"offset":2501},"indent":[]}}],"position":{"start":{"line":29,"column":8,"offset":2495},"end":{"line":29,"column":56,"offset":2543},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"和","position":{"start":{"line":29,"column":56,"offset":2543},"end":{"line":29,"column":57,"offset":2544},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/self-edge","children":[{"type":"text","value":"自定义边","position":{"start":{"line":29,"column":58,"offset":2545},"end":{"line":29,"column":62,"offset":2549},"indent":[]}}],"position":{"start":{"line":29,"column":57,"offset":2544},"end":{"line":29,"column":104,"offset":2591},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"时，需要了解 Shape 的生命周期。使用内置节点和边则可以跳过这一部分内容。","position":{"start":{"line":29,"column":104,"offset":2591},"end":{"line":29,"column":143,"offset":2630},"indent":[]}}],"position":{"start":{"line":29,"column":3,"offset":2490},"end":{"line":29,"column":143,"offset":2630},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":2488},"end":{"line":29,"column":143,"offset":2630},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"从整体来看，Shape 的生命周期分为：","position":{"start":{"line":31,"column":1,"offset":2632},"end":{"line":31,"column":21,"offset":2652},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":2632},"end":{"line":31,"column":21,"offset":2652},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"初始化渲染；","position":{"start":{"line":33,"column":3,"offset":2656},"end":{"line":33,"column":9,"offset":2662},"indent":[]}}],"position":{"start":{"line":33,"column":3,"offset":2656},"end":{"line":33,"column":9,"offset":2662},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":2654},"end":{"line":33,"column":9,"offset":2662},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"更新；","position":{"start":{"line":34,"column":3,"offset":2665},"end":{"line":34,"column":6,"offset":2668},"indent":[]}}],"position":{"start":{"line":34,"column":3,"offset":2665},"end":{"line":34,"column":6,"offset":2668},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":2663},"end":{"line":34,"column":6,"offset":2668},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"操作；","position":{"start":{"line":35,"column":3,"offset":2671},"end":{"line":35,"column":6,"offset":2674},"indent":[]}}],"position":{"start":{"line":35,"column":3,"offset":2671},"end":{"line":35,"column":6,"offset":2674},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":2669},"end":{"line":35,"column":6,"offset":2674},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"销毁。","position":{"start":{"line":36,"column":3,"offset":2677},"end":{"line":36,"column":6,"offset":2680},"indent":[]}}],"position":{"start":{"line":36,"column":3,"offset":2677},"end":{"line":36,"column":6,"offset":2680},"indent":[]}}],"position":{"start":{"line":36,"column":1,"offset":2675},"end":{"line":36,"column":6,"offset":2680},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":2654},"end":{"line":36,"column":6,"offset":2680},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"Shape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可：","position":{"start":{"line":38,"column":1,"offset":2682},"end":{"line":38,"column":84,"offset":2765},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":2682},"end":{"line":38,"column":84,"offset":2765},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"绘制：从无到有的绘制 Shape 及文本；","position":{"start":{"line":40,"column":3,"offset":2769},"end":{"line":40,"column":24,"offset":2790},"indent":[]}}],"position":{"start":{"line":40,"column":3,"offset":2769},"end":{"line":40,"column":24,"offset":2790},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":2767},"end":{"line":40,"column":24,"offset":2790},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"更新：数据发生改变导致 Shape 及文本发生变化；","position":{"start":{"line":41,"column":3,"offset":2793},"end":{"line":41,"column":29,"offset":2819},"indent":[]}}],"position":{"start":{"line":41,"column":3,"offset":2793},"end":{"line":41,"column":29,"offset":2819},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":2791},"end":{"line":41,"column":29,"offset":2819},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"操作：给 Shape 添加状态，如：selected，active 等。","position":{"start":{"line":42,"column":3,"offset":2822},"end":{"line":42,"column":39,"offset":2858},"indent":[]}}],"position":{"start":{"line":42,"column":3,"offset":2822},"end":{"line":42,"column":39,"offset":2858},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":2820},"end":{"line":42,"column":39,"offset":2858},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":2767},"end":{"line":42,"column":39,"offset":2858},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"所以我们在设计自定义节点和边时，定义了三个方法，若需要自定义节点和边，需要有选择性地复写它们：","position":{"start":{"line":44,"column":1,"offset":2860},"end":{"line":44,"column":48,"offset":2907},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":2860},"end":{"line":44,"column":48,"offset":2907},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">draw(cfg, group)</code>","position":{"start":{"line":46,"column":3,"offset":2911},"end":{"line":46,"column":21,"offset":2929},"indent":[]}},{"type":"text","value":": 绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器；","position":{"start":{"line":46,"column":21,"offset":2929},"end":{"line":46,"column":52,"offset":2960},"indent":[]}}],"position":{"start":{"line":46,"column":3,"offset":2911},"end":{"line":46,"column":52,"offset":2960},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":2909},"end":{"line":46,"column":52,"offset":2960},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">update(cfg, n)</code>","position":{"start":{"line":47,"column":3,"offset":2963},"end":{"line":47,"column":19,"offset":2979},"indent":[]}},{"type":"text","value":": 更新，更新时的配置项（更新的字段和原始字段的合并）和节点对象；","position":{"start":{"line":47,"column":19,"offset":2979},"end":{"line":47,"column":52,"offset":3012},"indent":[]}}],"position":{"start":{"line":47,"column":3,"offset":2963},"end":{"line":47,"column":52,"offset":3012},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":2961},"end":{"line":47,"column":52,"offset":3012},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">setState(name, value, item)</code>","position":{"start":{"line":48,"column":3,"offset":3015},"end":{"line":48,"column":32,"offset":3044},"indent":[]}},{"type":"text","value":": 设置节点状态。","position":{"start":{"line":48,"column":32,"offset":3044},"end":{"line":48,"column":41,"offset":3053},"indent":[]}}],"position":{"start":{"line":48,"column":3,"offset":3015},"end":{"line":48,"column":41,"offset":3053},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":3013},"end":{"line":48,"column":41,"offset":3053},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":2909},"end":{"line":48,"column":41,"offset":3053},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"关于自定义Shape更多的方法请","position":{"start":{"line":50,"column":1,"offset":3055},"end":{"line":50,"column":17,"offset":3071},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/shape-api","children":[{"type":"text","value":"参考 Shape API 文档","position":{"start":{"line":50,"column":18,"offset":3072},"end":{"line":50,"column":33,"offset":3087},"indent":[]}}],"position":{"start":{"line":50,"column":17,"offset":3071},"end":{"line":50,"column":75,"offset":3129},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":50,"column":75,"offset":3129},"end":{"line":50,"column":76,"offset":3130},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":3055},"end":{"line":50,"column":76,"offset":3130},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#anchorpoint","title":null,"children":[],"data":{"hProperties":{"aria-label":"anchorpoint permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"anchorPoint","position":{"start":{"line":52,"column":4,"offset":3135},"end":{"line":52,"column":15,"offset":3146},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":3132},"end":{"line":52,"column":15,"offset":3146},"indent":[]},"data":{"id":"anchorpoint","htmlAttributes":{"id":"anchorpoint"},"hProperties":{"id":"anchorpoint"}}},{"type":"paragraph","children":[{"type":"text","value":"节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个","position":{"start":{"line":54,"column":1,"offset":3148},"end":{"line":54,"column":86,"offset":3233},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/shape-crycle","children":[{"type":"text","value":"图形 shape","position":{"start":{"line":54,"column":87,"offset":3234},"end":{"line":54,"column":95,"offset":3242},"indent":[]}}],"position":{"start":{"line":54,"column":86,"offset":3233},"end":{"line":54,"column":140,"offset":3287},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 中，连接点的位置如下图所示，x 和 y 方向上范围都是 ","position":{"start":{"line":54,"column":140,"offset":3287},"end":{"line":54,"column":169,"offset":3316},"indent":[]}},{"type":"linkReference","identifier":"0, 1","label":"0, 1","referenceType":"shortcut","children":[{"type":"text","value":"0, 1","position":{"start":{"line":54,"column":170,"offset":3317},"end":{"line":54,"column":174,"offset":3321},"indent":[]}}],"position":{"start":{"line":54,"column":169,"offset":3316},"end":{"line":54,"column":175,"offset":3322},"indent":[]}},{"type":"text","value":"：","position":{"start":{"line":54,"column":175,"offset":3322},"end":{"line":54,"column":176,"offset":3323},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":54,"column":176,"offset":3323},"end":{"line":54,"column":182,"offset":3329},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":54,"column":182,"offset":3329},"end":{"line":55,"column":1,"offset":3330},"indent":[1]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571036680989-45a97f57-c247-4408-8b38-37c1e0d6c8c7.png#align=left&display=inline&height=190&name=image.png&originHeight=654&originWidth=1364&search=&size=204253&status=done&width=396' width='600' height='300' />","position":{"start":{"line":55,"column":1,"offset":3330},"end":{"line":55,"column":268,"offset":3597},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":3148},"end":{"line":55,"column":268,"offset":3597},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。","position":{"start":{"line":57,"column":1,"offset":3599},"end":{"line":57,"column":87,"offset":3685},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":3599},"end":{"line":57,"column":87,"offset":3685},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"边可以通过指定 ","position":{"start":{"line":59,"column":1,"offset":3687},"end":{"line":59,"column":9,"offset":3695},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">sourceAnchor</code>","position":{"start":{"line":59,"column":9,"offset":3695},"end":{"line":59,"column":23,"offset":3709},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":59,"column":23,"offset":3709},"end":{"line":59,"column":26,"offset":3712},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">targetAnchor</code>","position":{"start":{"line":59,"column":26,"offset":3712},"end":{"line":59,"column":40,"offset":3726},"indent":[]}},{"type":"text","value":" 分别选择起始点、结束点的 anchorPoint。","position":{"start":{"line":59,"column":40,"offset":3726},"end":{"line":59,"column":66,"offset":3752},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">sourceAnchor</code>","position":{"start":{"line":59,"column":66,"offset":3752},"end":{"line":59,"column":80,"offset":3766},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":59,"column":80,"offset":3766},"end":{"line":59,"column":83,"offset":3769},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">targetAnchor</code>","position":{"start":{"line":59,"column":83,"offset":3769},"end":{"line":59,"column":97,"offset":3783},"indent":[]}},{"type":"text","value":" 取的值是相对应节点上 anchorPoints 数组的索引值。","position":{"start":{"line":59,"column":97,"offset":3783},"end":{"line":59,"column":129,"offset":3815},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":3687},"end":{"line":59,"column":129,"offset":3815},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"下面数据演示了如何在节点上配置连接点、在边上指定连接点：","position":{"start":{"line":61,"column":1,"offset":3817},"end":{"line":61,"column":29,"offset":3845},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":3817},"end":{"line":61,"column":29,"offset":3845},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该节点可选的连接点集合，该点有两个可选的连接点</span>\n anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0.5</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">400</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该节点可选的连接点集合，该点有两个可选的连接点</span>\n anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0.5</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该边连入 source 点的第 0 个 anchorPoint，</span>\n sourceAnchor<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该边连入 target 点的第 0 个 anchorPoint，</span>\n targetAnchor<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n endArrow<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该边连入 source 点的第 1 个 anchorPoint，</span>\n sourceAnchor<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 该边连入 source 点的第 1 个 anchorPoint，</span>\n targetAnchor<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n endArrow<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":62,"column":1,"offset":3846},"end":{"line":109,"column":4,"offset":4821},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":110,"column":1,"offset":4822}}}}