{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-3707292c8fb7991d858a1f60d008ca5d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 封装了一系列交互方法，方便用户直接使用。本文将为 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":29,"offset":29}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":2,"column":31,"offset":31},"end":{"line":2,"column":41,"offset":41}}}],"position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":43,"offset":43}}},{"type":"text","value":" 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下：","position":{"start":{"line":2,"column":43,"offset":43},"end":{"line":2,"column":89,"offset":89}}},{"type":"raw","value":"
","position":{"start":{"line":2,"column":89,"offset":89},"end":{"line":2,"column":95,"offset":95}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834387680-016c4436-88d6-4438-aec9-320c8cafc066.gif#align=left&display=inline&height=284&name=tutorial-demo-interact.gif&originHeight=438&originWidth=604&search=&size=514232&status=done&width=392","alt":"tutorial-demo-interact.gif"},"children":[],"position":{"start":{"line":2,"column":95,"offset":95},"end":{"line":2,"column":370,"offset":370}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":370,"offset":370}}},{"type":"text","value":"\n"},{"type":"raw","value":"
图1 Tutorial案例的交互效果。
","position":{"start":{"line":3,"column":1,"offset":371},"end":{"line":3,"column":60,"offset":430}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"基本概念"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5","aria-label":"基本概念 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"基本概念","position":{"start":{"line":6,"column":4,"offset":436},"end":{"line":6,"column":8,"offset":440}}}],"position":{"start":{"line":6,"column":1,"offset":433},"end":{"line":6,"column":8,"offset":440}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"交互行为-behavior"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA-behavior","aria-label":"交互行为 behavior permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互行为 Behavior","position":{"start":{"line":7,"column":5,"offset":445},"end":{"line":7,"column":18,"offset":458}}}],"position":{"start":{"line":7,"column":1,"offset":441},"end":{"line":7,"column":18,"offset":458}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 中的交互行为。G6 ","position":{"start":{"line":8,"column":1,"offset":459},"end":{"line":8,"column":14,"offset":472}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"内置","position":{"start":{"line":8,"column":16,"offset":474},"end":{"line":8,"column":18,"offset":476}}}],"position":{"start":{"line":8,"column":14,"offset":472},"end":{"line":8,"column":20,"offset":478}}},{"type":"text","value":"了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为：","position":{"start":{"line":8,"column":20,"offset":478},"end":{"line":8,"column":59,"offset":517}}}],"position":{"start":{"line":8,"column":1,"offset":459},"end":{"line":8,"column":59,"offset":517}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"drag-canvas","position":{"start":{"line":10,"column":3,"offset":521},"end":{"line":10,"column":16,"offset":534}}},{"type":"text","value":"：拖拽画布；","position":{"start":{"line":10,"column":16,"offset":534},"end":{"line":10,"column":22,"offset":540}}}],"position":{"start":{"line":10,"column":1,"offset":519},"end":{"line":10,"column":22,"offset":540}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"zoom-canvas","position":{"start":{"line":11,"column":3,"offset":543},"end":{"line":11,"column":16,"offset":556}}},{"type":"text","value":"：缩放画布；","position":{"start":{"line":11,"column":16,"offset":556},"end":{"line":11,"column":22,"offset":562}}}],"position":{"start":{"line":11,"column":1,"offset":541},"end":{"line":11,"column":22,"offset":562}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"... 更多详见：","position":{"start":{"line":12,"column":3,"offset":565},"end":{"line":12,"column":12,"offset":574}}},{"type":"element","tagName":"a","properties":{"href":"../middle/states/defaultBehavior"},"children":[{"type":"text","value":"交互行为 Behavior","position":{"start":{"line":12,"column":13,"offset":575},"end":{"line":12,"column":26,"offset":588}}}],"position":{"start":{"line":12,"column":12,"offset":574},"end":{"line":12,"column":61,"offset":623}}}],"position":{"start":{"line":12,"column":1,"offset":563},"end":{"line":12,"column":61,"offset":623}}},{"type":"text","value":"\n"}],"position":{"start":{"line":10,"column":1,"offset":519},"end":{"line":12,"column":61,"offset":623}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果内置行为不满足需求，G6 还允许用户进行","position":{"start":{"line":14,"column":1,"offset":625},"end":{"line":14,"column":23,"offset":647}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"自定义交互行为","position":{"start":{"line":14,"column":25,"offset":649},"end":{"line":14,"column":32,"offset":656}}}],"position":{"start":{"line":14,"column":23,"offset":647},"end":{"line":14,"column":34,"offset":658}}},{"type":"text","value":"。由于自定义交互较为复杂，入门教程中不再赘述，如有需求请参见：","position":{"start":{"line":14,"column":34,"offset":658},"end":{"line":14,"column":65,"offset":689}}},{"type":"element","tagName":"a","properties":{"href":"../advanced/custom-behavior"},"children":[{"type":"text","value":"自定义交互行为 Behavior","position":{"start":{"line":14,"column":66,"offset":690},"end":{"line":14,"column":82,"offset":706}}}],"position":{"start":{"line":14,"column":65,"offset":689},"end":{"line":14,"column":112,"offset":736}}}],"position":{"start":{"line":14,"column":1,"offset":625},"end":{"line":14,"column":112,"offset":736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"交互管理-mode"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E7%AE%A1%E7%90%86-mode","aria-label":"交互管理 mode permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互管理 mode","position":{"start":{"line":16,"column":5,"offset":742},"end":{"line":16,"column":14,"offset":751}}}],"position":{"start":{"line":16,"column":1,"offset":738},"end":{"line":16,"column":14,"offset":751}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 ","position":{"start":{"line":17,"column":1,"offset":752},"end":{"line":17,"column":111,"offset":862}}},{"type":"element","tagName":"a","properties":{"href":"../middle/states/mode"},"children":[{"type":"text","value":"G6 中的 mode","position":{"start":{"line":17,"column":112,"offset":863},"end":{"line":17,"column":122,"offset":873}}}],"position":{"start":{"line":17,"column":111,"offset":862},"end":{"line":17,"column":146,"offset":897}}},{"type":"text","value":"。","position":{"start":{"line":17,"column":146,"offset":897},"end":{"line":17,"column":147,"offset":898}}}],"position":{"start":{"line":17,"column":1,"offset":752},"end":{"line":17,"column":147,"offset":898}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"交互状态-state"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E7%8A%B6%E6%80%81-state","aria-label":"交互状态 state permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互状态 State","position":{"start":{"line":19,"column":5,"offset":904},"end":{"line":19,"column":15,"offset":914}}}],"position":{"start":{"line":19,"column":1,"offset":900},"end":{"line":19,"column":15,"offset":914}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../middle/states/state"},"children":[{"type":"text","value":"状态 State","position":{"start":{"line":20,"column":2,"offset":916},"end":{"line":20,"column":10,"offset":924}}}],"position":{"start":{"line":20,"column":1,"offset":915},"end":{"line":20,"column":35,"offset":949}}},{"type":"text","value":" 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 ","position":{"start":{"line":20,"column":35,"offset":949},"end":{"line":20,"column":116,"offset":1030}}},{"type":"raw","value":"'click'","position":{"start":{"line":20,"column":116,"offset":1030},"end":{"line":20,"column":125,"offset":1039}}},{"type":"text","value":" 为 ","position":{"start":{"line":20,"column":125,"offset":1039},"end":{"line":20,"column":128,"offset":1042}}},{"type":"raw","value":"true","position":{"start":{"line":20,"column":128,"offset":1042},"end":{"line":20,"column":134,"offset":1048}}},{"type":"text","value":" 或 ","position":{"start":{"line":20,"column":134,"offset":1048},"end":{"line":20,"column":137,"offset":1051}}},{"type":"raw","value":"false","position":{"start":{"line":20,"column":137,"offset":1051},"end":{"line":20,"column":144,"offset":1058}}},{"type":"text","value":"，并为节点设置 ","position":{"start":{"line":20,"column":144,"offset":1058},"end":{"line":20,"column":152,"offset":1066}}},{"type":"raw","value":"'click'","position":{"start":{"line":20,"column":152,"offset":1066},"end":{"line":20,"column":161,"offset":1075}}},{"type":"text","value":" 的样式为加粗节点边框。当 ","position":{"start":{"line":20,"column":161,"offset":1075},"end":{"line":20,"column":175,"offset":1089}}},{"type":"raw","value":"'click'","position":{"start":{"line":20,"column":175,"offset":1089},"end":{"line":20,"column":184,"offset":1098}}},{"type":"text","value":" 状态被切换为 ","position":{"start":{"line":20,"column":184,"offset":1098},"end":{"line":20,"column":192,"offset":1106}}},{"type":"raw","value":"true","position":{"start":{"line":20,"column":192,"offset":1106},"end":{"line":20,"column":198,"offset":1112}}},{"type":"text","value":" 时，节点的边框将会被加粗，","position":{"start":{"line":20,"column":198,"offset":1112},"end":{"line":20,"column":212,"offset":1126}}},{"type":"raw","value":"'click'","position":{"start":{"line":20,"column":212,"offset":1126},"end":{"line":20,"column":221,"offset":1135}}},{"type":"text","value":" 状态被切换为 ","position":{"start":{"line":20,"column":221,"offset":1135},"end":{"line":20,"column":229,"offset":1143}}},{"type":"raw","value":"false","position":{"start":{"line":20,"column":229,"offset":1143},"end":{"line":20,"column":236,"offset":1150}}},{"type":"text","value":" 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。","position":{"start":{"line":20,"column":236,"offset":1150},"end":{"line":20,"column":268,"offset":1182}}}],"position":{"start":{"line":20,"column":1,"offset":915},"end":{"line":20,"column":268,"offset":1182}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":22,"column":4,"offset":1187},"end":{"line":22,"column":8,"offset":1191}}}],"position":{"start":{"line":22,"column":1,"offset":1184},"end":{"line":22,"column":8,"offset":1191}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"拖拽、缩放内置的交互行为"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%8B%96%E6%8B%BD%E3%80%81%E7%BC%A9%E6%94%BE%E5%86%85%E7%BD%AE%E7%9A%84%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA","aria-label":"拖拽、缩放内置的交互行为 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"拖拽、缩放——内置的交互行为","position":{"start":{"line":23,"column":5,"offset":1196},"end":{"line":23,"column":19,"offset":1210}}}],"position":{"start":{"line":23,"column":1,"offset":1192},"end":{"line":23,"column":19,"offset":1210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中使用内置 behavior 的方式非常简单，只需要在图实例化时配置 ","position":{"start":{"line":24,"column":1,"offset":1211},"end":{"line":24,"column":41,"offset":1251}}},{"type":"raw","value":"modes","position":{"start":{"line":24,"column":41,"offset":1251},"end":{"line":24,"column":48,"offset":1258}}},{"type":"text","value":"。拖拽和缩放属于 G6 内置交互行为，修改代码如下：","position":{"start":{"line":24,"column":48,"offset":1258},"end":{"line":24,"column":74,"offset":1284}}}],"position":{"start":{"line":24,"column":1,"offset":1211},"end":{"line":24,"column":74,"offset":1284}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  ...                                          // 其他配置项\n  modes: {\n    default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]  // 允许拖拽画布、放缩画布、拖拽节点\n  }\n});
","position":{"start":{"line":25,"column":1,"offset":1285},"end":{"line":32,"column":4,"offset":1486}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"除了直接使用内置交互名称外，也可以为 behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等。高阶用法参见 ","position":{"start":{"line":34,"column":1,"offset":1488},"end":{"line":34,"column":63,"offset":1550}}},{"type":"element","tagName":"a","properties":{"href":"../middle/states/defaultBehavior"},"children":[{"type":"text","value":"内置的交互 Behavior","position":{"start":{"line":34,"column":64,"offset":1551},"end":{"line":34,"column":78,"offset":1565}}}],"position":{"start":{"line":34,"column":63,"offset":1550},"end":{"line":34,"column":113,"offset":1600}}},{"type":"text","value":"。","position":{"start":{"line":34,"column":113,"offset":1600},"end":{"line":34,"column":114,"offset":1601}}}],"position":{"start":{"line":34,"column":1,"offset":1488},"end":{"line":34,"column":114,"offset":1601}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"上面代码中的 ","position":{"start":{"line":36,"column":1,"offset":1603},"end":{"line":36,"column":8,"offset":1610}}},{"type":"raw","value":"modes","position":{"start":{"line":36,"column":8,"offset":1610},"end":{"line":36,"column":15,"offset":1617}}},{"type":"text","value":" 定义了 G6 的模式，","position":{"start":{"line":36,"column":15,"offset":1617},"end":{"line":36,"column":27,"offset":1629}}},{"type":"raw","value":"default","position":{"start":{"line":36,"column":27,"offset":1629},"end":{"line":36,"column":36,"offset":1638}}},{"type":"text","value":" 是默认的模式，还可以允许有其他的模式，比如：编辑模式 ","position":{"start":{"line":36,"column":36,"offset":1638},"end":{"line":36,"column":64,"offset":1666}}},{"type":"raw","value":"edit","position":{"start":{"line":36,"column":64,"offset":1666},"end":{"line":36,"column":70,"offset":1672}}},{"type":"text","value":" 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布：","position":{"start":{"line":36,"column":70,"offset":1672},"end":{"line":36,"column":116,"offset":1718}}}],"position":{"start":{"line":36,"column":1,"offset":1603},"end":{"line":36,"column":116,"offset":1718}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 举例解释不同模式\nmodes: {\n  default: ['drag-canvas'],\n  edit: []\n}
","position":{"start":{"line":37,"column":1,"offset":1719},"end":{"line":43,"column":4,"offset":1798}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更多关于模式、行为可以参考: ","position":{"start":{"line":44,"column":3,"offset":1801},"end":{"line":44,"column":18,"offset":1816}}},{"type":"text","value":"[TODO: 链接]","position":{"start":{"line":44,"column":19,"offset":1817},"end":{"line":44,"column":27,"offset":1825}}}],"position":{"start":{"line":44,"column":3,"offset":1801},"end":{"line":44,"column":28,"offset":1826}}},{"type":"text","value":"\n"}],"position":{"start":{"line":44,"column":1,"offset":1799},"end":{"line":44,"column":28,"offset":1826}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"hover、click-改变样式状态式交互"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hover%E3%80%81click-%E6%94%B9%E5%8F%98%E6%A0%B7%E5%BC%8F%E7%8A%B6%E6%80%81%E5%BC%8F%E4%BA%A4%E4%BA%92","aria-label":"hover、click 改变样式状态式交互 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Hover、Click 改变样式——状态式交互","position":{"start":{"line":47,"column":5,"offset":1833},"end":{"line":47,"column":28,"offset":1856}}}],"position":{"start":{"line":47,"column":1,"offset":1829},"end":{"line":47,"column":28,"offset":1856}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 ","position":{"start":{"line":49,"column":1,"offset":1858},"end":{"line":49,"column":79,"offset":1936}}},{"type":"element","tagName":"a","properties":{"href":"../middle/states/state"},"children":[{"type":"text","value":"状态 State","position":{"start":{"line":49,"column":80,"offset":1937},"end":{"line":49,"column":88,"offset":1945}}}],"position":{"start":{"line":49,"column":79,"offset":1936},"end":{"line":49,"column":113,"offset":1970}}},{"type":"text","value":" 的概念。简单地说，是否 ","position":{"start":{"line":49,"column":113,"offset":1970},"end":{"line":49,"column":126,"offset":1983}}},{"type":"raw","value":"hover","position":{"start":{"line":49,"column":126,"offset":1983},"end":{"line":49,"column":133,"offset":1990}}},{"type":"text","value":" 、","position":{"start":{"line":49,"column":133,"offset":1990},"end":{"line":49,"column":135,"offset":1992}}},{"type":"raw","value":"click","position":{"start":{"line":49,"column":135,"offset":1992},"end":{"line":49,"column":142,"offset":1999}}},{"type":"text","value":" 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步：","position":{"start":{"line":49,"column":142,"offset":1999},"end":{"line":49,"column":214,"offset":2071}}}],"position":{"start":{"line":49,"column":1,"offset":1858},"end":{"line":49,"column":214,"offset":2071}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Step 1: 设置各状态下的元素样式；","position":{"start":{"line":51,"column":3,"offset":2075},"end":{"line":51,"column":23,"offset":2095}}}],"position":{"start":{"line":51,"column":1,"offset":2073},"end":{"line":51,"column":23,"offset":2095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Step 2: 监听事件并切换元素状态","position":{"start":{"line":52,"column":3,"offset":2098},"end":{"line":52,"column":22,"offset":2117}}}],"position":{"start":{"line":52,"column":1,"offset":2096},"end":{"line":52,"column":22,"offset":2117}}},{"type":"text","value":"\n"}],"position":{"start":{"line":51,"column":1,"offset":2073},"end":{"line":52,"column":22,"offset":2117}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"设置各状态下的元素样式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%AE%BE%E7%BD%AE%E5%90%84%E7%8A%B6%E6%80%81%E4%B8%8B%E7%9A%84%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F","aria-label":"设置各状态下的元素样式 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"设置各状态下的元素样式","position":{"start":{"line":54,"column":6,"offset":2124},"end":{"line":54,"column":17,"offset":2135}}}],"position":{"start":{"line":54,"column":1,"offset":2119},"end":{"line":54,"column":17,"offset":2135}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在实例化图时，通过 ","position":{"start":{"line":55,"column":1,"offset":2136},"end":{"line":55,"column":11,"offset":2146}}},{"type":"raw","value":"nodeStateStyles","position":{"start":{"line":55,"column":11,"offset":2146},"end":{"line":55,"column":28,"offset":2163}}},{"type":"text","value":" 和 ","position":{"start":{"line":55,"column":28,"offset":2163},"end":{"line":55,"column":31,"offset":2166}}},{"type":"raw","value":"edgeStateStyles","position":{"start":{"line":55,"column":31,"offset":2166},"end":{"line":55,"column":48,"offset":2183}}},{"type":"text","value":" 两个配置项可以配置元素在不同状态下的样式。","position":{"start":{"line":55,"column":48,"offset":2183},"end":{"line":55,"column":70,"offset":2205}}},{"type":"raw","value":"
","position":{"start":{"line":55,"column":70,"offset":2205},"end":{"line":55,"column":76,"offset":2211}}},{"type":"text","value":"为达到 ","position":{"start":{"line":55,"column":76,"offset":2211},"end":{"line":55,"column":80,"offset":2215}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":55,"column":82,"offset":2217},"end":{"line":55,"column":92,"offset":2227}}}],"position":{"start":{"line":55,"column":80,"offset":2215},"end":{"line":55,"column":94,"offset":2229}}},{"type":"text","value":" 中的效果：","position":{"start":{"line":55,"column":94,"offset":2229},"end":{"line":55,"column":100,"offset":2235}}}],"position":{"start":{"line":55,"column":1,"offset":2136},"end":{"line":55,"column":100,"offset":2235}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"鼠标 hover 节点时，该节点颜色变浅；","position":{"start":{"line":57,"column":3,"offset":2239},"end":{"line":57,"column":24,"offset":2260}}}],"position":{"start":{"line":57,"column":1,"offset":2237},"end":{"line":57,"column":24,"offset":2260}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点击节点时，该节点边框加粗变黑；","position":{"start":{"line":58,"column":3,"offset":2263},"end":{"line":58,"column":19,"offset":2279}}}],"position":{"start":{"line":58,"column":1,"offset":2261},"end":{"line":58,"column":19,"offset":2279}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点击边时，该边变成蓝色。","position":{"start":{"line":59,"column":3,"offset":2282},"end":{"line":59,"column":15,"offset":2294}}}],"position":{"start":{"line":59,"column":1,"offset":2280},"end":{"line":59,"column":15,"offset":2294}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":2237},"end":{"line":59,"column":15,"offset":2294}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面代码设置了节点分别在 ","position":{"start":{"line":61,"column":1,"offset":2296},"end":{"line":61,"column":14,"offset":2309}}},{"type":"raw","value":"hover","position":{"start":{"line":61,"column":14,"offset":2309},"end":{"line":61,"column":21,"offset":2316}}},{"type":"text","value":" 和 ","position":{"start":{"line":61,"column":21,"offset":2316},"end":{"line":61,"column":24,"offset":2319}}},{"type":"raw","value":"click","position":{"start":{"line":61,"column":24,"offset":2319},"end":{"line":61,"column":31,"offset":2326}}},{"type":"text","value":" 状态为 ","position":{"start":{"line":61,"column":31,"offset":2326},"end":{"line":61,"column":36,"offset":2331}}},{"type":"raw","value":"true","position":{"start":{"line":61,"column":36,"offset":2331},"end":{"line":61,"column":42,"offset":2337}}},{"type":"text","value":" 时的样式，边在 ","position":{"start":{"line":61,"column":42,"offset":2337},"end":{"line":61,"column":51,"offset":2346}}},{"type":"raw","value":"click","position":{"start":{"line":61,"column":51,"offset":2346},"end":{"line":61,"column":58,"offset":2353}}},{"type":"text","value":" 状态为 ","position":{"start":{"line":61,"column":58,"offset":2353},"end":{"line":61,"column":63,"offset":2358}}},{"type":"raw","value":"true","position":{"start":{"line":61,"column":63,"offset":2358},"end":{"line":61,"column":69,"offset":2364}}},{"type":"text","value":" 时的样式：","position":{"start":{"line":61,"column":69,"offset":2364},"end":{"line":61,"column":75,"offset":2370}}}],"position":{"start":{"line":61,"column":1,"offset":2296},"end":{"line":61,"column":75,"offset":2370}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  // ...                           // 其他配置项\n  // 节点不同状态下的样式集合\n  nodeStateStyles: {\n    // 鼠标 hover 上节点，即 hover 状态为 true 时的样式\n    hover: {\n      fill: 'lightsteelblue',\n    },\n    // 鼠标点击节点，即 click 状态为 true 时的样式\n    click: {\n      stroke: '#000',\n      lineWidth: 3,\n    },\n  },\n  // 节点不同状态下的样式集合\n  edgeStateStyles: {\n    // 鼠标点击边，即 click 状态为 true 时的样式\n    click: {\n      stroke: 'steelblue',\n    },\n  },\n});\n
","position":{"start":{"line":62,"column":1,"offset":2371},"end":{"line":85,"column":4,"offset":2820}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"监听事件并切换元素状态"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6%E5%B9%B6%E5%88%87%E6%8D%A2%E5%85%83%E7%B4%A0%E7%8A%B6%E6%80%81","aria-label":"监听事件并切换元素状态 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"监听事件并切换元素状态","position":{"start":{"line":87,"column":6,"offset":2827},"end":{"line":87,"column":17,"offset":2838}}}],"position":{"start":{"line":87,"column":1,"offset":2822},"end":{"line":87,"column":17,"offset":2838}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 中所有元素监听都挂载在图实例上，如下代码中的 ","position":{"start":{"line":88,"column":1,"offset":2839},"end":{"line":88,"column":27,"offset":2865}}},{"type":"raw","value":"graph","position":{"start":{"line":88,"column":27,"offset":2865},"end":{"line":88,"column":34,"offset":2872}}},{"type":"text","value":" 对象是 G6.Graph 的实例，","position":{"start":{"line":88,"column":34,"offset":2872},"end":{"line":88,"column":52,"offset":2890}}},{"type":"raw","value":"graph.on()","position":{"start":{"line":88,"column":52,"offset":2890},"end":{"line":88,"column":64,"offset":2902}}},{"type":"text","value":" 函数监听了某元素类型（","position":{"start":{"line":88,"column":64,"offset":2902},"end":{"line":88,"column":76,"offset":2914}}},{"type":"raw","value":"node","position":{"start":{"line":88,"column":76,"offset":2914},"end":{"line":88,"column":82,"offset":2920}}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":82,"offset":2920},"end":{"line":88,"column":85,"offset":2923}}},{"type":"raw","value":"edge","position":{"start":{"line":88,"column":85,"offset":2923},"end":{"line":88,"column":91,"offset":2929}}},{"type":"text","value":"）的某种事件（","position":{"start":{"line":88,"column":91,"offset":2929},"end":{"line":88,"column":98,"offset":2936}}},{"type":"raw","value":"click","position":{"start":{"line":88,"column":98,"offset":2936},"end":{"line":88,"column":105,"offset":2943}}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":105,"offset":2943},"end":{"line":88,"column":108,"offset":2946}}},{"type":"raw","value":"mouseenter","position":{"start":{"line":88,"column":108,"offset":2946},"end":{"line":88,"column":120,"offset":2958}}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":120,"offset":2958},"end":{"line":88,"column":123,"offset":2961}}},{"type":"raw","value":"mouseleave","position":{"start":{"line":88,"column":123,"offset":2961},"end":{"line":88,"column":135,"offset":2973}}},{"type":"text","value":" / ... 所有事件参见：","position":{"start":{"line":88,"column":135,"offset":2973},"end":{"line":88,"column":149,"offset":2987}}},{"type":"element","tagName":"a","properties":{"href":"../../api/Event"},"children":[{"type":"text","value":"Event API","position":{"start":{"line":88,"column":150,"offset":2988},"end":{"line":88,"column":159,"offset":2997}}}],"position":{"start":{"line":88,"column":149,"offset":2987},"end":{"line":88,"column":177,"offset":3015}}},{"type":"text","value":"）。","position":{"start":{"line":88,"column":177,"offset":3015},"end":{"line":88,"column":179,"offset":3017}}}],"position":{"start":{"line":88,"column":1,"offset":2839},"end":{"line":88,"column":179,"offset":3017}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 在图实例 graph 上监听\ngraph.on('元素类型:事件名', e => {\n  // do something\n});\n
","position":{"start":{"line":89,"column":1,"offset":3018},"end":{"line":94,"column":4,"offset":3103}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"现在，我们通过下面代码，为 ","position":{"start":{"line":96,"column":1,"offset":3105},"end":{"line":96,"column":15,"offset":3119}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":96,"column":17,"offset":3121},"end":{"line":96,"column":27,"offset":3131}}}],"position":{"start":{"line":96,"column":15,"offset":3119},"end":{"line":96,"column":29,"offset":3133}}},{"type":"text","value":" 增加点和边上的监听事件，并在监听函数里使用 ","position":{"start":{"line":96,"column":29,"offset":3133},"end":{"line":96,"column":52,"offset":3156}}},{"type":"raw","value":"graph.setItemState()","position":{"start":{"line":96,"column":52,"offset":3156},"end":{"line":96,"column":74,"offset":3178}}},{"type":"text","value":" 改变元素的状态：","position":{"start":{"line":96,"column":74,"offset":3178},"end":{"line":96,"column":83,"offset":3187}}}],"position":{"start":{"line":96,"column":1,"offset":3105},"end":{"line":96,"column":83,"offset":3187}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 鼠标进入节点\ngraph.on('node:mouseenter', e => {\n  const nodeItem = e.item;  // 获取鼠标进入的节点元素对象\n  graph.setItemState(nodeItem, 'hover', true);  // 设置当前节点的 hover 状态为 true\n});\n\n// 鼠标离开节点\ngraph.on('node:mouseleave', e => {\n  const nodeItem = e.item;  // 获取鼠标离开的节点元素对象\n  graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false\n});\n\n// 点击节点\ngraph.on('node:click', e => {\n  // 先将所有当前是 click 状态的节点置为非 click 状态\n  const clickNodes = graph.findAllByState('node', 'click');\n  clickNodes.forEach(cn => {\n    graph.setItemState(cn, 'click', false);\n  });\n  const nodeItem = e.item;  // 获取被点击的节点元素对象\n  graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true\n});\n\n// 点击边\ngraph.on('edge:click', e => {\n  // 先将所有当前是 click 状态的边置为非 click 状态\n  const clickEdges = graph.findAllByState('edge', 'click');\n    clickEdges.forEach(ce => {\n      graph.setItemState(ce, 'click', false);\n    });\n    const edgeItem = e.item;  // 获取被点击的边元素对象\n    graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true\n  });\n});
","position":{"start":{"line":97,"column":1,"offset":3188},"end":{"line":132,"column":4,"offset":4227}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"完整代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81","aria-label":"完整代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"完整代码","position":{"start":{"line":134,"column":4,"offset":4232},"end":{"line":134,"column":8,"offset":4236}}}],"position":{"start":{"line":134,"column":1,"offset":4229},"end":{"line":134,"column":8,"offset":4236}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"至此，完整代码如下：","position":{"start":{"line":135,"column":1,"offset":4237},"end":{"line":135,"column":11,"offset":4247}}}],"position":{"start":{"line":135,"column":1,"offset":4237},"end":{"line":135,"column":11,"offset":4247}}},{"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<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      // 节点默认配置\n      defaultNode: {\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      // 边默认配置\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n      // 节点在各状态下的样式\n      nodeStateStyles: {\n        // hover 状态为 true 时的样式\n        hover: {\n          fill: 'lightsteelblue'\n        },\n        // click 状态为 true 时的样式\n        click: {\n          stroke: '#000',\n          lineWidth: 3\n        }\n      },\n      // 边在各状态下的样式\n      edgeStateStyles: {\n        // click 状态为 true 时的样式\n        click: {\n          stroke: 'steelblue'\n        }\n      },\n      // 布局\n      layout: {\n        type: 'force',\n        linkDistance: 100,\n        preventOverlap: true,\n        nodeStrength: -30,\n        edgeStrength: 0.1\n      },\n      // 内置交互\n      modes: {\n        default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]\n      },\n    });\n\n    const 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      \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            node.size = 30;\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      // 监听鼠标进入节点\n      graph.on('node:mouseenter', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 为 true\n        graph.setItemState(nodeItem, 'hover', true);\n      });\n      // 监听鼠标离开节点\n      graph.on('node:mouseleave', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 false\n        graph.setItemState(nodeItem, 'hover', false);\n      });\n      // 监听鼠标点击节点\n      graph.on('node:click', e => {\n        // 先将所有当前有 click 状态的节点的 click 状态置为 false\n        const clickNodes = graph.findAllByState('node', 'click');\n        clickNodes.forEach(cn => {\n          graph.setItemState(cn, 'click', false);\n        });\n        const nodeItem = e.item;\n        // 设置目标节点的 click 状态 为 true\n        graph.setItemState(nodeItem, 'click', true);\n      });\n      // 监听鼠标点击节点\n      graph.on('edge:click', e => {\n        // 先将所有当前有 click 状态的边的 click 状态置为 false\n        const clickEdges = graph.findAllByState('edge', 'click');\n        clickEdges.forEach(ce => {\n          graph.setItemState(ce, 'click', false);\n        });\n        const edgeItem = e.item;\n        // 设置目标边的 click 状态 为 true\n        graph.setItemState(edgeItem, 'click', true);\n      });\n    };\n    main();\n  </script>\n</body>\n</html>
","position":{"start":{"line":136,"column":1,"offset":4248},"end":{"line":282,"column":4,"offset":7925}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 注意 ","position":{"start":{"line":284,"column":1,"offset":7927},"end":{"line":284,"column":5,"offset":7931}}},{"type":"raw","value":"
","position":{"start":{"line":284,"column":5,"offset":7931},"end":{"line":284,"column":11,"offset":7937}}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":284,"column":11,"offset":7937},"end":{"line":284,"column":22,"offset":7948}}},{"type":"raw","value":"'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'","position":{"start":{"line":284,"column":22,"offset":7948},"end":{"line":284,"column":113,"offset":8039}}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":284,"column":113,"offset":8039},"end":{"line":284,"column":124,"offset":8050}}}],"position":{"start":{"line":284,"column":1,"offset":7927},"end":{"line":284,"column":124,"offset":8050}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":285,"column":1,"offset":8051}}}}