{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-19c909a584cb04f404739b075ec209b0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"什么是-graph"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%80%E4%B9%88%E6%98%AF-graph","aria-label":"什么是 graph permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"什么是 Graph","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":13,"offset":13}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":13,"offset":13}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。","position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":114,"offset":127}}},{"type":"raw","value":"
","position":{"start":{"line":3,"column":114,"offset":127},"end":{"line":3,"column":120,"offset":133}}},{"type":"text","value":"\n—— 摘自 ","position":{"start":{"line":3,"column":120,"offset":133},"end":{"line":4,"column":7,"offset":140}}},{"type":"element","tagName":"a","properties":{"href":"https://zhuanlan.zhihu.com/aiux-antv","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"AntV 专栏","position":{"start":{"line":4,"column":8,"offset":141},"end":{"line":4,"column":15,"offset":148}}}],"position":{"start":{"line":4,"column":7,"offset":140},"end":{"line":4,"column":54,"offset":187}}},{"type":"text","value":"文章：Graph Visualization ·","position":{"start":{"line":4,"column":54,"offset":187},"end":{"line":4,"column":78,"offset":211}}},{"type":"element","tagName":"a","properties":{"href":"https://zhuanlan.zhihu.com/p/83685690","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":" ","position":{"start":{"line":4,"column":79,"offset":212},"end":{"line":4,"column":80,"offset":213}}}],"position":{"start":{"line":4,"column":78,"offset":211},"end":{"line":4,"column":120,"offset":253}}},{"type":"text","value":"知多少 之 《","position":{"start":{"line":4,"column":120,"offset":253},"end":{"line":4,"column":127,"offset":260}}},{"type":"element","tagName":"a","properties":{"href":"https://zhuanlan.zhihu.com/p/83685690","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"HelloWorld","position":{"start":{"line":4,"column":128,"offset":261},"end":{"line":4,"column":138,"offset":271}}}],"position":{"start":{"line":4,"column":127,"offset":260},"end":{"line":4,"column":178,"offset":311}}},{"type":"text","value":" ","position":{"start":{"line":4,"column":178,"offset":311},"end":{"line":4,"column":179,"offset":312}}},{"type":"element","tagName":"a","properties":{"href":"https://zhuanlan.zhihu.com/p/83685690","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图可视化","position":{"start":{"line":4,"column":180,"offset":313},"end":{"line":4,"column":184,"offset":317}}}],"position":{"start":{"line":4,"column":179,"offset":312},"end":{"line":4,"column":224,"offset":357}}},{"type":"text","value":"》","position":{"start":{"line":4,"column":224,"offset":357},"end":{"line":4,"column":225,"offset":358}}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":4,"column":225,"offset":358}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。","position":{"start":{"line":6,"column":1,"offset":360},"end":{"line":6,"column":69,"offset":428}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":69,"offset":428},"end":{"line":6,"column":75,"offset":434}}},{"type":"text","value":"Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。","position":{"start":{"line":6,"column":75,"offset":434},"end":{"line":6,"column":120,"offset":479}}}],"position":{"start":{"line":6,"column":1,"offset":360},"end":{"line":6,"column":120,"offset":479}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 ","position":{"start":{"line":8,"column":1,"offset":481},"end":{"line":8,"column":3,"offset":483}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/intro#56Nwj","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"快速上手","position":{"start":{"line":8,"column":4,"offset":484},"end":{"line":8,"column":8,"offset":488}}}],"position":{"start":{"line":8,"column":3,"offset":483},"end":{"line":8,"column":52,"offset":532}}},{"type":"text","value":" 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。","position":{"start":{"line":8,"column":52,"offset":532},"end":{"line":8,"column":98,"offset":578}}}],"position":{"start":{"line":8,"column":1,"offset":481},"end":{"line":8,"column":98,"offset":578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"前提代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%89%8D%E6%8F%90%E4%BB%A3%E7%A0%81","aria-label":"前提代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"前提代码","position":{"start":{"line":10,"column":4,"offset":583},"end":{"line":10,"column":8,"offset":587}}}],"position":{"start":{"line":10,"column":1,"offset":580},"end":{"line":10,"column":8,"offset":587}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：","position":{"start":{"line":11,"column":1,"offset":588},"end":{"line":11,"column":76,"offset":663}}},{"type":"raw","value":"
","position":{"start":{"line":11,"column":76,"offset":663},"end":{"line":11,"column":82,"offset":669}}},{"type":"text","value":"\n","position":{"start":{"line":11,"column":82,"offset":669},"end":{"line":12,"column":1,"offset":670}}},{"type":"raw","value":"","position":{"start":{"line":12,"column":1,"offset":670},"end":{"line":12,"column":264,"offset":933}}}],"position":{"start":{"line":11,"column":1,"offset":588},"end":{"line":12,"column":264,"offset":933}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n  <body>\n    /* 图的画布容器 */\n    <div id=\"mountNode\"></div>\n    /* 引入 G6 */\n    <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n    <script>\n      // 定义数据源\n      const data = {\n        // 点集\n        nodes: [{\n          id: 'node1',\n          x: 100,\n          y: 200\n        },{\n          id: 'node2',\n          x: 300,\n          y: 200\n        }],\n        // 边集\n        edges: [\n          // 表示一条从 node1 节点连接到 node2 节点的边\n          {\n            source: 'node1',\n            target: 'node2'\n          }\n        ]\n      };\n      \n      // 创建 G6 图实例\n      const graph = new G6.Graph({\n        container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应\n        // 画布宽高\n        width: 800,\n        height: 500\n      });\n      // 读取数据\n      graph.data(data);\n      // 渲染图\n      graph.render();\n    </script>\n  </body>\n</html>
","position":{"start":{"line":14,"column":1,"offset":935},"end":{"line":63,"column":4,"offset":1904}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"初始化实例化图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE","aria-label":"初始化实例化图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"初始化/实例化图","position":{"start":{"line":65,"column":4,"offset":1909},"end":{"line":65,"column":12,"offset":1917}}}],"position":{"start":{"line":65,"column":1,"offset":1906},"end":{"line":65,"column":12,"offset":1917}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过 ","position":{"start":{"line":66,"column":1,"offset":1918},"end":{"line":66,"column":4,"offset":1921}}},{"type":"raw","value":"new G6.Graph(config)","position":{"start":{"line":66,"column":4,"offset":1921},"end":{"line":66,"column":26,"offset":1943}}},{"type":"text","value":" 进行图的实例化。其中参数 ","position":{"start":{"line":66,"column":26,"offset":1943},"end":{"line":66,"column":40,"offset":1957}}},{"type":"raw","value":"config","position":{"start":{"line":66,"column":40,"offset":1957},"end":{"line":66,"column":48,"offset":1965}}},{"type":"text","value":" 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 ","position":{"start":{"line":66,"column":48,"offset":1965},"end":{"line":66,"column":91,"offset":2008}}},{"type":"element","tagName":"a","properties":{"href":"#cRVfC"},"children":[{"type":"text","value":"前提代码","position":{"start":{"line":66,"column":92,"offset":2009},"end":{"line":66,"column":96,"offset":2013}}}],"position":{"start":{"line":66,"column":91,"offset":2008},"end":{"line":66,"column":105,"offset":2022}}},{"type":"text","value":" 这样实例化图：","position":{"start":{"line":66,"column":105,"offset":2022},"end":{"line":66,"column":113,"offset":2030}}}],"position":{"start":{"line":66,"column":1,"offset":1918},"end":{"line":66,"column":113,"offset":2030}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应\n  // 画布宽高\n  width: 800,\n  height: 500,\n});\n
","position":{"start":{"line":67,"column":1,"offset":2031},"end":{"line":74,"column":4,"offset":2178}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"必要配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%BF%85%E8%A6%81%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"必要配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"必要配置项","position":{"start":{"line":76,"column":5,"offset":2184},"end":{"line":76,"column":10,"offset":2189}}}],"position":{"start":{"line":76,"column":1,"offset":2180},"end":{"line":76,"column":10,"offset":2189}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"上面代码中实例化 Graph 的部分使用了三个必要的配置项：","position":{"start":{"line":77,"column":1,"offset":2190},"end":{"line":77,"column":31,"offset":2220}}}],"position":{"start":{"line":77,"column":1,"offset":2190},"end":{"line":77,"column":31,"offset":2220}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"container","position":{"start":{"line":79,"column":3,"offset":2224},"end":{"line":79,"column":14,"offset":2235}}}],"position":{"start":{"line":79,"column":1,"offset":2222},"end":{"line":79,"column":14,"offset":2235}}},{"type":"text","value":"\n"}],"position":{"start":{"line":79,"column":1,"offset":2222},"end":{"line":79,"column":14,"offset":2235}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"     类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 ","position":{"start":{"line":81,"column":1,"offset":2237},"end":{"line":81,"column":56,"offset":2292}}},{"type":"raw","value":"id","position":{"start":{"line":81,"column":56,"offset":2292},"end":{"line":81,"column":60,"offset":2296}}},{"type":"text","value":"。也可以是 Object ，为 DOM 对象。","position":{"start":{"line":81,"column":60,"offset":2296},"end":{"line":81,"column":83,"offset":2319}}}],"position":{"start":{"line":81,"column":1,"offset":2237},"end":{"line":81,"column":83,"offset":2319}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"width","position":{"start":{"line":83,"column":3,"offset":2323},"end":{"line":83,"column":10,"offset":2330}}},{"type":"text","value":"、","position":{"start":{"line":83,"column":10,"offset":2330},"end":{"line":83,"column":11,"offset":2331}}},{"type":"raw","value":"height","position":{"start":{"line":83,"column":11,"offset":2331},"end":{"line":83,"column":19,"offset":2339}}}],"position":{"start":{"line":83,"column":1,"offset":2321},"end":{"line":83,"column":19,"offset":2339}}},{"type":"text","value":"\n"}],"position":{"start":{"line":83,"column":1,"offset":2321},"end":{"line":83,"column":19,"offset":2339}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"     类型：Number。图的画布的宽度和高度。","position":{"start":{"line":85,"column":1,"offset":2341},"end":{"line":85,"column":27,"offset":2367}}}],"position":{"start":{"line":85,"column":1,"offset":2341},"end":{"line":85,"column":27,"offset":2367}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"常用配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"常用配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"常用配置项","position":{"start":{"line":87,"column":5,"offset":2373},"end":{"line":87,"column":10,"offset":2378}}}],"position":{"start":{"line":87,"column":1,"offset":2369},"end":{"line":87,"column":10,"offset":2378}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面列举实例化图时常见的配置项，完整的配置项参见 ","position":{"start":{"line":88,"column":1,"offset":2379},"end":{"line":88,"column":26,"offset":2404}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/graph","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Graph API","position":{"start":{"line":88,"column":27,"offset":2405},"end":{"line":88,"column":36,"offset":2414}}}],"position":{"start":{"line":88,"column":26,"offset":2404},"end":{"line":88,"column":74,"offset":2452}}},{"type":"text","value":"。","position":{"start":{"line":88,"column":74,"offset":2452},"end":{"line":88,"column":75,"offset":2453}}}],"position":{"start":{"line":88,"column":1,"offset":2379},"end":{"line":88,"column":75,"offset":2453}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"整体渲染相关"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B4%E4%BD%93%E6%B8%B2%E6%9F%93%E7%9B%B8%E5%85%B3","aria-label":"整体渲染相关 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"整体渲染相关","position":{"start":{"line":90,"column":6,"offset":2460},"end":{"line":90,"column":12,"offset":2466}}}],"position":{"start":{"line":90,"column":1,"offset":2455},"end":{"line":90,"column":12,"offset":2466}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"renderer","position":{"start":{"line":92,"column":3,"offset":2470},"end":{"line":92,"column":13,"offset":2480}}}],"position":{"start":{"line":92,"column":1,"offset":2468},"end":{"line":92,"column":13,"offset":2480}}},{"type":"text","value":"\n"}],"position":{"start":{"line":92,"column":1,"offset":2468},"end":{"line":92,"column":13,"offset":2480}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：String；选项：","position":{"start":{"line":94,"column":1,"offset":2482},"end":{"line":94,"column":20,"offset":2501}}},{"type":"raw","value":"'svg'","position":{"start":{"line":94,"column":20,"offset":2501},"end":{"line":94,"column":27,"offset":2508}}},{"type":"text","value":" | ","position":{"start":{"line":94,"column":27,"offset":2508},"end":{"line":94,"column":30,"offset":2511}}},{"type":"raw","value":"'canvas'","position":{"start":{"line":94,"column":30,"offset":2511},"end":{"line":94,"column":41,"offset":2522}}},{"type":"text","value":"；默认：","position":{"start":{"line":94,"column":41,"offset":2522},"end":{"line":94,"column":45,"offset":2526}}},{"type":"raw","value":"'canvas'","position":{"start":{"line":94,"column":45,"offset":2526},"end":{"line":94,"column":55,"offset":2536}}},{"type":"text","value":"。选择 SVG 或 Canvas 方式渲染。","position":{"start":{"line":94,"column":55,"offset":2536},"end":{"line":94,"column":77,"offset":2558}}}],"position":{"start":{"line":94,"column":1,"offset":2482},"end":{"line":94,"column":77,"offset":2558}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"fitView","position":{"start":{"line":96,"column":3,"offset":2562},"end":{"line":96,"column":12,"offset":2571}}}],"position":{"start":{"line":96,"column":1,"offset":2560},"end":{"line":96,"column":12,"offset":2571}}},{"type":"text","value":"\n"}],"position":{"start":{"line":96,"column":1,"offset":2560},"end":{"line":96,"column":12,"offset":2571}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Boolean；默认：'false'。图是否自适应画布。","position":{"start":{"line":98,"column":1,"offset":2573},"end":{"line":98,"column":38,"offset":2610}}}],"position":{"start":{"line":98,"column":1,"offset":2573},"end":{"line":98,"column":38,"offset":2610}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"fitViewPadding","position":{"start":{"line":100,"column":3,"offset":2614},"end":{"line":100,"column":19,"offset":2630}}}],"position":{"start":{"line":100,"column":1,"offset":2612},"end":{"line":100,"column":19,"offset":2630}}},{"type":"text","value":"\n"}],"position":{"start":{"line":100,"column":1,"offset":2612},"end":{"line":100,"column":19,"offset":2630}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。","position":{"start":{"line":102,"column":1,"offset":2632},"end":{"line":102,"column":65,"offset":2696}}}],"position":{"start":{"line":102,"column":1,"offset":2632},"end":{"line":102,"column":65,"offset":2696}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"全局元素配置"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%A8%E5%B1%80%E5%85%83%E7%B4%A0%E9%85%8D%E7%BD%AE","aria-label":"全局元素配置 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"全局元素配置","position":{"start":{"line":104,"column":6,"offset":2703},"end":{"line":104,"column":12,"offset":2709}}}],"position":{"start":{"line":104,"column":1,"offset":2698},"end":{"line":104,"column":12,"offset":2709}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"defaultNode","position":{"start":{"line":106,"column":3,"offset":2713},"end":{"line":106,"column":16,"offset":2726}}}],"position":{"start":{"line":106,"column":1,"offset":2711},"end":{"line":106,"column":16,"offset":2726}}},{"type":"text","value":"\n"}],"position":{"start":{"line":106,"column":1,"offset":2711},"end":{"line":106,"column":16,"offset":2726}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 ","position":{"start":{"line":108,"column":1,"offset":2728},"end":{"line":108,"column":46,"offset":2773}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-node","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"内置节点","position":{"start":{"line":108,"column":47,"offset":2774},"end":{"line":108,"column":51,"offset":2778}}}],"position":{"start":{"line":108,"column":46,"offset":2773},"end":{"line":108,"column":97,"offset":2824}}},{"type":"text","value":"。","position":{"start":{"line":108,"column":97,"offset":2824},"end":{"line":108,"column":98,"offset":2825}}}],"position":{"start":{"line":108,"column":1,"offset":2728},"end":{"line":108,"column":98,"offset":2825}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"defaultEdge","position":{"start":{"line":110,"column":3,"offset":2829},"end":{"line":110,"column":16,"offset":2842}}}],"position":{"start":{"line":110,"column":1,"offset":2827},"end":{"line":110,"column":16,"offset":2842}}},{"type":"text","value":"\n"}],"position":{"start":{"line":110,"column":1,"offset":2827},"end":{"line":110,"column":16,"offset":2842}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 ","position":{"start":{"line":112,"column":1,"offset":2844},"end":{"line":112,"column":45,"offset":2888}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"内置边","position":{"start":{"line":112,"column":46,"offset":2889},"end":{"line":112,"column":49,"offset":2892}}}],"position":{"start":{"line":112,"column":45,"offset":2888},"end":{"line":112,"column":95,"offset":2938}}},{"type":"text","value":"。","position":{"start":{"line":112,"column":95,"offset":2938},"end":{"line":112,"column":96,"offset":2939}}}],"position":{"start":{"line":112,"column":1,"offset":2844},"end":{"line":112,"column":96,"offset":2939}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"nodeStateStyles","position":{"start":{"line":114,"column":3,"offset":2943},"end":{"line":114,"column":20,"offset":2960}}}],"position":{"start":{"line":114,"column":1,"offset":2941},"end":{"line":114,"column":20,"offset":2960}}},{"type":"text","value":"\n"}],"position":{"start":{"line":114,"column":1,"offset":2941},"end":{"line":114,"column":20,"offset":2960}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。除默认状态外的其他状态下节点的样式配置。详见 ","position":{"start":{"line":116,"column":1,"offset":2962},"end":{"line":116,"column":40,"offset":3001}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/fqnn9w","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"状态 State","position":{"start":{"line":116,"column":41,"offset":3002},"end":{"line":116,"column":49,"offset":3010}}}],"position":{"start":{"line":116,"column":40,"offset":3001},"end":{"line":116,"column":88,"offset":3049}}},{"type":"text","value":"。","position":{"start":{"line":116,"column":88,"offset":3049},"end":{"line":116,"column":89,"offset":3050}}}],"position":{"start":{"line":116,"column":1,"offset":2962},"end":{"line":116,"column":89,"offset":3050}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"edgeStateStyles","position":{"start":{"line":118,"column":3,"offset":3054},"end":{"line":118,"column":20,"offset":3071}}}],"position":{"start":{"line":118,"column":1,"offset":3052},"end":{"line":118,"column":20,"offset":3071}}},{"type":"text","value":"\n"}],"position":{"start":{"line":118,"column":1,"offset":3052},"end":{"line":118,"column":20,"offset":3071}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。除默认状态外的其他状态下边的样式配置。详见 ","position":{"start":{"line":120,"column":1,"offset":3073},"end":{"line":120,"column":39,"offset":3111}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/fqnn9w","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"状态 State","position":{"start":{"line":120,"column":40,"offset":3112},"end":{"line":120,"column":48,"offset":3120}}}],"position":{"start":{"line":120,"column":39,"offset":3111},"end":{"line":120,"column":87,"offset":3159}}},{"type":"text","value":"。","position":{"start":{"line":120,"column":87,"offset":3159},"end":{"line":120,"column":88,"offset":3160}}}],"position":{"start":{"line":120,"column":1,"offset":3073},"end":{"line":120,"column":88,"offset":3160}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"布局相关"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%B8%83%E5%B1%80%E7%9B%B8%E5%85%B3","aria-label":"布局相关 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"布局相关","position":{"start":{"line":122,"column":6,"offset":3167},"end":{"line":122,"column":10,"offset":3171}}}],"position":{"start":{"line":122,"column":1,"offset":3162},"end":{"line":122,"column":10,"offset":3171}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"layout","position":{"start":{"line":124,"column":3,"offset":3175},"end":{"line":124,"column":11,"offset":3183}}}],"position":{"start":{"line":124,"column":1,"offset":3173},"end":{"line":124,"column":11,"offset":3183}}},{"type":"text","value":"\n"}],"position":{"start":{"line":124,"column":1,"offset":3173},"end":{"line":124,"column":11,"offset":3183}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 ","position":{"start":{"line":126,"column":1,"offset":3185},"end":{"line":126,"column":52,"offset":3236}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/qopkkg","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"使用布局 Layout 教程","position":{"start":{"line":126,"column":53,"offset":3237},"end":{"line":126,"column":67,"offset":3251}}}],"position":{"start":{"line":126,"column":52,"offset":3236},"end":{"line":126,"column":106,"offset":3290}}},{"type":"text","value":"，","position":{"start":{"line":126,"column":106,"offset":3290},"end":{"line":126,"column":107,"offset":3291}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/agbmu2","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Layout API","position":{"start":{"line":126,"column":108,"offset":3292},"end":{"line":126,"column":118,"offset":3302}}}],"position":{"start":{"line":126,"column":107,"offset":3291},"end":{"line":126,"column":157,"offset":3341}}},{"type":"text","value":"。","position":{"start":{"line":126,"column":157,"offset":3341},"end":{"line":126,"column":158,"offset":3342}}}],"position":{"start":{"line":126,"column":1,"offset":3185},"end":{"line":126,"column":158,"offset":3342}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"交互行为相关"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%E7%9B%B8%E5%85%B3","aria-label":"交互行为相关 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互行为相关","position":{"start":{"line":128,"column":6,"offset":3349},"end":{"line":128,"column":12,"offset":3355}}}],"position":{"start":{"line":128,"column":1,"offset":3344},"end":{"line":128,"column":12,"offset":3355}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"modes","position":{"start":{"line":130,"column":3,"offset":3359},"end":{"line":130,"column":10,"offset":3366}}}],"position":{"start":{"line":130,"column":1,"offset":3357},"end":{"line":130,"column":10,"offset":3366}}},{"type":"text","value":"\n"}],"position":{"start":{"line":130,"column":1,"offset":3357},"end":{"line":130,"column":10,"offset":3366}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Array。配置多种交互模式及其包含的交互事件的。详见 ","position":{"start":{"line":132,"column":1,"offset":3368},"end":{"line":132,"column":38,"offset":3405}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/g6-mode","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"交互模式 Mode 教程","position":{"start":{"line":132,"column":39,"offset":3406},"end":{"line":132,"column":51,"offset":3418}}}],"position":{"start":{"line":132,"column":38,"offset":3405},"end":{"line":132,"column":91,"offset":3458}}},{"type":"text","value":"。","position":{"start":{"line":132,"column":91,"offset":3458},"end":{"line":132,"column":92,"offset":3459}}}],"position":{"start":{"line":132,"column":1,"offset":3368},"end":{"line":132,"column":92,"offset":3459}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"动画相关"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8A%A8%E7%94%BB%E7%9B%B8%E5%85%B3","aria-label":"动画相关 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"动画相关","position":{"start":{"line":134,"column":6,"offset":3466},"end":{"line":134,"column":10,"offset":3470}}}],"position":{"start":{"line":134,"column":1,"offset":3461},"end":{"line":134,"column":10,"offset":3470}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"animate","position":{"start":{"line":136,"column":3,"offset":3474},"end":{"line":136,"column":12,"offset":3483}}}],"position":{"start":{"line":136,"column":1,"offset":3472},"end":{"line":136,"column":12,"offset":3483}}},{"type":"text","value":"\n"}],"position":{"start":{"line":136,"column":1,"offset":3472},"end":{"line":136,"column":12,"offset":3483}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Boolean；默认：'false'。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。","position":{"start":{"line":138,"column":1,"offset":3485},"end":{"line":138,"column":61,"offset":3545}}}],"position":{"start":{"line":138,"column":1,"offset":3485},"end":{"line":138,"column":61,"offset":3545}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"animateCfg","position":{"start":{"line":140,"column":3,"offset":3549},"end":{"line":140,"column":15,"offset":3561}}}],"position":{"start":{"line":140,"column":1,"offset":3547},"end":{"line":140,"column":15,"offset":3561}}},{"type":"text","value":"\n"}],"position":{"start":{"line":140,"column":1,"offset":3547},"end":{"line":140,"column":15,"offset":3561}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。","position":{"start":{"line":142,"column":1,"offset":3563},"end":{"line":142,"column":49,"offset":3611}}}],"position":{"start":{"line":142,"column":1,"offset":3563},"end":{"line":142,"column":49,"offset":3611}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"插件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%8F%92%E4%BB%B6","aria-label":"插件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"插件","position":{"start":{"line":144,"column":6,"offset":3618},"end":{"line":144,"column":8,"offset":3620}}}],"position":{"start":{"line":144,"column":1,"offset":3613},"end":{"line":144,"column":8,"offset":3620}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"plugins","position":{"start":{"line":146,"column":3,"offset":3624},"end":{"line":146,"column":12,"offset":3633}}}],"position":{"start":{"line":146,"column":1,"offset":3622},"end":{"line":146,"column":12,"offset":3633}}},{"type":"text","value":"\n"}],"position":{"start":{"line":146,"column":1,"offset":3622},"end":{"line":146,"column":12,"offset":3633}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      类型：Array。配置辅助插件。详见 ","position":{"start":{"line":148,"column":1,"offset":3635},"end":{"line":148,"column":26,"offset":3660}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/plugin","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Plugin API","position":{"start":{"line":148,"column":27,"offset":3661},"end":{"line":148,"column":37,"offset":3671}}}],"position":{"start":{"line":148,"column":26,"offset":3660},"end":{"line":148,"column":76,"offset":3710}}},{"type":"text","value":"。","position":{"start":{"line":148,"column":76,"offset":3710},"end":{"line":148,"column":77,"offset":3711}}}],"position":{"start":{"line":148,"column":1,"offset":3635},"end":{"line":148,"column":77,"offset":3711}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"常用函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0","aria-label":"常用函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"常用函数","position":{"start":{"line":150,"column":4,"offset":3716},"end":{"line":150,"column":8,"offset":3720}}}],"position":{"start":{"line":150,"column":1,"offset":3713},"end":{"line":150,"column":8,"offset":3720}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 ","position":{"start":{"line":151,"column":1,"offset":3721},"end":{"line":151,"column":3,"offset":3723}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/ie7zi7#cRVfC","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"前提代码","position":{"start":{"line":151,"column":4,"offset":3724},"end":{"line":151,"column":8,"offset":3728}}}],"position":{"start":{"line":151,"column":3,"offset":3723},"end":{"line":151,"column":53,"offset":3773}}},{"type":"text","value":" 中使用了两个必要的函数：","position":{"start":{"line":151,"column":53,"offset":3773},"end":{"line":151,"column":66,"offset":3786}}}],"position":{"start":{"line":151,"column":1,"offset":3721},"end":{"line":151,"column":66,"offset":3786}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 读取数据\ngraph.data(data);\n// 渲染图\ngraph.render();\n
","position":{"start":{"line":152,"column":1,"offset":3787},"end":{"line":157,"column":4,"offset":3853}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"data(data)","position":{"start":{"line":159,"column":3,"offset":3857},"end":{"line":159,"column":15,"offset":3869}}},{"type":"text","value":"：读取数据源 ","position":{"start":{"line":159,"column":15,"offset":3869},"end":{"line":159,"column":22,"offset":3876}}},{"type":"raw","value":"data","position":{"start":{"line":159,"column":22,"offset":3876},"end":{"line":159,"column":28,"offset":3882}}},{"type":"text","value":" 到图实例 ","position":{"start":{"line":159,"column":28,"offset":3882},"end":{"line":159,"column":34,"offset":3888}}},{"type":"raw","value":"graph","position":{"start":{"line":159,"column":34,"offset":3888},"end":{"line":159,"column":41,"offset":3895}}},{"type":"text","value":" 中。","position":{"start":{"line":159,"column":41,"offset":3895},"end":{"line":159,"column":44,"offset":3898}}}],"position":{"start":{"line":159,"column":1,"offset":3855},"end":{"line":159,"column":44,"offset":3898}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"render()：渲染图。","position":{"start":{"line":160,"column":3,"offset":3901},"end":{"line":160,"column":16,"offset":3914}}}],"position":{"start":{"line":160,"column":1,"offset":3899},"end":{"line":160,"column":16,"offset":3914}}},{"type":"text","value":"\n"}],"position":{"start":{"line":159,"column":1,"offset":3855},"end":{"line":160,"column":16,"offset":3914}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Graph 的完整函数参见 ","position":{"start":{"line":162,"column":1,"offset":3916},"end":{"line":162,"column":15,"offset":3930}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/graph#wbgjF","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Graph API","position":{"start":{"line":162,"column":16,"offset":3931},"end":{"line":162,"column":25,"offset":3940}}}],"position":{"start":{"line":162,"column":15,"offset":3930},"end":{"line":162,"column":69,"offset":3984}}},{"type":"text","value":"。","position":{"start":{"line":162,"column":69,"offset":3984},"end":{"line":162,"column":70,"offset":3985}}}],"position":{"start":{"line":162,"column":1,"offset":3916},"end":{"line":162,"column":70,"offset":3985}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":163,"column":1,"offset":3986}}}}