{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-146f04984f2d8c60888297d34d2b6798-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":10,"offset":10},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"节点","position":{"start":{"line":2,"column":12,"offset":12},"end":{"line":2,"column":14,"offset":14},"indent":[]}}],"position":{"start":{"line":2,"column":10,"offset":10},"end":{"line":2,"column":16,"offset":16},"indent":[]}},{"type":"html","value":"Node","position":{"start":{"line":2,"column":16,"offset":16},"end":{"line":2,"column":22,"offset":22},"indent":[]}},{"type":"text","value":"和","position":{"start":{"line":2,"column":22,"offset":22},"end":{"line":2,"column":23,"offset":23},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"边","position":{"start":{"line":2,"column":25,"offset":25},"end":{"line":2,"column":26,"offset":26},"indent":[]}}],"position":{"start":{"line":2,"column":23,"offset":23},"end":{"line":2,"column":28,"offset":28},"indent":[]}},{"type":"html","value":"Edge","position":{"start":{"line":2,"column":28,"offset":28},"end":{"line":2,"column":34,"offset":34},"indent":[]}},{"type":"text","value":"。在上一章节中，我们已经将","position":{"start":{"line":2,"column":34,"offset":34},"end":{"line":2,"column":47,"offset":47},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":2,"column":49,"offset":49},"end":{"line":2,"column":59,"offset":59},"indent":[]}}],"position":{"start":{"line":2,"column":47,"offset":47},"end":{"line":2,"column":61,"offset":61},"indent":[]}},{"type":"text","value":"的图绘制了出来，但是各个元素及其 ","position":{"start":{"line":2,"column":61,"offset":61},"end":{"line":2,"column":78,"offset":78},"indent":[]}},{"type":"html","value":"label","position":{"start":{"line":2,"column":78,"offset":78},"end":{"line":2,"column":85,"offset":85},"indent":[]}},{"type":"text","value":" 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。","position":{"start":{"line":2,"column":85,"offset":85},"end":{"line":2,"column":130,"offset":130},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":2,"column":130,"offset":130},"end":{"line":2,"column":136,"offset":136},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834303620-7f78a971-20ae-4cf0-89f6-a1eecf787c63.png#align=left&display=inline&height=364&name=image.png&originHeight=1088&originWidth=1412&search=&size=344037&status=done&width=473","alt":"image.png","position":{"start":{"line":2,"column":136,"offset":136},"end":{"line":2,"column":379,"offset":379},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":379,"offset":379},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"图 1  元素属性配置后的 ","position":{"start":{"line":3,"column":3,"offset":382},"end":{"line":3,"column":17,"offset":396},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":3,"column":19,"offset":398},"end":{"line":3,"column":29,"offset":408},"indent":[]}}],"position":{"start":{"line":3,"column":17,"offset":396},"end":{"line":3,"column":31,"offset":410},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":3,"column":31,"offset":410},"end":{"line":3,"column":32,"offset":411},"indent":[]}}],"position":{"start":{"line":3,"column":3,"offset":382},"end":{"line":3,"column":32,"offset":411},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":380},"end":{"line":3,"column":32,"offset":411},"indent":[]}},{"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":6,"column":4,"offset":417},"end":{"line":6,"column":8,"offset":421},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":414},"end":{"line":6,"column":8,"offset":421},"indent":[]},"data":{"id":"基本概念","htmlAttributes":{"id":"基本概念"},"hProperties":{"id":"基本概念"}}},{"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":7,"column":5,"offset":426},"end":{"line":7,"column":9,"offset":430},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":422},"end":{"line":7,"column":9,"offset":430},"indent":[]},"data":{"id":"图的元素","htmlAttributes":{"id":"图的元素"},"hProperties":{"id":"图的元素"}}},{"type":"paragraph","children":[{"type":"text","value":"图的元素特指图上的","position":{"start":{"line":8,"column":1,"offset":431},"end":{"line":8,"column":10,"offset":440},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"节点","position":{"start":{"line":8,"column":12,"offset":442},"end":{"line":8,"column":14,"offset":444},"indent":[]}}],"position":{"start":{"line":8,"column":10,"offset":440},"end":{"line":8,"column":16,"offset":446},"indent":[]}},{"type":"html","value":"Node","position":{"start":{"line":8,"column":16,"offset":446},"end":{"line":8,"column":22,"offset":452},"indent":[]}},{"type":"text","value":"和","position":{"start":{"line":8,"column":22,"offset":452},"end":{"line":8,"column":23,"offset":453},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"边","position":{"start":{"line":8,"column":25,"offset":455},"end":{"line":8,"column":26,"offset":456},"indent":[]}}],"position":{"start":{"line":8,"column":23,"offset":453},"end":{"line":8,"column":28,"offset":458},"indent":[]}},{"type":"html","value":"Edge","position":{"start":{"line":8,"column":28,"offset":458},"end":{"line":8,"column":34,"offset":464},"indent":[]}},{"type":"text","value":"。G6 内置了一系列 ","position":{"start":{"line":8,"column":34,"offset":464},"end":{"line":8,"column":45,"offset":475},"indent":[]}},{"type":"link","title":null,"url":"../middle/elements/defaultNode","children":[{"type":"text","value":"内置的节点","position":{"start":{"line":8,"column":46,"offset":476},"end":{"line":8,"column":51,"offset":481},"indent":[]}}],"position":{"start":{"line":8,"column":45,"offset":475},"end":{"line":8,"column":84,"offset":514},"indent":[]}},{"type":"text","value":" 和","position":{"start":{"line":8,"column":84,"offset":514},"end":{"line":8,"column":86,"offset":516},"indent":[]}},{"type":"link","title":null,"url":"../middle/elements/defaultEdge","children":[{"type":"text","value":"内置的边","position":{"start":{"line":8,"column":87,"offset":517},"end":{"line":8,"column":91,"offset":521},"indent":[]}}],"position":{"start":{"line":8,"column":86,"offset":516},"end":{"line":8,"column":124,"offset":554},"indent":[]}},{"type":"text","value":"，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 ","position":{"start":{"line":8,"column":124,"offset":554},"end":{"line":8,"column":160,"offset":590},"indent":[]}},{"type":"link","title":null,"url":"../middle/keyConcept","children":[{"type":"text","value":"图形Shape","position":{"start":{"line":8,"column":161,"offset":591},"end":{"line":8,"column":168,"offset":598},"indent":[]}}],"position":{"start":{"line":8,"column":160,"offset":590},"end":{"line":8,"column":191,"offset":621},"indent":[]}},{"type":"text","value":"，例如，节点可以是圆形、矩形、图片等。如果 G6 内置的元素不能满足需求，用户也可以 ","position":{"start":{"line":8,"column":191,"offset":621},"end":{"line":8,"column":234,"offset":664},"indent":[]}},{"type":"link","title":null,"url":"../advanced/custom-node","children":[{"type":"text","value":"自定义节点","position":{"start":{"line":8,"column":235,"offset":665},"end":{"line":8,"column":240,"offset":670},"indent":[]}}],"position":{"start":{"line":8,"column":234,"offset":664},"end":{"line":8,"column":266,"offset":696},"indent":[]}},{"type":"text","value":" 或 ","position":{"start":{"line":8,"column":266,"offset":696},"end":{"line":8,"column":269,"offset":699},"indent":[]}},{"type":"link","title":null,"url":"../advanced/custom-edge","children":[{"type":"text","value":"自定义边","position":{"start":{"line":8,"column":270,"offset":700},"end":{"line":8,"column":274,"offset":704},"indent":[]}}],"position":{"start":{"line":8,"column":269,"offset":699},"end":{"line":8,"column":300,"offset":730},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":8,"column":300,"offset":730},"end":{"line":8,"column":301,"offset":731},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":431},"end":{"line":8,"column":301,"offset":731},"indent":[]}},{"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":10,"column":4,"offset":736},"end":{"line":10,"column":9,"offset":741},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":733},"end":{"line":10,"column":9,"offset":741},"indent":[]},"data":{"id":"元素的属性","htmlAttributes":{"id":"元素的属性"},"hProperties":{"id":"元素的属性"}}},{"type":"paragraph","children":[{"type":"text","value":"不论是节点还是边，它们的属性分为两种：","position":{"start":{"line":11,"column":1,"offset":742},"end":{"line":11,"column":20,"offset":761},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":742},"end":{"line":11,"column":20,"offset":761},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"样式属性 ","position":{"start":{"line":13,"column":5,"offset":767},"end":{"line":13,"column":10,"offset":772},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":13,"column":10,"offset":772},"end":{"line":13,"column":17,"offset":779},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":765},"end":{"line":13,"column":19,"offset":781},"indent":[]}},{"type":"text","value":"：对应 Canvas 中的各种样式，在元素","position":{"start":{"line":13,"column":19,"offset":781},"end":{"line":13,"column":40,"offset":802},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/state","children":[{"type":"text","value":"状态State","position":{"start":{"line":13,"column":41,"offset":803},"end":{"line":13,"column":48,"offset":810},"indent":[]}}],"position":{"start":{"line":13,"column":40,"offset":802},"end":{"line":13,"column":73,"offset":835},"indent":[]}},{"type":"text","value":" 发生变化时，可以被改变；","position":{"start":{"line":13,"column":73,"offset":835},"end":{"line":13,"column":86,"offset":848},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":765},"end":{"line":13,"column":86,"offset":848},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":763},"end":{"line":13,"column":86,"offset":848},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"其他属性","position":{"start":{"line":14,"column":5,"offset":853},"end":{"line":14,"column":9,"offset":857},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":851},"end":{"line":14,"column":11,"offset":859},"indent":[]}},{"type":"text","value":"：例如图形（ ","position":{"start":{"line":14,"column":11,"offset":859},"end":{"line":14,"column":18,"offset":866},"indent":[]}},{"type":"html","value":"shape","position":{"start":{"line":14,"column":18,"offset":866},"end":{"line":14,"column":25,"offset":873},"indent":[]}},{"type":"text","value":"）、id（","position":{"start":{"line":14,"column":25,"offset":873},"end":{"line":14,"column":30,"offset":878},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":14,"column":30,"offset":878},"end":{"line":14,"column":34,"offset":882},"indent":[]}},{"type":"text","value":" ）一类在元素","position":{"start":{"line":14,"column":34,"offset":882},"end":{"line":14,"column":41,"offset":889},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/state","children":[{"type":"text","value":"状态State","position":{"start":{"line":14,"column":42,"offset":890},"end":{"line":14,"column":49,"offset":897},"indent":[]}}],"position":{"start":{"line":14,"column":41,"offset":889},"end":{"line":14,"column":74,"offset":922},"indent":[]}},{"type":"text","value":"发生变化时不能被改变的属性。","position":{"start":{"line":14,"column":74,"offset":922},"end":{"line":14,"column":88,"offset":936},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":851},"end":{"line":14,"column":88,"offset":936},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":849},"end":{"line":14,"column":88,"offset":936},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":763},"end":{"line":14,"column":88,"offset":936},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的","position":{"start":{"line":16,"column":1,"offset":938},"end":{"line":16,"column":46,"offset":983},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"样式属性","position":{"start":{"line":16,"column":48,"offset":985},"end":{"line":16,"column":52,"offset":989},"indent":[]}}],"position":{"start":{"line":16,"column":46,"offset":983},"end":{"line":16,"column":54,"offset":991},"indent":[]}},{"type":"text","value":"（如 ","position":{"start":{"line":16,"column":54,"offset":991},"end":{"line":16,"column":57,"offset":994},"indent":[]}},{"type":"html","value":"fill","position":{"start":{"line":16,"column":57,"offset":994},"end":{"line":16,"column":63,"offset":1000},"indent":[]}},{"type":"text","value":"、","position":{"start":{"line":16,"column":63,"offset":1000},"end":{"line":16,"column":64,"offset":1001},"indent":[]}},{"type":"html","value":"stroke","position":{"start":{"line":16,"column":64,"offset":1001},"end":{"line":16,"column":72,"offset":1009},"indent":[]}},{"type":"text","value":" 等","position":{"start":{"line":16,"column":72,"offset":1009},"end":{"line":16,"column":74,"offset":1011},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"）","position":{"start":{"line":16,"column":76,"offset":1013},"end":{"line":16,"column":77,"offset":1014},"indent":[]}}],"position":{"start":{"line":16,"column":74,"offset":1011},"end":{"line":16,"column":79,"offset":1016},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":16,"column":79,"offset":1016},"end":{"line":16,"column":80,"offset":1017},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"其他属性","position":{"start":{"line":16,"column":82,"offset":1019},"end":{"line":16,"column":86,"offset":1023},"indent":[]}}],"position":{"start":{"line":16,"column":80,"offset":1017},"end":{"line":16,"column":88,"offset":1025},"indent":[]}},{"type":"text","value":"（如 ","position":{"start":{"line":16,"column":88,"offset":1025},"end":{"line":16,"column":91,"offset":1028},"indent":[]}},{"type":"html","value":"shape","position":{"start":{"line":16,"column":91,"offset":1028},"end":{"line":16,"column":98,"offset":1035},"indent":[]}},{"type":"text","value":" 等）不能被改变。如果需要改变其他属性，要通过 ","position":{"start":{"line":16,"column":98,"offset":1035},"end":{"line":16,"column":122,"offset":1059},"indent":[]}},{"type":"link","title":null,"url":"../../api/Graph","children":[{"type":"text","value":"graph.updateItem","position":{"start":{"line":16,"column":123,"offset":1060},"end":{"line":16,"column":139,"offset":1076},"indent":[]}}],"position":{"start":{"line":16,"column":122,"offset":1059},"end":{"line":16,"column":157,"offset":1094},"indent":[]}},{"type":"text","value":" 手动配置。","position":{"start":{"line":16,"column":157,"offset":1094},"end":{"line":16,"column":163,"offset":1100},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"样式属性","position":{"start":{"line":16,"column":165,"offset":1102},"end":{"line":16,"column":169,"offset":1106},"indent":[]}}],"position":{"start":{"line":16,"column":163,"offset":1100},"end":{"line":16,"column":171,"offset":1108},"indent":[]}},{"type":"text","value":"是一个名为 ","position":{"start":{"line":16,"column":171,"offset":1108},"end":{"line":16,"column":177,"offset":1114},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":16,"column":177,"offset":1114},"end":{"line":16,"column":184,"offset":1121},"indent":[]}},{"type":"text","value":" 的对象， ","position":{"start":{"line":16,"column":184,"offset":1121},"end":{"line":16,"column":190,"offset":1127},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":16,"column":190,"offset":1127},"end":{"line":16,"column":197,"offset":1134},"indent":[]}},{"type":"text","value":" 字段与其他属性并行。","position":{"start":{"line":16,"column":197,"offset":1134},"end":{"line":16,"column":208,"offset":1145},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":938},"end":{"line":16,"column":208,"offset":1145},"indent":[]}},{"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":18,"column":5,"offset":1151},"end":{"line":18,"column":9,"offset":1155},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":1147},"end":{"line":18,"column":9,"offset":1155},"indent":[]},"data":{"id":"数据结构","htmlAttributes":{"id":"数据结构"},"hProperties":{"id":"数据结构"}}},{"type":"paragraph","children":[{"type":"text","value":"以节点元素为例，其属性的数据结构如下：","position":{"start":{"line":19,"column":1,"offset":1156},"end":{"line":19,"column":20,"offset":1175},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":1156},"end":{"line":19,"column":20,"offset":1175},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
{\n\tid: 'node0',          // 元素的 id\n  shape: 'circle',      // 元素的图形\n  size: 40,             // 元素的大小\n  label: 'node0'        // 标签文字\n  labelCfg: {           // 标签配置属性\n    positions: 'center',// 标签的属性，标签在元素中的位置\n    style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行\n      fontSize: 12      // 标签的样式属性，文字字体大小\n    }\n  }\n  ...,                  // 其他属性\n  style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行\n    fill: '#000',       // 样式属性，元素的填充色\n    stroke: '#888',     // 样式属性，元素的描边色\n    ...                 // 其他样式属性\n  }\n}
","position":{"start":{"line":20,"column":1,"offset":1176},"end":{"line":39,"column":4,"offset":1723},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"边元素的属性数据结构与节点元素相似，只是其他属性中多了 ","position":{"start":{"line":41,"column":1,"offset":1725},"end":{"line":41,"column":29,"offset":1753},"indent":[]}},{"type":"html","value":"source","position":{"start":{"line":41,"column":29,"offset":1753},"end":{"line":41,"column":37,"offset":1761},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":41,"column":37,"offset":1761},"end":{"line":41,"column":40,"offset":1764},"indent":[]}},{"type":"html","value":"target","position":{"start":{"line":41,"column":40,"offset":1764},"end":{"line":41,"column":48,"offset":1772},"indent":[]}},{"type":"text","value":" 字段，代表起始和终止节点的 ","position":{"start":{"line":41,"column":48,"offset":1772},"end":{"line":41,"column":63,"offset":1787},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":41,"column":63,"offset":1787},"end":{"line":41,"column":67,"offset":1791},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":41,"column":67,"offset":1791},"end":{"line":41,"column":68,"offset":1792},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":41,"column":68,"offset":1792},"end":{"line":41,"column":74,"offset":1798},"indent":[]}},{"type":"text","value":"细化在图 1 中 ","position":{"start":{"line":41,"column":74,"offset":1798},"end":{"line":41,"column":83,"offset":1807},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":41,"column":85,"offset":1809},"end":{"line":41,"column":95,"offset":1819},"indent":[]}}],"position":{"start":{"line":41,"column":83,"offset":1807},"end":{"line":41,"column":97,"offset":1821},"indent":[]}},{"type":"text","value":" 的视觉需求，我们需要完成：","position":{"start":{"line":41,"column":97,"offset":1821},"end":{"line":41,"column":111,"offset":1835},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":1725},"end":{"line":41,"column":111,"offset":1835},"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":43,"column":3,"offset":1839},"end":{"line":43,"column":8,"offset":1844},"indent":[]}}],"position":{"start":{"line":43,"column":3,"offset":1839},"end":{"line":43,"column":8,"offset":1844},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R1: 节点的描边和填充色，对应节点样式属性：","position":{"start":{"line":44,"column":5,"offset":1849},"end":{"line":44,"column":28,"offset":1872},"indent":[]}},{"type":"html","value":"fill","position":{"start":{"line":44,"column":28,"offset":1872},"end":{"line":44,"column":34,"offset":1878},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":44,"column":34,"offset":1878},"end":{"line":44,"column":35,"offset":1879},"indent":[]}},{"type":"html","value":"stroke","position":{"start":{"line":44,"column":35,"offset":1879},"end":{"line":44,"column":43,"offset":1887},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":44,"column":43,"offset":1887},"end":{"line":44,"column":44,"offset":1888},"indent":[]}}],"position":{"start":{"line":44,"column":5,"offset":1849},"end":{"line":44,"column":44,"offset":1888},"indent":[]}}],"position":{"start":{"line":44,"column":3,"offset":1847},"end":{"line":44,"column":44,"offset":1888},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R2: 节点上标签文本的颜色，对应节点其他属性：","position":{"start":{"line":45,"column":5,"offset":1893},"end":{"line":45,"column":29,"offset":1917},"indent":[]}},{"type":"html","value":"labelCfg","position":{"start":{"line":45,"column":29,"offset":1917},"end":{"line":45,"column":39,"offset":1927},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":45,"column":39,"offset":1927},"end":{"line":45,"column":40,"offset":1928},"indent":[]}}],"position":{"start":{"line":45,"column":5,"offset":1893},"end":{"line":45,"column":40,"offset":1928},"indent":[]}}],"position":{"start":{"line":45,"column":3,"offset":1891},"end":{"line":45,"column":40,"offset":1928},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R3: 边的透明度和颜色，对应边样式属性：","position":{"start":{"line":46,"column":5,"offset":1933},"end":{"line":46,"column":26,"offset":1954},"indent":[]}},{"type":"html","value":"opacity","position":{"start":{"line":46,"column":26,"offset":1954},"end":{"line":46,"column":35,"offset":1963},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":46,"column":35,"offset":1963},"end":{"line":46,"column":36,"offset":1964},"indent":[]}},{"type":"html","value":"stroke","position":{"start":{"line":46,"column":36,"offset":1964},"end":{"line":46,"column":44,"offset":1972},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":46,"column":44,"offset":1972},"end":{"line":46,"column":45,"offset":1973},"indent":[]}}],"position":{"start":{"line":46,"column":5,"offset":1933},"end":{"line":46,"column":45,"offset":1973},"indent":[]}}],"position":{"start":{"line":46,"column":3,"offset":1931},"end":{"line":46,"column":45,"offset":1973},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R4: 边上标签文本的方向和颜色，对应边其他属性：","position":{"start":{"line":47,"column":5,"offset":1978},"end":{"line":47,"column":30,"offset":2003},"indent":[]}},{"type":"html","value":"labelCfg","position":{"start":{"line":47,"column":30,"offset":2003},"end":{"line":47,"column":40,"offset":2013},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":47,"column":40,"offset":2013},"end":{"line":47,"column":41,"offset":2014},"indent":[]}}],"position":{"start":{"line":47,"column":5,"offset":1978},"end":{"line":47,"column":41,"offset":2014},"indent":[]}}],"position":{"start":{"line":47,"column":3,"offset":1976},"end":{"line":47,"column":41,"offset":2014},"indent":[]}}],"position":{"start":{"line":44,"column":3,"offset":1847},"end":{"line":47,"column":41,"offset":2014},"indent":[3,3,3]}}],"position":{"start":{"line":43,"column":1,"offset":1837},"end":{"line":47,"column":41,"offset":2014},"indent":[1,1,1,1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"数据与视觉映射：","position":{"start":{"line":48,"column":3,"offset":2017},"end":{"line":48,"column":11,"offset":2025},"indent":[]}}],"position":{"start":{"line":48,"column":3,"offset":2017},"end":{"line":48,"column":11,"offset":2025},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R5: 根据数据中节点的 ","position":{"start":{"line":49,"column":5,"offset":2030},"end":{"line":49,"column":18,"offset":2043},"indent":[]}},{"type":"html","value":"class","position":{"start":{"line":49,"column":18,"offset":2043},"end":{"line":49,"column":25,"offset":2050},"indent":[]}},{"type":"text","value":" 属性映射节点的形状，对应节点其他属性：","position":{"start":{"line":49,"column":25,"offset":2050},"end":{"line":49,"column":45,"offset":2070},"indent":[]}},{"type":"html","value":"shape","position":{"start":{"line":49,"column":45,"offset":2070},"end":{"line":49,"column":52,"offset":2077},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":49,"column":52,"offset":2077},"end":{"line":49,"column":53,"offset":2078},"indent":[]}}],"position":{"start":{"line":49,"column":5,"offset":2030},"end":{"line":49,"column":53,"offset":2078},"indent":[]}}],"position":{"start":{"line":49,"column":3,"offset":2028},"end":{"line":49,"column":53,"offset":2078},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"R6: 根据数据中边的 ","position":{"start":{"line":50,"column":5,"offset":2083},"end":{"line":50,"column":17,"offset":2095},"indent":[]}},{"type":"html","value":"weight","position":{"start":{"line":50,"column":17,"offset":2095},"end":{"line":50,"column":25,"offset":2103},"indent":[]}},{"type":"text","value":" 属性映射边的粗细，对应边样式属性：","position":{"start":{"line":50,"column":25,"offset":2103},"end":{"line":50,"column":43,"offset":2121},"indent":[]}},{"type":"html","value":"lineWidth","position":{"start":{"line":50,"column":43,"offset":2121},"end":{"line":50,"column":54,"offset":2132},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":50,"column":54,"offset":2132},"end":{"line":50,"column":55,"offset":2133},"indent":[]}}],"position":{"start":{"line":50,"column":5,"offset":2083},"end":{"line":50,"column":55,"offset":2133},"indent":[]}}],"position":{"start":{"line":50,"column":3,"offset":2081},"end":{"line":50,"column":55,"offset":2133},"indent":[]}}],"position":{"start":{"line":49,"column":3,"offset":2028},"end":{"line":50,"column":55,"offset":2133},"indent":[3]}}],"position":{"start":{"line":48,"column":1,"offset":2015},"end":{"line":50,"column":55,"offset":2133},"indent":[1,1]}}],"position":{"start":{"line":43,"column":1,"offset":1837},"end":{"line":50,"column":55,"offset":2133},"indent":[1,1,1,1,1,1,1]}},{"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":52,"column":4,"offset":2138},"end":{"line":52,"column":8,"offset":2142},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":2135},"end":{"line":52,"column":8,"offset":2142},"indent":[]},"data":{"id":"配置属性","htmlAttributes":{"id":"配置属性"},"hProperties":{"id":"配置属性"}}},{"type":"paragraph","children":[{"type":"text","value":"在 G6 中，根据不同的场景需求，有 7 种配置元素属性的方式。这里，我们简单介绍其中的两种：","position":{"start":{"line":53,"column":1,"offset":2143},"end":{"line":53,"column":48,"offset":2190},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":2143},"end":{"line":53,"column":48,"offset":2190},"indent":[]}},{"type":"list","ordered":true,"start":1,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"实例化图时配置元素的全局属性；","position":{"start":{"line":55,"column":4,"offset":2195},"end":{"line":55,"column":19,"offset":2210},"indent":[]}}],"position":{"start":{"line":55,"column":4,"offset":2195},"end":{"line":55,"column":19,"offset":2210},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":2192},"end":{"line":55,"column":19,"offset":2210},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在数据中配置。","position":{"start":{"line":56,"column":4,"offset":2214},"end":{"line":56,"column":11,"offset":2221},"indent":[]}}],"position":{"start":{"line":56,"column":4,"offset":2214},"end":{"line":56,"column":11,"offset":2221},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":2211},"end":{"line":56,"column":11,"offset":2221},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":2192},"end":{"line":56,"column":11,"offset":2221},"indent":[1]}},{"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":"1. 实例化图时全局配置","position":{"start":{"line":58,"column":5,"offset":2227},"end":{"line":58,"column":17,"offset":2239},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":2223},"end":{"line":58,"column":17,"offset":2239},"indent":[]},"data":{"id":"1-实例化图时全局配置","htmlAttributes":{"id":"1-实例化图时全局配置"},"hProperties":{"id":"1-实例化图时全局配置"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"适用场景：","position":{"start":{"line":59,"column":3,"offset":2242},"end":{"line":59,"column":8,"offset":2247},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":2240},"end":{"line":59,"column":10,"offset":2249},"indent":[]}},{"type":"text","value":"所有节点统一的属性配置，所有边统一的属性配置。","position":{"start":{"line":59,"column":10,"offset":2249},"end":{"line":59,"column":33,"offset":2272},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":59,"column":33,"offset":2272},"end":{"line":59,"column":39,"offset":2278},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"使用方式：","position":{"start":{"line":59,"column":41,"offset":2280},"end":{"line":59,"column":46,"offset":2285},"indent":[]}}],"position":{"start":{"line":59,"column":39,"offset":2278},"end":{"line":59,"column":48,"offset":2287},"indent":[]}},{"type":"text","value":"使用图的两个配置项：","position":{"start":{"line":59,"column":48,"offset":2287},"end":{"line":59,"column":58,"offset":2297},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":2240},"end":{"line":59,"column":58,"offset":2297},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"defaultNode","position":{"start":{"line":61,"column":3,"offset":2301},"end":{"line":61,"column":16,"offset":2314},"indent":[]}},{"type":"text","value":"：节点在默认状态下的","position":{"start":{"line":61,"column":16,"offset":2314},"end":{"line":61,"column":26,"offset":2324},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"样式属性","position":{"start":{"line":61,"column":28,"offset":2326},"end":{"line":61,"column":32,"offset":2330},"indent":[]}}],"position":{"start":{"line":61,"column":26,"offset":2324},"end":{"line":61,"column":34,"offset":2332},"indent":[]}},{"type":"text","value":"（","position":{"start":{"line":61,"column":34,"offset":2332},"end":{"line":61,"column":35,"offset":2333},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":61,"column":35,"offset":2333},"end":{"line":61,"column":42,"offset":2340},"indent":[]}},{"type":"text","value":"）和","position":{"start":{"line":61,"column":42,"offset":2340},"end":{"line":61,"column":44,"offset":2342},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"其他属性","position":{"start":{"line":61,"column":46,"offset":2344},"end":{"line":61,"column":50,"offset":2348},"indent":[]}}],"position":{"start":{"line":61,"column":44,"offset":2342},"end":{"line":61,"column":52,"offset":2350},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":61,"column":52,"offset":2350},"end":{"line":61,"column":53,"offset":2351},"indent":[]}}],"position":{"start":{"line":61,"column":3,"offset":2301},"end":{"line":61,"column":53,"offset":2351},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":2299},"end":{"line":61,"column":53,"offset":2351},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"defaultEdge","position":{"start":{"line":62,"column":3,"offset":2354},"end":{"line":62,"column":16,"offset":2367},"indent":[]}},{"type":"text","value":"：边在默认状态下的","position":{"start":{"line":62,"column":16,"offset":2367},"end":{"line":62,"column":25,"offset":2376},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"样式属性","position":{"start":{"line":62,"column":27,"offset":2378},"end":{"line":62,"column":31,"offset":2382},"indent":[]}}],"position":{"start":{"line":62,"column":25,"offset":2376},"end":{"line":62,"column":33,"offset":2384},"indent":[]}},{"type":"text","value":"（","position":{"start":{"line":62,"column":33,"offset":2384},"end":{"line":62,"column":34,"offset":2385},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":62,"column":34,"offset":2385},"end":{"line":62,"column":41,"offset":2392},"indent":[]}},{"type":"text","value":"）和","position":{"start":{"line":62,"column":41,"offset":2392},"end":{"line":62,"column":43,"offset":2394},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"其他属性","position":{"start":{"line":62,"column":45,"offset":2396},"end":{"line":62,"column":49,"offset":2400},"indent":[]}}],"position":{"start":{"line":62,"column":43,"offset":2394},"end":{"line":62,"column":51,"offset":2402},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":62,"column":51,"offset":2402},"end":{"line":62,"column":52,"offset":2403},"indent":[]}}],"position":{"start":{"line":62,"column":3,"offset":2354},"end":{"line":62,"column":52,"offset":2403},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":2352},"end":{"line":62,"column":52,"offset":2403},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":2299},"end":{"line":62,"column":52,"offset":2403},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":" 注意 ：由于是统一的配置，不能根据数据中的属性（如 ","position":{"start":{"line":64,"column":1,"offset":2405},"end":{"line":64,"column":28,"offset":2432},"indent":[]}},{"type":"html","value":"class","position":{"start":{"line":64,"column":28,"offset":2432},"end":{"line":64,"column":35,"offset":2439},"indent":[]}},{"type":"text","value":"、","position":{"start":{"line":64,"column":35,"offset":2439},"end":{"line":64,"column":36,"offset":2440},"indent":[]}},{"type":"html","value":"weight","position":{"start":{"line":64,"column":36,"offset":2440},"end":{"line":64,"column":44,"offset":2448},"indent":[]}},{"type":"text","value":"）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果：","position":{"start":{"line":64,"column":44,"offset":2448},"end":{"line":64,"column":87,"offset":2491},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":64,"column":87,"offset":2491},"end":{"line":64,"column":93,"offset":2497},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834303607-c95a7080-3643-4f54-a5ad-8d68aea3f2e7.png#align=left&display=inline&height=263&name=image.png&originHeight=1108&originWidth=1380&search=&size=321741&status=done&width=328","alt":"image.png","position":{"start":{"line":64,"column":93,"offset":2497},"end":{"line":64,"column":336,"offset":2740},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":2405},"end":{"line":64,"column":336,"offset":2740},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"图 2  全局配置元素属性后的 ","position":{"start":{"line":65,"column":3,"offset":2743},"end":{"line":65,"column":19,"offset":2759},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":65,"column":21,"offset":2761},"end":{"line":65,"column":31,"offset":2771},"indent":[]}}],"position":{"start":{"line":65,"column":19,"offset":2759},"end":{"line":65,"column":33,"offset":2773},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":65,"column":33,"offset":2773},"end":{"line":65,"column":34,"offset":2774},"indent":[]}}],"position":{"start":{"line":65,"column":3,"offset":2743},"end":{"line":65,"column":34,"offset":2774},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":2741},"end":{"line":65,"column":34,"offset":2774},"indent":[]}},{"type":"paragraph","children":[{"type":"html","value":"
","position":{"start":{"line":68,"column":1,"offset":2777},"end":{"line":68,"column":7,"offset":2783},"indent":[]}},{"type":"text","value":"通过如下方式在实例化图时 ","position":{"start":{"line":68,"column":7,"offset":2783},"end":{"line":68,"column":20,"offset":2796},"indent":[]}},{"type":"html","value":"defaultNode","position":{"start":{"line":68,"column":20,"offset":2796},"end":{"line":68,"column":33,"offset":2809},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":68,"column":33,"offset":2809},"end":{"line":68,"column":36,"offset":2812},"indent":[]}},{"type":"html","value":"defaultEdge","position":{"start":{"line":68,"column":36,"offset":2812},"end":{"line":68,"column":49,"offset":2825},"indent":[]}},{"type":"text","value":" ，可以完成上图效果：","position":{"start":{"line":68,"column":49,"offset":2825},"end":{"line":68,"column":60,"offset":2836},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":2777},"end":{"line":68,"column":60,"offset":2836},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const graph = new G6.Graph({\n  // ...                   // 图的其他配置\n  // 节点在默认状态下的样式配置（style）和其他配置\n  defaultNode: {\n    size: 30, // 节点大小\n    // ...                 // 节点的其他配置\n    // 节点样式配置\n    style: {\n      fill: 'steelblue', // 节点填充色\n      stroke: '#666', // 节点描边色\n      lineWidth: 1, // 节点描边粗细\n    },\n    // 节点上的标签文本配置\n    labelCfg: {\n      // 节点上的标签文本样式配置\n      style: {\n        fill: '#fff', // 节点标签文字颜色\n      },\n    },\n  },\n  // 边在默认状态下的样式配置（style）和其他配置\n  defaultEdge: {\n    // ...                 // 边的其他配置\n    // 边样式配置\n    style: {\n      opacity: 0.6, // 边透明度\n      stroke: 'grey', // 边描边颜色\n    },\n    // 边上的标签文本配置\n    labelCfg: {\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n
","position":{"start":{"line":69,"column":1,"offset":2837},"end":{"line":104,"column":4,"offset":3656},"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]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#2-在数据中配置","title":null,"children":[],"data":{"hProperties":{"aria-label":"2 在数据中配置 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"2. 在数据中配置","position":{"start":{"line":106,"column":5,"offset":3662},"end":{"line":106,"column":14,"offset":3671},"indent":[]}}],"position":{"start":{"line":106,"column":1,"offset":3658},"end":{"line":106,"column":14,"offset":3671},"indent":[]},"data":{"id":"2-在数据中配置","htmlAttributes":{"id":"2-在数据中配置"},"hProperties":{"id":"2-在数据中配置"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"适用场景：","position":{"start":{"line":107,"column":3,"offset":3674},"end":{"line":107,"column":8,"offset":3679},"indent":[]}}],"position":{"start":{"line":107,"column":1,"offset":3672},"end":{"line":107,"column":10,"offset":3681},"indent":[]}},{"type":"text","value":"不同节点/边可以有不同的个性化配置。","position":{"start":{"line":107,"column":10,"offset":3681},"end":{"line":107,"column":28,"offset":3699},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":107,"column":28,"offset":3699},"end":{"line":107,"column":34,"offset":3705},"indent":[]}},{"type":"text","value":"因此，这种配置方式可以满足 R5、R6 需求。","position":{"start":{"line":107,"column":34,"offset":3705},"end":{"line":107,"column":57,"offset":3728},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":107,"column":57,"offset":3728},"end":{"line":107,"column":63,"offset":3734},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"使用方式：","position":{"start":{"line":107,"column":65,"offset":3736},"end":{"line":107,"column":70,"offset":3741},"indent":[]}}],"position":{"start":{"line":107,"column":63,"offset":3734},"end":{"line":107,"column":72,"offset":3743},"indent":[]}},{"type":"text","value":"可以直接将配置写入数据文件；也可以在读入数据后，通过遍历的方式写入配置。这里展示读入数据后，通过遍历的方式写入配置。下面代码展示了如何遍历数据进行属性的配置：","position":{"start":{"line":107,"column":72,"offset":3743},"end":{"line":107,"column":151,"offset":3822},"indent":[]}}],"position":{"start":{"line":107,"column":1,"offset":3672},"end":{"line":107,"column":151,"offset":3822},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const nodes = remoteData.nodes;\nnodes.forEach(node => {\n  if (!node.style) {\n    node.style = {};\n  }\n  switch (\n    node.class // 根据节点数据中的 class 属性配置图形\n  ) {\n    case 'c0': {\n      node.shape = 'circle'; // class = 'c0' 时节点图形为 circle\n      break;\n    }\n    case 'c1': {\n      node.shape = 'rect'; // class = 'c1' 时节点图形为 rect\n      node.size = [35, 20]; // class = 'c1' 时节点大小\n      break;\n    }\n    case 'c2': {\n      node.shape = 'ellipse'; // class = 'c1' 时节点图形为 ellipse\n      node.size = [35, 20]; // class = 'c2' 时节点大小\n      break;\n    }\n  }\n});\n\ngraph.data(remoteData);\n
","position":{"start":{"line":108,"column":1,"offset":3823},"end":{"line":133,"column":4,"offset":4437},"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]}},{"type":"paragraph","children":[{"type":"text","value":"运行结果如下：","position":{"start":{"line":135,"column":1,"offset":4439},"end":{"line":135,"column":8,"offset":4446},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":135,"column":8,"offset":4446},"end":{"line":135,"column":14,"offset":4452},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053670628-f03b618a-6d61-4b95-97ed-13f8553ddbf7.png#align=left&display=inline&height=295&name=image.png&originHeight=461&originWidth=591&search=&size=45245&status=done&width=378","alt":"image.png","position":{"start":{"line":135,"column":14,"offset":4452},"end":{"line":135,"column":254,"offset":4692},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":135,"column":254,"offset":4692},"end":{"line":135,"column":260,"offset":4698},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":4439},"end":{"line":135,"column":260,"offset":4698},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"图 3","position":{"start":{"line":137,"column":3,"offset":4702},"end":{"line":137,"column":6,"offset":4705},"indent":[]}}],"position":{"start":{"line":137,"column":3,"offset":4702},"end":{"line":137,"column":6,"offset":4705},"indent":[]}}],"position":{"start":{"line":137,"column":1,"offset":4700},"end":{"line":137,"column":6,"offset":4705},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 shape 属性之外，我们还覆盖了上文全局配置的节点的 size 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 size 属性为数字 30。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。","position":{"start":{"line":140,"column":1,"offset":4708},"end":{"line":140,"column":186,"offset":4893},"indent":[]}}],"position":{"start":{"line":140,"column":1,"offset":4708},"end":{"line":140,"column":186,"offset":4893},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"进一步地，我们尝试根据数据的比重不同，配置不一样边的粗细：","position":{"start":{"line":142,"column":1,"offset":4895},"end":{"line":142,"column":30,"offset":4924},"indent":[]}}],"position":{"start":{"line":142,"column":1,"offset":4895},"end":{"line":142,"column":30,"offset":4924},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
// const nodes = ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n});\n\ngraph.data(remoteData);\n
","position":{"start":{"line":143,"column":1,"offset":4925},"end":{"line":156,"column":4,"offset":5170},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"结果如下：","position":{"start":{"line":158,"column":1,"offset":5172},"end":{"line":158,"column":6,"offset":5177},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":158,"column":6,"offset":5177},"end":{"line":158,"column":12,"offset":5183},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053730991-c5410026-ca56-422c-ad20-3725825fc3e5.png#align=left&display=inline&height=465&name=image.png&originHeight=465&originWidth=618&search=&size=51999&status=done&width=618","alt":"image.png","position":{"start":{"line":158,"column":12,"offset":5183},"end":{"line":158,"column":252,"offset":5423},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":158,"column":252,"offset":5423},"end":{"line":158,"column":258,"offset":5429},"indent":[]}},{"type":"text","value":"如图所示，边的粗细已经按照数据的比重成功渲染了出来，但是边原有的样式（透明度、颜色）却丢失了。这是因为我们提到过动态配置属性会覆盖全局配置属性，这里配置了 ","position":{"start":{"line":158,"column":258,"offset":5429},"end":{"line":158,"column":336,"offset":5507},"indent":[]}},{"type":"html","value":"style.lineWidth","position":{"start":{"line":158,"column":336,"offset":5507},"end":{"line":158,"column":353,"offset":5524},"indent":[]}},{"type":"text","value":"，导致覆盖了全局的 ","position":{"start":{"line":158,"column":353,"offset":5524},"end":{"line":158,"column":363,"offset":5534},"indent":[]}},{"type":"html","value":"style","position":{"start":{"line":158,"column":363,"offset":5534},"end":{"line":158,"column":370,"offset":5541},"indent":[]}},{"type":"text","value":" 对象。解决办法是将被覆盖的边的样式都移到动态配置里面来：","position":{"start":{"line":158,"column":370,"offset":5541},"end":{"line":158,"column":399,"offset":5570},"indent":[]}}],"position":{"start":{"line":158,"column":1,"offset":5172},"end":{"line":158,"column":399,"offset":5570},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const graph = new G6.Graph({\n  // ...\n  defaultEdge: {\n    // 去掉全局配置的 style\n    labelCfg: {\n      // 边上的标签文本配置\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n\n// 遍历点数据\n// const nodes = ...\n// nodes.forEach ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n  // 移到此处\n  opt.style.opacity = 0.6;\n  opt.style.stroke = 'grey';\n});\n\ngraph.data(remoteData);\ngraph.render();\n
","position":{"start":{"line":159,"column":1,"offset":5571},"end":{"line":188,"column":4,"offset":6096},"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]}},{"type":"paragraph","children":[{"type":"html","value":"
","position":{"start":{"line":190,"column":1,"offset":6098},"end":{"line":190,"column":7,"offset":6104},"indent":[]}},{"type":"text","value":"再次渲染，结果如下：","position":{"start":{"line":190,"column":7,"offset":6104},"end":{"line":190,"column":17,"offset":6114},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":190,"column":17,"offset":6114},"end":{"line":190,"column":23,"offset":6120},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053730983-8ea78c4e-2155-486d-b704-b99eed57a015.png#align=left&display=inline&height=465&name=image.png&originHeight=465&originWidth=614&search=&size=48748&status=done&width=614","alt":"image.png","position":{"start":{"line":190,"column":23,"offset":6120},"end":{"line":190,"column":263,"offset":6360},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":190,"column":263,"offset":6360},"end":{"line":190,"column":269,"offset":6366},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":190,"column":269,"offset":6366},"end":{"line":191,"column":1,"offset":6367},"indent":[1]}},{"type":"html","value":"
","position":{"start":{"line":191,"column":1,"offset":6367},"end":{"line":191,"column":7,"offset":6373},"indent":[]}},{"type":"text","value":"如图所示，边的透明度和颜色均渲染正确。","position":{"start":{"line":191,"column":7,"offset":6373},"end":{"line":191,"column":26,"offset":6392},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":191,"column":26,"offset":6392},"end":{"line":191,"column":32,"offset":6398},"indent":[]}}],"position":{"start":{"line":190,"column":1,"offset":6098},"end":{"line":191,"column":32,"offset":6398},"indent":[1]}},{"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":193,"column":4,"offset":6403},"end":{"line":193,"column":8,"offset":6407},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":6400},"end":{"line":193,"column":8,"offset":6407},"indent":[]},"data":{"id":"完整代码","htmlAttributes":{"id":"完整代码"},"hProperties":{"id":"完整代码"}}},{"type":"paragraph","children":[{"type":"text","value":"至此，完整代码如下：","position":{"start":{"line":194,"column":1,"offset":6408},"end":{"line":194,"column":11,"offset":6418},"indent":[]}}],"position":{"start":{"line":194,"column":1,"offset":6408},"end":{"line":194,"column":11,"offset":6418},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 800,\n      height: 600,\n      fitView: true,\n      fitViewPadding: [ 20, 40, 50, 20 ],\n      defaultNode: {\n        size: 30,\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n    });\n\t\tconst main = async () => {\n      const response = await fetch(\n        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n      );\n      const remoteData = await response.json();\n      const nodes = remoteData.nodes;\n      const edges = remoteData.edges;\n      nodes.forEach(node => {\n        if (!node.style) {\n          node.style = {};\n        }\n        node.style.lineWidth = 1;\n        node.style.stroke = '#666';\n        node.style.fill = 'steelblue';\n        switch (node.class) {\n          case 'c0': {\n            node.shape = 'circle';\n            break;\n          }\n          case 'c1': {\n            node.shape = 'rect';\n            node.size = [ 35, 20 ];\n            break;\n          }\n          case 'c2': {\n            node.shape = 'ellipse';\n            node.size = [ 35, 20 ];\n            break;\n          }\n        }\n      });\n      edges.forEach(edge => {\n        if (!edge.style) {\n          edge.style = {};\n        }\n        edge.style.lineWidth = edge.weight;\n        edge.style.opacity = 0.6;\n        edge.style.stroke = 'grey';\n      });\n\n      graph.data(remoteData);\n      graph.render();\n    };\n    main();\n  </script>\n</body>\n</html>
","position":{"start":{"line":195,"column":1,"offset":6419},"end":{"line":273,"column":4,"offset":8272},"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,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":275,"column":1,"offset":8274},"end":{"line":275,"column":2,"offset":8275},"indent":[]}},{"type":"html","value":"注意","position":{"start":{"line":275,"column":2,"offset":8275},"end":{"line":275,"column":6,"offset":8279},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":275,"column":6,"offset":8279},"end":{"line":275,"column":7,"offset":8280},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":275,"column":7,"offset":8280},"end":{"line":275,"column":13,"offset":8286},"indent":[]}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":275,"column":13,"offset":8286},"end":{"line":275,"column":24,"offset":8297},"indent":[]}},{"type":"html","value":"'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'","position":{"start":{"line":275,"column":24,"offset":8297},"end":{"line":275,"column":115,"offset":8388},"indent":[]}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":275,"column":115,"offset":8388},"end":{"line":275,"column":126,"offset":8399},"indent":[]}}],"position":{"start":{"line":275,"column":1,"offset":8274},"end":{"line":275,"column":126,"offset":8399},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":276,"column":1,"offset":8400}}}}