【前端学习】AntV G6-06 使用图算法

news2024/9/21 20:42:07

课程链接

图算法 Algorithm | G6 (antgroup.com)

【例子 pageRank】

力导向图布局 | G6 (antgroup.com)

重点部分添加注释

import G6 from '@antv/g6';

const { pageRank } = G6.Algorithm;  // 在此引入 pageRank

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'force',
  },
  defaultNode: {
    size: 15,
  },
  defaultEdge: {
    style: {
      endArrow: true
    }
  }
});

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
  .then((res) => res.json())
  .then((data) => {

    const pagerankRes = pageRank(data);
    console.log('pagerankRes', pagerankRes)
    // 把节点的重要程度映射到节点大小上，用开根号控制大小差距
    data.nodes.forEach(node => {
      node.size = Math.sqrt(pagerankRes[node.id] * 10000)
    })

    // ...

图算法 Algorithm | G6 (antgroup.com)

算法示例 | G6 (antgroup.com)

重点部分添加注释

// ...

// click the button to run GADDI graph pattern matching
// and the result will be marked with hull
button.addEventListener('click', (e) => {
  const matches = GADDI(
    data,  // 图的数据
    pattern,  // 模式的数据 
    true,  // 是否把图和pattern当做有向图来计算
    undefined,
    undefined,
    'cluster',  // 数据和pattern中的节点分类信息的字段
    'cluster'  // 边分类信息的字段
  );
  
  // matches 是分类信息的结果
  console.log('matches', matches)
  matches.forEach((match, i) => {
    graph.createHull({
      id: `match-${i}`,
      members: match.nodes.map(node => node.id)
    })
  });
  button.innerHTML = `The results are marked with hulls 结果已用轮廓标记`;
  button.disabled = true;
});