{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-d548ee9d4916aa08041827e6ae16aa5e-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"节点与边在视觉上的层级涉及到了它们相对应的","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":22,"offset":22},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/vy5fzi","children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":23,"offset":23},"end":{"line":2,"column":33,"offset":33},"indent":[]}}],"position":{"start":{"line":2,"column":22,"offset":22},"end":{"line":2,"column":72,"offset":72},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。本文提到的所有分组 Group 都为 G6 的 ","position":{"start":{"line":2,"column":72,"offset":72},"end":{"line":2,"column":97,"offset":97},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/vy5fzi","children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":98,"offset":98},"end":{"line":2,"column":108,"offset":108},"indent":[]}}],"position":{"start":{"line":2,"column":97,"offset":97},"end":{"line":2,"column":147,"offset":147},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，而非 G6 的 ","position":{"start":{"line":2,"column":147,"offset":147},"end":{"line":2,"column":156,"offset":156},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/inxeg8","children":[{"type":"text","value":"节点分组 Group","position":{"start":{"line":2,"column":157,"offset":157},"end":{"line":2,"column":167,"offset":167},"indent":[]}}],"position":{"start":{"line":2,"column":156,"offset":156},"end":{"line":2,"column":206,"offset":206},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，请注意区分这两种 Group，其区别在 ","position":{"start":{"line":2,"column":206,"offset":206},"end":{"line":2,"column":227,"offset":227},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/vy5fzi","children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":228,"offset":228},"end":{"line":2,"column":238,"offset":238},"indent":[]}}],"position":{"start":{"line":2,"column":227,"offset":227},"end":{"line":2,"column":277,"offset":277},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 中说明。","position":{"start":{"line":2,"column":277,"offset":277},"end":{"line":2,"column":282,"offset":282},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":282,"offset":282},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在 ","position":{"start":{"line":4,"column":1,"offset":284},"end":{"line":4,"column":3,"offset":286},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/vy5fzi","children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":4,"column":4,"offset":287},"end":{"line":4,"column":14,"offset":297},"indent":[]}}],"position":{"start":{"line":4,"column":3,"offset":286},"end":{"line":4,"column":53,"offset":336},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 ","position":{"start":{"line":4,"column":53,"offset":336},"end":{"line":4,"column":94,"offset":377},"indent":[]}},{"type":"html","value":"nodeGroup","position":{"start":{"line":4,"column":94,"offset":377},"end":{"line":4,"column":105,"offset":388},"indent":[]}},{"type":"text","value":" 的 group，所有的边属于同一个变量名为 ","position":{"start":{"line":4,"column":105,"offset":388},"end":{"line":4,"column":128,"offset":411},"indent":[]}},{"type":"html","value":"edgeGroup","position":{"start":{"line":4,"column":128,"offset":411},"end":{"line":4,"column":139,"offset":422},"indent":[]}},{"type":"text","value":" 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。","position":{"start":{"line":4,"column":139,"offset":422},"end":{"line":4,"column":198,"offset":481},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":284},"end":{"line":4,"column":198,"offset":481},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 ","position":{"start":{"line":6,"column":1,"offset":483},"end":{"line":6,"column":58,"offset":540},"indent":[]}},{"type":"html","value":"groupByTypes","position":{"start":{"line":6,"column":58,"offset":540},"end":{"line":6,"column":72,"offset":554},"indent":[]}},{"type":"text","value":" 以及节点和边的 ","position":{"start":{"line":6,"column":72,"offset":554},"end":{"line":6,"column":81,"offset":563},"indent":[]}},{"type":"html","value":"toFront()","position":{"start":{"line":6,"column":81,"offset":563},"end":{"line":6,"column":92,"offset":574},"indent":[]}},{"type":"text","value":" 与 ","position":{"start":{"line":6,"column":92,"offset":574},"end":{"line":6,"column":95,"offset":577},"indent":[]}},{"type":"html","value":"toBack()","position":{"start":{"line":6,"column":95,"offset":577},"end":{"line":6,"column":105,"offset":587},"indent":[]}},{"type":"text","value":" 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。","position":{"start":{"line":6,"column":105,"offset":587},"end":{"line":6,"column":176,"offset":658},"indent":[]}},{"type":"link","title":null,"url":"https://codepen.io/Yanyan-Wang/pen/GRRNzGN","children":[{"type":"text","value":"Demo 完整代码","position":{"start":{"line":6,"column":177,"offset":659},"end":{"line":6,"column":186,"offset":668},"indent":[]}}],"position":{"start":{"line":6,"column":176,"offset":658},"end":{"line":6,"column":231,"offset":713},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":6,"column":231,"offset":713},"end":{"line":6,"column":232,"offset":714},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":232,"offset":714},"end":{"line":6,"column":238,"offset":720},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1571627989063-367e9f35-8f06-4d75-a201-759add6e8a6f.gif#align=left&display=inline&height=210&name=highlight-edge-node.gif&originHeight=210&originWidth=206&search=&size=11193&status=done&width=206","alt":"highlight-edge-node.gif","position":{"start":{"line":6,"column":238,"offset":720},"end":{"line":6,"column":506,"offset":988},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":483},"end":{"line":6,"column":506,"offset":988},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"要实现上图效果，需要以下步骤：","position":{"start":{"line":8,"column":1,"offset":990},"end":{"line":8,"column":16,"offset":1005},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":990},"end":{"line":8,"column":16,"offset":1005},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 1：实例化图时配置 ","position":{"start":{"line":10,"column":3,"offset":1009},"end":{"line":10,"column":18,"offset":1024},"indent":[]}},{"type":"html","value":"groupByTypes","position":{"start":{"line":10,"column":18,"offset":1024},"end":{"line":10,"column":32,"offset":1038},"indent":[]}},{"type":"text","value":" 为 ","position":{"start":{"line":10,"column":32,"offset":1038},"end":{"line":10,"column":35,"offset":1041},"indent":[]}},{"type":"html","value":"false","position":{"start":{"line":10,"column":35,"offset":1041},"end":{"line":10,"column":42,"offset":1048},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":10,"column":42,"offset":1048},"end":{"line":10,"column":43,"offset":1049},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":1009},"end":{"line":10,"column":43,"offset":1049},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":1007},"end":{"line":10,"column":43,"offset":1049},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 2：将节点放置在边上层；","position":{"start":{"line":11,"column":3,"offset":1052},"end":{"line":11,"column":20,"offset":1069},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":1052},"end":{"line":11,"column":20,"offset":1069},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":1050},"end":{"line":11,"column":20,"offset":1069},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 3：监听鼠标事件并改变目标元素层级。","position":{"start":{"line":12,"column":3,"offset":1072},"end":{"line":12,"column":26,"offset":1095},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":1072},"end":{"line":12,"column":26,"offset":1095},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":1070},"end":{"line":12,"column":26,"offset":1095},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":1007},"end":{"line":12,"column":26,"offset":1095},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#","title":null,"children":[],"data":{"hProperties":{"aria-label":" permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":14,"column":1,"offset":1097},"end":{"line":14,"column":4,"offset":1100},"indent":[]},"data":{"id":"","htmlAttributes":{"id":""},"hProperties":{"id":""}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#前提代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"前提代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"前提代码","position":{"start":{"line":15,"column":4,"offset":1104},"end":{"line":15,"column":8,"offset":1108},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":1101},"end":{"line":15,"column":8,"offset":1108},"indent":[]},"data":{"id":"前提代码","htmlAttributes":{"id":"前提代码"},"hProperties":{"id":"前提代码"}}},{"type":"paragraph","children":[{"type":"text","value":"下面代码完成了引入 G6、数据设置、实例化图、渲染图的命令等。后文将修改下面这份代码中以达到上图高亮效果。","position":{"start":{"line":16,"column":1,"offset":1109},"end":{"line":16,"column":54,"offset":1162},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":1109},"end":{"line":16,"column":54,"offset":1162},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
// 数据源\nconst data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n    {\n      id: 'node2',\n      x: 150,\n      y: 150,\n      size: 20,\n    },\n    {\n      id: 'node3',\n      x: 150,\n      y: 250,\n      size: 20,\n    },\n    {\n      id: 'node4',\n      x: 150,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      id: 'edge0',\n      source: 'node0',\n      target: 'node1',\n    },\n    {\n      id: 'edge1',\n      source: 'node2',\n      target: 'node3',\n    },\n  ],\n};\n\n// 实例化图\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  // 为方便演示，加粗边\n  defaultEdge: {\n    style: {\n      lineWidth: 2,\n    },\n  },\n});\n\n// 读取数据\ngraph.data(data);\n// 渲染图\ngraph.render();\n
","position":{"start":{"line":17,"column":1,"offset":1163},"end":{"line":74,"column":4,"offset":1987},"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,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-1","title":null,"children":[],"data":{"hProperties":{"aria-label":" 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":76,"column":1,"offset":1989},"end":{"line":76,"column":4,"offset":1992},"indent":[]},"data":{"id":"-1","htmlAttributes":{"id":"-1"},"hProperties":{"id":"-1"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#step-1-实例化图时的配置","title":null,"children":[],"data":{"hProperties":{"aria-label":"step 1 实例化图时的配置 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Step 1 实例化图时的配置","position":{"start":{"line":77,"column":4,"offset":1996},"end":{"line":77,"column":19,"offset":2011},"indent":[]}}],"position":{"start":{"line":77,"column":1,"offset":1993},"end":{"line":77,"column":19,"offset":2011},"indent":[]},"data":{"id":"step-1-实例化图时的配置","htmlAttributes":{"id":"step-1-实例化图时的配置"},"hProperties":{"id":"step-1-实例化图时的配置"}}},{"type":"paragraph","children":[{"type":"html","value":"groupByTypes","position":{"start":{"line":78,"column":1,"offset":2012},"end":{"line":78,"column":15,"offset":2026},"indent":[]}},{"type":"text","value":" 是图的一个配置项，当其为默认值 ","position":{"start":{"line":78,"column":15,"offset":2026},"end":{"line":78,"column":32,"offset":2043},"indent":[]}},{"type":"html","value":"true","position":{"start":{"line":78,"column":32,"offset":2043},"end":{"line":78,"column":38,"offset":2049},"indent":[]}},{"type":"text","value":" 时，所有节点在一个名为 ","position":{"start":{"line":78,"column":38,"offset":2049},"end":{"line":78,"column":51,"offset":2062},"indent":[]}},{"type":"html","value":"nodeGroup","position":{"start":{"line":78,"column":51,"offset":2062},"end":{"line":78,"column":62,"offset":2073},"indent":[]}},{"type":"text","value":" 的分组，所有边在另一个名为 ","position":{"start":{"line":78,"column":62,"offset":2073},"end":{"line":78,"column":77,"offset":2088},"indent":[]}},{"type":"html","value":"edgeGroup","position":{"start":{"line":78,"column":77,"offset":2088},"end":{"line":78,"column":88,"offset":2099},"indent":[]}},{"type":"text","value":" 的分组，且 ","position":{"start":{"line":78,"column":88,"offset":2099},"end":{"line":78,"column":95,"offset":2106},"indent":[]}},{"type":"html","value":"nodeGroup","position":{"start":{"line":78,"column":95,"offset":2106},"end":{"line":78,"column":106,"offset":2117},"indent":[]}},{"type":"text","value":" 在 ","position":{"start":{"line":78,"column":106,"offset":2117},"end":{"line":78,"column":109,"offset":2120},"indent":[]}},{"type":"html","value":"edgeGroup","position":{"start":{"line":78,"column":109,"offset":2120},"end":{"line":78,"column":120,"offset":2131},"indent":[]}},{"type":"text","value":" 上层。将其设置为 ","position":{"start":{"line":78,"column":120,"offset":2131},"end":{"line":78,"column":130,"offset":2141},"indent":[]}},{"type":"html","value":"false","position":{"start":{"line":78,"column":130,"offset":2141},"end":{"line":78,"column":137,"offset":2148},"indent":[]}},{"type":"text","value":" 后，将不存在 ","position":{"start":{"line":78,"column":137,"offset":2148},"end":{"line":78,"column":145,"offset":2156},"indent":[]}},{"type":"html","value":"nodeGroup","position":{"start":{"line":78,"column":145,"offset":2156},"end":{"line":78,"column":156,"offset":2167},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":78,"column":156,"offset":2167},"end":{"line":78,"column":159,"offset":2170},"indent":[]}},{"type":"html","value":"edgeGroup","position":{"start":{"line":78,"column":159,"offset":2170},"end":{"line":78,"column":170,"offset":2181},"indent":[]}},{"type":"text","value":"，所有节点和边在同一个分组，它们的层级根据生成的顺序决定。","position":{"start":{"line":78,"column":170,"offset":2181},"end":{"line":78,"column":199,"offset":2210},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":2012},"end":{"line":78,"column":199,"offset":2210},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-2","title":null,"children":[],"data":{"hProperties":{"aria-label":" 2 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":80,"column":1,"offset":2212},"end":{"line":80,"column":4,"offset":2215},"indent":[]},"data":{"id":"-2","htmlAttributes":{"id":"-2"},"hProperties":{"id":"-2"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#参数描述","title":null,"children":[],"data":{"hProperties":{"aria-label":"参数描述 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"参数描述","position":{"start":{"line":81,"column":5,"offset":2220},"end":{"line":81,"column":9,"offset":2224},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":2216},"end":{"line":81,"column":9,"offset":2224},"indent":[]},"data":{"id":"参数描述","htmlAttributes":{"id":"参数描述"},"hProperties":{"id":"参数描述"}}},{"type":"table","align":[null,null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"名称","position":{"start":{"line":82,"column":3,"offset":2227},"end":{"line":82,"column":5,"offset":2229},"indent":[]}}],"position":{"start":{"line":82,"column":3,"offset":2227},"end":{"line":82,"column":5,"offset":2229},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"类型","position":{"start":{"line":82,"column":8,"offset":2232},"end":{"line":82,"column":10,"offset":2234},"indent":[]}}],"position":{"start":{"line":82,"column":8,"offset":2232},"end":{"line":82,"column":10,"offset":2234},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"默认值","position":{"start":{"line":82,"column":13,"offset":2237},"end":{"line":82,"column":16,"offset":2240},"indent":[]}}],"position":{"start":{"line":82,"column":13,"offset":2237},"end":{"line":82,"column":16,"offset":2240},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"描述","position":{"start":{"line":82,"column":19,"offset":2243},"end":{"line":82,"column":21,"offset":2245},"indent":[]}}],"position":{"start":{"line":82,"column":19,"offset":2243},"end":{"line":82,"column":21,"offset":2245},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":2225},"end":{"line":82,"column":23,"offset":2247},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"groupByTypes","position":{"start":{"line":84,"column":3,"offset":2276},"end":{"line":84,"column":15,"offset":2288},"indent":[]}}],"position":{"start":{"line":84,"column":3,"offset":2276},"end":{"line":84,"column":15,"offset":2288},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Boolean","position":{"start":{"line":84,"column":18,"offset":2291},"end":{"line":84,"column":25,"offset":2298},"indent":[]}}],"position":{"start":{"line":84,"column":18,"offset":2291},"end":{"line":84,"column":25,"offset":2298},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"true","position":{"start":{"line":84,"column":28,"offset":2301},"end":{"line":84,"column":32,"offset":2305},"indent":[]}}],"position":{"start":{"line":84,"column":28,"offset":2301},"end":{"line":84,"column":32,"offset":2305},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。","position":{"start":{"line":84,"column":35,"offset":2308},"end":{"line":84,"column":120,"offset":2393},"indent":[]}}],"position":{"start":{"line":84,"column":35,"offset":2308},"end":{"line":84,"column":120,"offset":2393},"indent":[]}}],"position":{"start":{"line":84,"column":1,"offset":2274},"end":{"line":84,"column":122,"offset":2395},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":2225},"end":{"line":84,"column":122,"offset":2395},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-3","title":null,"children":[],"data":{"hProperties":{"aria-label":" 3 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":87,"column":1,"offset":2398},"end":{"line":87,"column":4,"offset":2401},"indent":[]},"data":{"id":"-3","htmlAttributes":{"id":"-3"},"hProperties":{"id":"-3"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#使用方式","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方式 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方式","position":{"start":{"line":88,"column":5,"offset":2406},"end":{"line":88,"column":9,"offset":2410},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":2402},"end":{"line":88,"column":9,"offset":2410},"indent":[]},"data":{"id":"使用方式","htmlAttributes":{"id":"使用方式"},"hProperties":{"id":"使用方式"}}},{"type":"paragraph","children":[{"type":"text","value":"更改 前提代码 中实例化图部分代码，添加 ","position":{"start":{"line":89,"column":1,"offset":2411},"end":{"line":89,"column":22,"offset":2432},"indent":[]}},{"type":"html","value":"groupByTypes","position":{"start":{"line":89,"column":22,"offset":2432},"end":{"line":89,"column":36,"offset":2446},"indent":[]}},{"type":"text","value":" 配置项，并设置为 ","position":{"start":{"line":89,"column":36,"offset":2446},"end":{"line":89,"column":46,"offset":2456},"indent":[]}},{"type":"html","value":"false","position":{"start":{"line":89,"column":46,"offset":2456},"end":{"line":89,"column":53,"offset":2463},"indent":[]}},{"type":"text","value":"：","position":{"start":{"line":89,"column":53,"offset":2463},"end":{"line":89,"column":54,"offset":2464},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":2411},"end":{"line":89,"column":54,"offset":2464},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const graph = new G6.Graph({\n  // ...  // 其他配置\n  groupByTypes: false,\n});\n
","position":{"start":{"line":90,"column":1,"offset":2465},"end":{"line":95,"column":4,"offset":2555},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"此时，将会得到如下效果：","position":{"start":{"line":97,"column":1,"offset":2557},"end":{"line":97,"column":13,"offset":2569},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":97,"column":13,"offset":2569},"end":{"line":97,"column":19,"offset":2575},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571629063913-a0016f3f-6244-48e4-87ac-237e86dfdbda.png#align=left&display=inline&height=133&name=image.png&originHeight=302&originWidth=224&search=&size=23796&status=done&width=99","alt":"image.png","position":{"start":{"line":97,"column":19,"offset":2575},"end":{"line":97,"column":258,"offset":2814},"indent":[]}}],"position":{"start":{"line":97,"column":1,"offset":2557},"end":{"line":97,"column":258,"offset":2814},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-4","title":null,"children":[],"data":{"hProperties":{"aria-label":" 4 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":99,"column":1,"offset":2816},"end":{"line":99,"column":4,"offset":2819},"indent":[]},"data":{"id":"-4","htmlAttributes":{"id":"-4"},"hProperties":{"id":"-4"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#step-2-将节点放置在边上层","title":null,"children":[],"data":{"hProperties":{"aria-label":"step 2 将节点放置在边上层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Step 2 将节点放置在边上层","position":{"start":{"line":100,"column":4,"offset":2823},"end":{"line":100,"column":20,"offset":2839},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":2820},"end":{"line":100,"column":20,"offset":2839},"indent":[]},"data":{"id":"step-2-将节点放置在边上层","htmlAttributes":{"id":"step-2-将节点放置在边上层"},"hProperties":{"id":"step-2-将节点放置在边上层"}}},{"type":"paragraph","children":[{"type":"text","value":"上一步结果中节点在边的下层不符合常规，是由于 ","position":{"start":{"line":101,"column":1,"offset":2840},"end":{"line":101,"column":24,"offset":2863},"indent":[]}},{"type":"html","value":"groupByTypes","position":{"start":{"line":101,"column":24,"offset":2863},"end":{"line":101,"column":38,"offset":2877},"indent":[]}},{"type":"text","value":" 为 ","position":{"start":{"line":101,"column":38,"offset":2877},"end":{"line":101,"column":41,"offset":2880},"indent":[]}},{"type":"html","value":"false","position":{"start":{"line":101,"column":41,"offset":2880},"end":{"line":101,"column":48,"offset":2887},"indent":[]}},{"type":"text","value":" 时，节点和边的层级根据生成的顺序确定，而边的生成顺序在节点之后，因此所有边被绘制到了节点上方。为了使图符合常规——节点在上层，边在下层，可以在 ","position":{"start":{"line":101,"column":48,"offset":2887},"end":{"line":101,"column":121,"offset":2960},"indent":[]}},{"type":"html","value":"graph.render()","position":{"start":{"line":101,"column":121,"offset":2960},"end":{"line":101,"column":137,"offset":2976},"indent":[]}},{"type":"text","value":" 之后将所有的节点通过 ","position":{"start":{"line":101,"column":137,"offset":2976},"end":{"line":101,"column":149,"offset":2988},"indent":[]}},{"type":"html","value":"toFront()","position":{"start":{"line":101,"column":149,"offset":2988},"end":{"line":101,"column":160,"offset":2999},"indent":[]}},{"type":"text","value":" 函数提前。","position":{"start":{"line":101,"column":160,"offset":2999},"end":{"line":101,"column":166,"offset":3005},"indent":[]}}],"position":{"start":{"line":101,"column":1,"offset":2840},"end":{"line":101,"column":166,"offset":3005},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-5","title":null,"children":[],"data":{"hProperties":{"aria-label":" 5 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":103,"column":1,"offset":3007},"end":{"line":103,"column":4,"offset":3010},"indent":[]},"data":{"id":"-5","htmlAttributes":{"id":"-5"},"hProperties":{"id":"-5"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#函数描述","title":null,"children":[],"data":{"hProperties":{"aria-label":"函数描述 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"函数描述","position":{"start":{"line":104,"column":5,"offset":3015},"end":{"line":104,"column":9,"offset":3019},"indent":[]}}],"position":{"start":{"line":104,"column":1,"offset":3011},"end":{"line":104,"column":9,"offset":3019},"indent":[]},"data":{"id":"函数描述","htmlAttributes":{"id":"函数描述"},"hProperties":{"id":"函数描述"}}},{"type":"html","lang":"javascript","meta":null,"value":"
// 将节点实例 nodeItem 提前到其父级 group 的最前面\nnodeItem.toFront();\n// 将节点实例 nodeItem 放置到其父级 group 的最后面\nnodeItem.toBack();\n// 将边实例 edgeItem 提前到其父级 group 的最前面\nedgeItem.toFront();\n// 将边实例 edgeItem 放置到其父级 group 的最后面\nedgeItem.toBack();\n
","position":{"start":{"line":105,"column":1,"offset":3020},"end":{"line":114,"column":4,"offset":3257},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-6","title":null,"children":[],"data":{"hProperties":{"aria-label":" 6 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":116,"column":1,"offset":3259},"end":{"line":116,"column":4,"offset":3262},"indent":[]},"data":{"id":"-6","htmlAttributes":{"id":"-6"},"hProperties":{"id":"-6"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#书用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"书用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"书用方法","position":{"start":{"line":117,"column":5,"offset":3267},"end":{"line":117,"column":9,"offset":3271},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":3263},"end":{"line":117,"column":9,"offset":3271},"indent":[]},"data":{"id":"书用方法","htmlAttributes":{"id":"书用方法"},"hProperties":{"id":"书用方法"}}},{"type":"html","lang":"javascript","meta":null,"value":"
// const graph = ...\ngraph.data(data);\ngraph.render();\n// 获取图上的所有边实例\nconst nodes = graph.getNodes();\n// 遍历边实例，将所有边提前。\nnodes.forEach(node => {\n  node.toFront();\n});\n// 更改层级后需要重新绘制图\ngraph.paint();\n
","position":{"start":{"line":118,"column":1,"offset":3272},"end":{"line":130,"column":4,"offset":3485},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":131,"column":1,"offset":3486},"end":{"line":131,"column":2,"offset":3487},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":131,"column":2,"offset":3487},"end":{"line":131,"column":8,"offset":3493},"indent":[]}},{"type":"text","value":"这样，所有节点被绘制在边上层：","position":{"start":{"line":131,"column":8,"offset":3493},"end":{"line":131,"column":23,"offset":3508},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":131,"column":23,"offset":3508},"end":{"line":131,"column":29,"offset":3514},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571629345940-a061711c-a9d3-4ce2-a731-3acd29626666.png#align=left&display=inline&height=151&name=image.png&originHeight=302&originWidth=222&search=&size=22972&status=done&width=111","alt":"image.png","position":{"start":{"line":131,"column":29,"offset":3514},"end":{"line":131,"column":269,"offset":3754},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":3486},"end":{"line":131,"column":269,"offset":3754},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-7","title":null,"children":[],"data":{"hProperties":{"aria-label":" 7 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":133,"column":1,"offset":3756},"end":{"line":133,"column":4,"offset":3759},"indent":[]},"data":{"id":"-7","htmlAttributes":{"id":"-7"},"hProperties":{"id":"-7"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#step-3-监听鼠标事件并改变目标元素层级","title":null,"children":[],"data":{"hProperties":{"aria-label":"step 3 监听鼠标事件并改变目标元素层级 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Step 3 监听鼠标事件并改变目标元素层级","position":{"start":{"line":134,"column":4,"offset":3763},"end":{"line":134,"column":26,"offset":3785},"indent":[]}}],"position":{"start":{"line":134,"column":1,"offset":3760},"end":{"line":134,"column":26,"offset":3785},"indent":[]},"data":{"id":"step-3-监听鼠标事件并改变目标元素层级","htmlAttributes":{"id":"step-3-监听鼠标事件并改变目标元素层级"},"hProperties":{"id":"step-3-监听鼠标事件并改变目标元素层级"}}},{"type":"paragraph","children":[{"type":"text","value":"在效果图中，鼠标进入节点时，相关边和节点的层级被提升到最上层，鼠标离开节点使恢复。边同理。这一步将实现这一交互效果。","position":{"start":{"line":135,"column":1,"offset":3786},"end":{"line":135,"column":59,"offset":3844},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":3786},"end":{"line":135,"column":59,"offset":3844},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-8","title":null,"children":[],"data":{"hProperties":{"aria-label":" 8 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":137,"column":1,"offset":3846},"end":{"line":137,"column":4,"offset":3849},"indent":[]},"data":{"id":"-8","htmlAttributes":{"id":"-8"},"hProperties":{"id":"-8"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#函数描述-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"函数描述 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"函数描述","position":{"start":{"line":138,"column":5,"offset":3854},"end":{"line":138,"column":9,"offset":3858},"indent":[]}}],"position":{"start":{"line":138,"column":1,"offset":3850},"end":{"line":138,"column":9,"offset":3858},"indent":[]},"data":{"id":"函数描述-1","htmlAttributes":{"id":"函数描述-1"},"hProperties":{"id":"函数描述-1"}}},{"type":"paragraph","children":[{"type":"text","value":"使用下面四个函数监听鼠标的进入、离开元素的事件： ","position":{"start":{"line":139,"column":1,"offset":3859},"end":{"line":139,"column":26,"offset":3884},"indent":[]}}],"position":{"start":{"line":139,"column":1,"offset":3859},"end":{"line":139,"column":26,"offset":3884},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
// 鼠标进入节点事件\ngraph.on('node:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开节点事件\ngraph.on('node:mouseleave', ev => {\n  // ...\n});\n\n// 鼠标进入边事件\ngraph.on('edge:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开边事件\ngraph.on('edge:mouseleave', ev => {\n  // ...\n});\n
","position":{"start":{"line":140,"column":1,"offset":3885},"end":{"line":160,"column":4,"offset":4147},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-9","title":null,"children":[],"data":{"hProperties":{"aria-label":" 9 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":162,"column":1,"offset":4149},"end":{"line":162,"column":4,"offset":4152},"indent":[]},"data":{"id":"-9","htmlAttributes":{"id":"-9"},"hProperties":{"id":"-9"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方法","position":{"start":{"line":163,"column":5,"offset":4157},"end":{"line":163,"column":9,"offset":4161},"indent":[]}}],"position":{"start":{"line":163,"column":1,"offset":4153},"end":{"line":163,"column":9,"offset":4161},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"html","lang":"javascript","meta":null,"value":"
// 鼠标进入节点事件\ngraph.on('edge:mouseenter', ev => {\n  // 获得鼠标当前目标边\n  const edge = ev.item;\n  // 该边的起始点\n  const source = edge.getSource();\n  // 该边的结束点\n  const target = edge.getTarget();\n  // 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。\n  edge.toFront();\n  source.toFront();\n  target.toFront();\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('edge:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseenter', ev => {\n  // 获得鼠标当前目标节点\n  const node = ev.item;\n  // 获取该节点的所有相关边\n  const edges = node.getEdges();\n  // 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果\n  edges.forEach(edge => {\n    edge.toFront();\n    edge.getSource().toFront();\n    edge.getTarget().toFront();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n
","position":{"start":{"line":164,"column":1,"offset":4162},"end":{"line":217,"column":4,"offset":5264},"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,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":218,"column":1,"offset":5265}}}}