{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-7e3bb971ca0c3fe177b45a5aa80db81f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"什么是-state"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%80%E4%B9%88%E6%98%AF-state","aria-label":"什么是 state permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"什么是 state","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":"G6 中的 ","position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":7,"offset":20}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"state","position":{"start":{"line":3,"column":9,"offset":22},"end":{"line":3,"column":14,"offset":27}}}],"position":{"start":{"line":3,"column":7,"offset":20},"end":{"line":3,"column":16,"offset":29}}},{"type":"text","value":"，指的是状态，包括","position":{"start":{"line":3,"column":16,"offset":29},"end":{"line":3,"column":25,"offset":38}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"交互状态","position":{"start":{"line":3,"column":27,"offset":40},"end":{"line":3,"column":31,"offset":44}}}],"position":{"start":{"line":3,"column":25,"offset":38},"end":{"line":3,"column":33,"offset":46}}},{"type":"text","value":"和","position":{"start":{"line":3,"column":33,"offset":46},"end":{"line":3,"column":34,"offset":47}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"业务状态","position":{"start":{"line":3,"column":36,"offset":49},"end":{"line":3,"column":40,"offset":53}}}],"position":{"start":{"line":3,"column":34,"offset":47},"end":{"line":3,"column":42,"offset":55}}},{"type":"text","value":"两种。","position":{"start":{"line":3,"column":42,"offset":55},"end":{"line":3,"column":45,"offset":58}}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":45,"offset":58}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"交互状态"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E7%8A%B6%E6%80%81","aria-label":"交互状态 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互状态","position":{"start":{"line":5,"column":5,"offset":64},"end":{"line":5,"column":9,"offset":68}}}],"position":{"start":{"line":5,"column":1,"offset":60},"end":{"line":5,"column":9,"offset":68}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。","position":{"start":{"line":6,"column":1,"offset":69},"end":{"line":6,"column":45,"offset":113}}}],"position":{"start":{"line":6,"column":1,"offset":69},"end":{"line":6,"column":45,"offset":113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 中默认处理的是交互状态。","position":{"start":{"line":8,"column":1,"offset":115},"end":{"line":8,"column":16,"offset":130}}}],"position":{"start":{"line":8,"column":1,"offset":115},"end":{"line":8,"column":16,"offset":130}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"业务状态"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%B8%9A%E5%8A%A1%E7%8A%B6%E6%80%81","aria-label":"业务状态 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"业务状态","position":{"start":{"line":10,"column":5,"offset":136},"end":{"line":10,"column":9,"offset":140}}}],"position":{"start":{"line":10,"column":1,"offset":132},"end":{"line":10,"column":9,"offset":140}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"指根据用户业务需求自定义的状态。业务状态是与交互动作无关的，与具体业务逻辑强相关的，也可理解为是强数据驱动的。如某个任务的执行状态、某条申请的审批状态等，不同的数据值代表不同的业务状态。业务状态与用户交互动作无关，但在 G6 中的处理方式同交互状态一致。","position":{"start":{"line":11,"column":1,"offset":141},"end":{"line":11,"column":128,"offset":268}}}],"position":{"start":{"line":11,"column":1,"offset":141},"end":{"line":11,"column":128,"offset":268}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"何时使用-state"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8-state","aria-label":"何时使用 state permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"何时使用 state","position":{"start":{"line":13,"column":4,"offset":273},"end":{"line":13,"column":14,"offset":283}}}],"position":{"start":{"line":13,"column":1,"offset":270},"end":{"line":13,"column":14,"offset":283}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"判断是否该使用 state 的原则很简单，从交互和业务两个层面来看：","position":{"start":{"line":14,"column":1,"offset":284},"end":{"line":14,"column":35,"offset":318}}}],"position":{"start":{"line":14,"column":1,"offset":284},"end":{"line":14,"column":35,"offset":318}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"某个交互动作要改变节点或边的样式及属性；","position":{"start":{"line":16,"column":3,"offset":322},"end":{"line":16,"column":23,"offset":342}}}],"position":{"start":{"line":16,"column":1,"offset":320},"end":{"line":16,"column":23,"offset":342}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"呈现给用户的内容会根据数据改变（如 1 代表成功，0 代表失败）。","position":{"start":{"line":17,"column":3,"offset":345},"end":{"line":17,"column":36,"offset":378}}}],"position":{"start":{"line":17,"column":1,"offset":343},"end":{"line":17,"column":36,"offset":378}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":320},"end":{"line":17,"column":36,"offset":378}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"满足上述条件其一，则应该使用 state。","position":{"start":{"line":19,"column":1,"offset":380},"end":{"line":19,"column":22,"offset":401}}}],"position":{"start":{"line":19,"column":1,"offset":380},"end":{"line":19,"column":22,"offset":401}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置不同-state-的样式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E4%B8%8D%E5%90%8C-state-%E7%9A%84%E6%A0%B7%E5%BC%8F","aria-label":"配置不同 state 的样式 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置不同 state 的样式","position":{"start":{"line":21,"column":4,"offset":406},"end":{"line":21,"column":18,"offset":420}}}],"position":{"start":{"line":21,"column":1,"offset":403},"end":{"line":21,"column":18,"offset":420}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。","position":{"start":{"line":22,"column":1,"offset":421},"end":{"line":22,"column":114,"offset":534}}}],"position":{"start":{"line":22,"column":1,"offset":421},"end":{"line":22,"column":114,"offset":534}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中，定义 state 时，我们有两种选择：","position":{"start":{"line":24,"column":1,"offset":536},"end":{"line":24,"column":27,"offset":562}}}],"position":{"start":{"line":24,"column":1,"offset":536},"end":{"line":24,"column":27,"offset":562}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"在实例化 Graph 时，通过 ","position":{"start":{"line":26,"column":3,"offset":566},"end":{"line":26,"column":19,"offset":582}}},{"type":"raw","value":"nodeStateStyles","position":{"start":{"line":26,"column":19,"offset":582},"end":{"line":26,"column":36,"offset":599}}},{"type":"text","value":" 和 ","position":{"start":{"line":26,"column":36,"offset":599},"end":{"line":26,"column":39,"offset":602}}},{"type":"raw","value":"edgeStateStyles","position":{"start":{"line":26,"column":39,"offset":602},"end":{"line":26,"column":56,"offset":619}}},{"type":"text","value":" 来定义；","position":{"start":{"line":26,"column":56,"offset":619},"end":{"line":26,"column":61,"offset":624}}}],"position":{"start":{"line":26,"column":1,"offset":564},"end":{"line":26,"column":61,"offset":624}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"在自定义节点时，在 options 配置项的 ","position":{"start":{"line":27,"column":3,"offset":627},"end":{"line":27,"column":26,"offset":650}}},{"type":"raw","value":"stateStyles","position":{"start":{"line":27,"column":26,"offset":650},"end":{"line":27,"column":39,"offset":663}}},{"type":"text","value":" 中定义状态。","position":{"start":{"line":27,"column":39,"offset":663},"end":{"line":27,"column":46,"offset":670}}}],"position":{"start":{"line":27,"column":1,"offset":625},"end":{"line":27,"column":46,"offset":670}}},{"type":"text","value":"\n"}],"position":{"start":{"line":26,"column":1,"offset":564},"end":{"line":27,"column":46,"offset":670}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"实例化-graph-时定义-state-样式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%9E%E4%BE%8B%E5%8C%96-graph-%E6%97%B6%E5%AE%9A%E4%B9%89-state-%E6%A0%B7%E5%BC%8F","aria-label":"实例化 graph 时定义 state 样式 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"实例化 Graph 时定义 state 样式","position":{"start":{"line":29,"column":5,"offset":676},"end":{"line":29,"column":27,"offset":698}}}],"position":{"start":{"line":29,"column":1,"offset":672},"end":{"line":29,"column":27,"offset":698}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'diamond',\n    style: {\n      // 默认状态样式\n      fill: 'blue',\n    },\n  },\n  nodeStateStyles: {\n    hover: {\n      // hover 状态为 true 时的样式\n      fill: '#d3adf7',\n    },\n    running: {\n      // running 状态为 true 时的样式\n      stroke: 'steelblue',\n    },\n  },\n});\n
","position":{"start":{"line":30,"column":1,"offset":699},"end":{"line":50,"column":4,"offset":1099}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"上面的实例代码中，我们在实例化 Graph 时候，通过 ","position":{"start":{"line":52,"column":1,"offset":1101},"end":{"line":52,"column":29,"offset":1129}}},{"type":"raw","value":"nodeStateStyles","position":{"start":{"line":52,"column":29,"offset":1129},"end":{"line":52,"column":46,"offset":1146}}},{"type":"text","value":" 定义了交互状态 ","position":{"start":{"line":52,"column":46,"offset":1146},"end":{"line":52,"column":55,"offset":1155}}},{"type":"raw","value":"hover","position":{"start":{"line":52,"column":55,"offset":1155},"end":{"line":52,"column":62,"offset":1162}}},{"type":"text","value":" 和业务状态","position":{"start":{"line":52,"column":62,"offset":1162},"end":{"line":52,"column":68,"offset":1168}}},{"type":"raw","value":"running","position":{"start":{"line":52,"column":68,"offset":1168},"end":{"line":52,"column":77,"offset":1177}}},{"type":"text","value":"，当用户操作过程中，鼠标 ","position":{"start":{"line":52,"column":77,"offset":1177},"end":{"line":52,"column":90,"offset":1190}}},{"type":"raw","value":"hover","position":{"start":{"line":52,"column":90,"offset":1190},"end":{"line":52,"column":97,"offset":1197}}},{"type":"text","value":" 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 ","position":{"start":{"line":52,"column":97,"offset":1197},"end":{"line":52,"column":147,"offset":1247}}},{"type":"raw","value":"running","position":{"start":{"line":52,"column":147,"offset":1247},"end":{"line":52,"column":156,"offset":1256}}},{"type":"text","value":" 状态定义的颜色。","position":{"start":{"line":52,"column":156,"offset":1256},"end":{"line":52,"column":165,"offset":1265}}},{"type":"raw","value":"
","position":{"start":{"line":52,"column":165,"offset":1265},"end":{"line":52,"column":171,"offset":1271}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1570584254138-c2ef66cc-0067-41bf-8235-63798c65a3c1.gif#align=left&display=inline&height=181&name=3.gif&originHeight=181&originWidth=247&search=&size=8886&status=done&width=247","alt":"3.gif"},"children":[],"position":{"start":{"line":52,"column":171,"offset":1271},"end":{"line":52,"column":402,"offset":1502}}}],"position":{"start":{"line":52,"column":1,"offset":1101},"end":{"line":52,"column":402,"offset":1502}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 ","position":{"start":{"line":54,"column":1,"offset":1504},"end":{"line":54,"column":43,"offset":1546}}},{"type":"raw","value":"edgeStateStyles","position":{"start":{"line":54,"column":43,"offset":1546},"end":{"line":54,"column":60,"offset":1563}}},{"type":"text","value":" 可以定义不同状态下边的样式。","position":{"start":{"line":54,"column":60,"offset":1563},"end":{"line":54,"column":75,"offset":1578}}}],"position":{"start":{"line":54,"column":1,"offset":1504},"end":{"line":54,"column":75,"offset":1578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"自定义节点和边时定义-state-样式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8A%82%E7%82%B9%E5%92%8C%E8%BE%B9%E6%97%B6%E5%AE%9A%E4%B9%89-state-%E6%A0%B7%E5%BC%8F","aria-label":"自定义节点和边时定义 state 样式 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"自定义节点和边时定义 state 样式","position":{"start":{"line":56,"column":5,"offset":1584},"end":{"line":56,"column":24,"offset":1603}}}],"position":{"start":{"line":56,"column":1,"offset":1580},"end":{"line":56,"column":24,"offset":1603}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面代码是在自定义节点时候通过 ","position":{"start":{"line":57,"column":1,"offset":1604},"end":{"line":57,"column":17,"offset":1620}}},{"type":"raw","value":"stateStyles","position":{"start":{"line":57,"column":17,"offset":1620},"end":{"line":57,"column":30,"offset":1633}}},{"type":"text","value":" 定义的交互状态 ","position":{"start":{"line":57,"column":30,"offset":1633},"end":{"line":57,"column":39,"offset":1642}}},{"type":"raw","value":"hover","position":{"start":{"line":57,"column":39,"offset":1642},"end":{"line":57,"column":46,"offset":1649}}},{"type":"text","value":" 和 ","position":{"start":{"line":57,"column":46,"offset":1649},"end":{"line":57,"column":49,"offset":1652}}},{"type":"raw","value":"selected","position":{"start":{"line":57,"column":49,"offset":1652},"end":{"line":57,"column":59,"offset":1662}}},{"type":"text","value":"。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。","position":{"start":{"line":57,"column":59,"offset":1662},"end":{"line":57,"column":120,"offset":1723}}}],"position":{"start":{"line":57,"column":1,"offset":1604},"end":{"line":57,"column":120,"offset":1723}}},{"type":"text","value":"\n"},{"type":"raw","value":"
G6.registerNode('customShape', {\n  // 自定义节点时的配置\n  options: {\n    size: 60,\n    style: {\n      lineWidth: 1\n    },\n    stateStyles: {\n      // 鼠标hover状态下的配置\n      hover: {\n        fillOpacity: 0.8\n      },\n      // 选中节点状态下的配置\n      selected: {\n        lineWidth: 3\n      }\n    }\n  }\n}
","position":{"start":{"line":58,"column":1,"offset":1724},"end":{"line":78,"column":4,"offset":2025}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1570584254137-65f129dd-45fc-430d-9485-991ee1d2dbba.gif#align=left&display=inline&height=181&name=3.gif&originHeight=181&originWidth=247&search=&size=8385&status=done&width=247","alt":"3.gif"},"children":[],"position":{"start":{"line":79,"column":1,"offset":2026},"end":{"line":79,"column":232,"offset":2257}}}],"position":{"start":{"line":79,"column":1,"offset":2026},"end":{"line":79,"column":232,"offset":2257}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"使用-state"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8-state","aria-label":"使用 state permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用 state","position":{"start":{"line":81,"column":4,"offset":2262},"end":{"line":81,"column":12,"offset":2270}}}],"position":{"start":{"line":81,"column":1,"offset":2259},"end":{"line":81,"column":12,"offset":2270}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不管使用哪种方式，当我们定义好了 state 以后，","position":{"start":{"line":82,"column":1,"offset":2271},"end":{"line":82,"column":27,"offset":2297}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"使用 ","position":{"start":{"line":82,"column":29,"offset":2299},"end":{"line":82,"column":32,"offset":2302}}},{"type":"raw","value":"graph.setItemState","position":{"start":{"line":82,"column":32,"offset":2302},"end":{"line":82,"column":52,"offset":2322}}},{"type":"text","value":" 来使定义的状态生效","position":{"start":{"line":82,"column":52,"offset":2322},"end":{"line":82,"column":62,"offset":2332}}}],"position":{"start":{"line":82,"column":27,"offset":2297},"end":{"line":82,"column":64,"offset":2334}}},{"type":"text","value":"。","position":{"start":{"line":82,"column":64,"offset":2334},"end":{"line":82,"column":65,"offset":2335}}}],"position":{"start":{"line":82,"column":1,"offset":2271},"end":{"line":82,"column":65,"offset":2335}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"那么，我们该在什么地方使用 ","position":{"start":{"line":84,"column":1,"offset":2337},"end":{"line":84,"column":15,"offset":2351}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"raw","value":"graph.setItemState","position":{"start":{"line":84,"column":17,"offset":2353},"end":{"line":84,"column":37,"offset":2373}}}],"position":{"start":{"line":84,"column":15,"offset":2351},"end":{"line":84,"column":39,"offset":2375}}},{"type":"text","value":" 来使 state 生效呢？一种是直接使用 ","position":{"start":{"line":84,"column":39,"offset":2375},"end":{"line":84,"column":61,"offset":2397}}},{"type":"raw","value":"graph.on","position":{"start":{"line":84,"column":61,"offset":2397},"end":{"line":84,"column":71,"offset":2407}}},{"type":"text","value":" 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。","position":{"start":{"line":84,"column":71,"offset":2407},"end":{"line":84,"column":122,"offset":2458}}}],"position":{"start":{"line":84,"column":1,"offset":2337},"end":{"line":84,"column":122,"offset":2458}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"graphon"},"children":[{"type":"element","tagName":"a","properties":{"href":"#graphon","aria-label":"graphon permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"graph.on","position":{"start":{"line":86,"column":5,"offset":2464},"end":{"line":86,"column":13,"offset":2472}}}],"position":{"start":{"line":86,"column":1,"offset":2460},"end":{"line":86,"column":13,"offset":2472}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在回调函数中使定义的交互状态 hover 生效。","position":{"start":{"line":87,"column":1,"offset":2473},"end":{"line":87,"column":25,"offset":2497}}}],"position":{"start":{"line":87,"column":1,"offset":2473},"end":{"line":87,"column":25,"offset":2497}}},{"type":"text","value":"\n"},{"type":"raw","value":"
graph.on('node:mouseenter', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', true);\n});\n\ngraph.on('node:mouseleave', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', false);\n});\n
","position":{"start":{"line":88,"column":1,"offset":2498},"end":{"line":98,"column":4,"offset":2727}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"behavior"},"children":[{"type":"element","tagName":"a","properties":{"href":"#behavior","aria-label":"behavior permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Behavior","position":{"start":{"line":100,"column":5,"offset":2733},"end":{"line":100,"column":13,"offset":2741}}}],"position":{"start":{"line":100,"column":1,"offset":2729},"end":{"line":100,"column":13,"offset":2741}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在自定义 Behavior 中使定义的交互状态 selected 生效。","position":{"start":{"line":101,"column":1,"offset":2742},"end":{"line":101,"column":37,"offset":2778}}}],"position":{"start":{"line":101,"column":1,"offset":2742},"end":{"line":101,"column":37,"offset":2778}}},{"type":"text","value":"\n"},{"type":"raw","value":"
G6.registerBehavior('nodeClick', {\n  getEvents() {\n    return {\n      'node:click': 'onClick',\n    };\n  },\n  onClick(e) {\n    e.preventDefault();\n    if (!this.shouldUpdate.call(this, e)) {\n      return;\n    }\n    const { item } = e;\n    const graph = this.graph;\n    graph.setItemState(item, 'selected', true);\n  },\n});\n
","position":{"start":{"line":102,"column":1,"offset":2779},"end":{"line":119,"column":4,"offset":3113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"小结"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%B0%8F%E7%BB%93","aria-label":"小结 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"小结","position":{"start":{"line":121,"column":4,"offset":3118},"end":{"line":121,"column":6,"offset":3120}}}],"position":{"start":{"line":121,"column":1,"offset":3115},"end":{"line":121,"column":6,"offset":3120}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 ","position":{"start":{"line":122,"column":1,"offset":3121},"end":{"line":122,"column":65,"offset":3185}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/xiux28","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"G6 状态量思考","position":{"start":{"line":122,"column":66,"offset":3186},"end":{"line":122,"column":74,"offset":3194}}}],"position":{"start":{"line":122,"column":65,"offset":3185},"end":{"line":122,"column":113,"offset":3233}}},{"type":"text","value":"。","position":{"start":{"line":122,"column":113,"offset":3233},"end":{"line":122,"column":114,"offset":3234}}}],"position":{"start":{"line":122,"column":1,"offset":3121},"end":{"line":122,"column":114,"offset":3234}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":123,"column":1,"offset":3235}}}}