Graphin

yarn add @antv/graphin@latest --save
yarn add @antv/graphin-components@latest --save
yarn add @antv/graphin-icons --save

import React from 'react';
import Graphin from '@antv/graphin';
// mock数据
const data = Utils.mock(10).circle().graphin();
export default () => {
  return <Graphin data={data} />;
};

import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// mock数据
const data = Utils.mock(10).circle().graphin();
export default () => {
  return (
    <Graphin data={data}>
      <MiniMap />
    </Graphin>
  );
};

import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// 引入图标资源文件
import iconLoader from '@antv/graphin-icons';
import '@antv/graphin-icons/dist/index.css';
// mock数据
const data = Utils.mock(10).circle().graphin();
// 注册到 Graphin 中
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
// 使用图标
data.nodes.forEach(node => {
  node.style = {
    icon: {
      type: 'font', // 指定图标为Font类型
      fontFamily: fontFamily, // 指定FontFamily
      value: icons.home, // 指定图标的值
    },
  };
});
export default () => {
  return (
    <Graphin data={data}>
      <MiniMap />
    </Graphin>
  );
};