G6使用

安装：4.2.3版本

npm install --save @antv/g6

交互模式

1.节点的高亮：nodeStateStyles属性的配置 （属于G6的配置里面的）

` nodeStateStyles: {
    // The node styles in selected state
    selected: {
      stroke: 'red',
      lineWidth: 2,
      fill: 'steelblue',
    },
  },`


` modes:{
   default:[]
 }`
`nodeStateStyles:{
   hover:{
     fill:'lightsteelblue',
   }
   click:{
     stroke:'steelblue',
     lineWidth:3
   }
}`


// 点击画布 清除所有高亮的节点
`graph.on('canvas:click',event => {
   // 查找所有的点击的节点
   const nodes = graph.findAllByState('node','click');
   // 遍历所有点击过的节点 将高亮的设置为false
   nodes.forEach(node=>{
      graph.setItemState(node,'click',false);
   })
})`

// 点击节点 高亮节点 并清除之前高亮的节点
`graph.on('node:click',event => {
  // 查找所有的点击的节点
  const nodes = graph.findAllByState('node','click');
   // 遍历所有点击过的节点 将高亮的设置为false
   nodes.forEach(node=>{
      graph.setItemState(node,'click',false);
   })
   // 将当前点击的节点高亮 设置为true
   graph.setItemState(event.item,'click',true)
})`

控制节点的显示与隐藏
元素的显示/隐藏
使用下面六个函数可以实现节点、边、Combo 的显示/隐藏：

`// 显示节点实例 nodeItem，该节点的 visible 属性值在该方法调用后被置为 true
nodeItem.show();

// 隐藏节点实例 nodeItem，该节点的 visible 属性值在该方法调用后被置为 false
nodeItem.hide();

// 显示边实例 edgeItem，该边的 visible 属性值在该方法调用后被置为 true
edgeItem.show();

// 隐藏边实例 edgeItem，该边的 visible 属性值在该方法调用后被置为 false
edgeItem.hide();

// 显示边实例 comboItem，该 Combo 的 visible 属性值在该方法调用后被置为 true
comboItem.show();

// 隐藏边实例 comboItem，该 Combo 的 visible 属性值在该方法调用后被置为 false
comboItem.hide();
`
示例：

该示例摘取了元素显示/隐藏的相关操作部分，通过鼠标监听对节点、边、画布的点击事件，显示和隐藏元素：

`// 鼠标点击节点，隐藏该节点
graph.on('node:click', (ev) => {
  const node = ev.item;
  console.log('before hide(), the nodevisible = ', node.get('visible'));
  node.hide();
  graph.paint();
  console.log('after hide(), the node visible = ', node.get('visible'));
});

// 鼠标点击边，隐藏该边
graph.on('edge:click', (ev) => {
  const edge = ev.item;
  console.log('before hide(), the edge visible = ', edge.get('visible'));
  edge.hide();
  graph.paint();
  console.log('after hide(), the edge visible = ', edge.get('visible'));
});

// 鼠标点击画布，显示所有节点和边
graph.on('canvas:click', (ev) => {
  const nodes = graph.getNodes();
  const edges = graph.getEdges();
  nodes.forEach((node) => {
    node.show();
  });
  edges.forEach((edge) => {
    edge.show();
  });
  graph.paint();
});`

布局切换

定义一个select

`// Add a selector to DOM
const selector = document.createElement('select');
selector.id = 'selector';
const selection1 = document.createElement('option');
selection1.value = 'force';
selection1.innerHTML = 'force力导布局';
const selection2 = document.createElement('option');
selection2.value = 'radial';
selection2.innerHTML = 'radial布局';
const selection3 = document.createElement('option');
selection3.value = 'concentric';
selection3.innerHTML = '同心圆布局';
selector.appendChild(selection1);
selector.appendChild(selection2);
selector.appendChild(selection3);
container.appendChild(selector);
`

`selector.addEventListener('change', (e) => {
  const value = e.target.value;
  if(value==='force'){
      graph.updateLayout({
        type: 'force',
        preventOverlap: true,
        nodeSize: 20,
      });
  }else if(value==='radial'){
     graph.updateLayout({
        type: 'radial',
        preventOverlap: true,
        nodeSize: 15,
      });
  }else{
     graph.updateLayout({
        type: 'concentric',
        minNodeSpacing: 30,
      });
  }
  // change the behavior mode
  graph.setMode(value);
});`