{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-963862fb10d6a28a2aa73473063f9ebc-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

简介

\n

为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步阿里巴巴-iconfont平台。

\n

效果

\nresult\n

下载字体图标

\n

直接去到阿里巴巴字体图标库搜索下载即可，简要操作流程是：搜索图标（例如篮球） ->  选择自己喜欢的图标添加入库  ->  点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个  ->  在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
\ndownload

\n

选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。

\n

PS: 本案文件目录为 '/static/icons'

\n

引入G6

\n

多种引入方式，请移步https://github.com/antvis/g6。\n
PS: 本案例简单粗暴，通过CDN的方式引入。

\n
<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>
\n

添加字体图标

\n

引入方式可自行选择，下面为在 HTML 中引入的例子：

\n
<style>\n   @import \"/static/icons/iconfont.css\";\n</style>
\n

撸代码

\n
G6.registerNode('iconfont', {\n  draw(cfg, group) {\n    const {\n      backgroundConfig: backgroundStyle,\n      style,\n      labelCfg: labelStyle,\n    } = cfg;\n\n    if (backgroundStyle) {\n      group.addShape('circle', {\n        attrs: {\n          x: 0,\n          y: 0,\n          r: cfg.size,\n          ...backgroundStyle,\n        },\n      });\n    }\n\n    const keyShape = group.addShape('text', {\n      attrs: {\n        x: 0,\n        y: 0,\n        fontFamily: 'iconfont', // 对应css里面的font-family: \"iconfont\";\n        textAlign: 'center',\n        textBaseline: 'middle',\n        text: cfg.text,\n        fontSize: cfg.size,\n        ...style,\n      },\n    });\n    const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;\n\n    group.addShape('text', {\n      attrs: {\n        x: 0,\n        y: labelY,\n        textAlign: 'center',\n        text: cfg.label,\n        ...labelStyle.style,\n      },\n    });\n    return keyShape;\n  },\n});\n\nconst COLOR = '#40a9ff';\nconst graph = new G6.TreeGraph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  modes: {\n    default: ['collapse-expand', 'drag-canvas', 'drag-node'],\n  },\n  defaultNode: {\n    backgroundConfig: {\n      backgroundType: 'circle',\n      fill: COLOR,\n      stroke: 'LightSkyBlue',\n    },\n    shape: 'iconfont',\n    size: 12,\n    style: {\n      fill: '#fff',\n    },\n    labelCfg: {\n      style: {\n        fill: COLOR,\n        fontSize: 12,\n      },\n    },\n  },\n  // 布局相关\n  layout: {\n    type: 'compactBox',\n    direction: 'LR',\n    getId(d) {\n      return d.id;\n    },\n    getHeight() {\n      return 16;\n    },\n    getWidth() {\n      return 16;\n    },\n    getVGap() {\n      return 20;\n    },\n    getHGap() {\n      return 60;\n    },\n  },\n});\n\ngraph.edge(({ target }) => {\n  const fill =\n    target.get('model').backgroundConfig &&\n    target.get('model').backgroundConfig.fill;\n  return {\n    shape: 'cubic-horizontal',\n    color: fill || COLOR,\n    label: target.get('model').relation || '',\n    labelCfg: {\n      style: {\n        fill: fill || COLOR,\n        fontSize: 12,\n      },\n    },\n  };\n});\n\nconst data = {\n  isRoot: true,\n  id: 'Root',\n  label: '可疑人员王**',\n  text: '&#xe622;', // 对应字体图标的Unicode码，\n  style: {\n    fill: 'red',\n  },\n  labelCfg: {\n    style: {\n      fill: 'red',\n    },\n  },\n  backgroundConfig: null, // 自定义项，用于判读是否需要圆背景\n  size: 30,\n  children: [\n    {\n      id: 'SubTreeNode1',\n      label: '**网咖',\n      text: '&#xe605;',\n      relation: '上网',\n      children: [\n        {\n          id: 'SubTreeNode2',\n          label: '多伦多',\n          text: '&#xe64b;',\n        },\n        {\n          id: 'id1',\n          label: '小王',\n          text: '&#xe622;',\n          children: [\n            {\n              id: 'SubTreeNode1.2.1',\n              label: '182****2123',\n              text: '&#xe60d;',\n            },\n            {\n              id: 'SubTreeNode4',\n              label: '今晚在吗',\n              text: '&#xe629;',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode3',\n      label: 'subway',\n      text: '&#xe653;',\n      children: [\n        {\n          id: 'SubTreeNode3.1',\n          label: '王五',\n          text: '&#xe622;',\n        },\n        {\n          id: 'SubTreeNode3.2',\n          label: '张三',\n          text: '&#xe622;',\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode5',\n      label: '小花',\n      relation: '老婆',\n      text: '&#xe74b;',\n      backgroundConfig: {\n        fill: 'Coral',\n      },\n      style: {\n        fill: '#fff',\n      },\n      labelCfg: {\n        style: {\n          fill: 'Coral',\n        },\n      },\n      children: [\n        {\n          id: 'SubTreeNode1.2.1',\n          label: '182****2123',\n          text: '&#xe60d;',\n          relation: '通话',\n          backgroundConfig: {\n            fill: 'Coral',\n          },\n          style: {\n            fill: '#fff',\n          },\n          labelCfg: {\n            style: {\n              fill: 'Coral',\n            },\n          },\n        },\n        {\n          id: 'SubTreeNode3.3',\n          label: '凶器',\n          text: '&#xe673;',\n          relation: '指纹',\n          backgroundConfig: {\n            fill: 'Coral',\n          },\n          style: {\n            fill: '#fff',\n          },\n          labelCfg: {\n            style: {\n              fill: 'Coral',\n            },\n          },\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode6',\n      label: '马航37*',\n      relation: '乘坐',\n      text: '&#xe610;',\n    },\n  ],\n};\n\ngraph.data(data);\ngraph.render();\n
\n

注意事项

\n

看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
1、text的fontFamily必须和iconfont.css里面的font-family保持一致：
\ndownload

\ndownload\n

2、data 里面的 text 使用的是 Unicode，需要自行复制。

\ndownload\ndownload"}