","position":{"start":{"line":6,"column":1,"offset":101},"end":{"line":6,"column":297,"offset":397}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"下载字体图标"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%B8%8B%E8%BD%BD%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87","aria-label":"下载字体图标 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"下载字体图标","position":{"start":{"line":8,"column":4,"offset":402},"end":{"line":8,"column":10,"offset":408}}}],"position":{"start":{"line":8,"column":1,"offset":399},"end":{"line":8,"column":10,"offset":408}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"直接去到","position":{"start":{"line":9,"column":1,"offset":409},"end":{"line":9,"column":5,"offset":413}}},{"type":"element","tagName":"a","properties":{"href":"https://www.iconfont.cn","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"阿里巴巴字体图标库","position":{"start":{"line":9,"column":6,"offset":414},"end":{"line":9,"column":15,"offset":423}}}],"position":{"start":{"line":9,"column":5,"offset":413},"end":{"line":9,"column":41,"offset":449}}},{"type":"text","value":"搜索下载即可，简要操作流程是：搜索图标（例如篮球） -> 选择自己喜欢的图标添加入库 -> 点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个 -> 在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：","position":{"start":{"line":9,"column":41,"offset":449},"end":{"line":9,"column":184,"offset":592}}},{"type":"raw","value":"
","position":{"start":{"line":10,"column":1,"offset":599},"end":{"line":10,"column":301,"offset":899}}}],"position":{"start":{"line":9,"column":1,"offset":409},"end":{"line":10,"column":301,"offset":899}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。","position":{"start":{"line":12,"column":1,"offset":901},"end":{"line":12,"column":165,"offset":1065}}}],"position":{"start":{"line":12,"column":1,"offset":901},"end":{"line":12,"column":165,"offset":1065}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"PS: 本案文件目录为 '/static/icons'","position":{"start":{"line":14,"column":1,"offset":1067},"end":{"line":14,"column":28,"offset":1094}}}],"position":{"start":{"line":14,"column":1,"offset":1067},"end":{"line":14,"column":28,"offset":1094}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"引入g6"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%BC%95%E5%85%A5g6","aria-label":"引入g6 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"引入G6","position":{"start":{"line":17,"column":4,"offset":1100},"end":{"line":17,"column":8,"offset":1104}}}],"position":{"start":{"line":17,"column":1,"offset":1097},"end":{"line":17,"column":8,"offset":1104}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"多种引入方式，请移步","position":{"start":{"line":18,"column":1,"offset":1105},"end":{"line":18,"column":11,"offset":1115}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/g6","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://github.com/antvis/g6","position":{"start":{"line":18,"column":12,"offset":1116},"end":{"line":18,"column":40,"offset":1144}}}],"position":{"start":{"line":18,"column":11,"offset":1115},"end":{"line":18,"column":71,"offset":1175}}},{"type":"text","value":"。\n","position":{"start":{"line":18,"column":71,"offset":1175},"end":{"line":19,"column":1,"offset":1177}}},{"type":"raw","value":"<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script><style>\n @import \"/static/icons/iconfont.css\";\n</style>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: '', // 对应字体图标的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: '',\n relation: '上网',\n children: [\n {\n id: 'SubTreeNode2',\n label: '多伦多',\n text: '',\n },\n {\n id: 'id1',\n label: '小王',\n text: '',\n children: [\n {\n id: 'SubTreeNode1.2.1',\n label: '182****2123',\n text: '',\n },\n {\n id: 'SubTreeNode4',\n label: '今晚在吗',\n text: '',\n },\n ],\n },\n ],\n },\n {\n id: 'SubTreeNode3',\n label: 'subway',\n text: '',\n children: [\n {\n id: 'SubTreeNode3.1',\n label: '王五',\n text: '',\n },\n {\n id: 'SubTreeNode3.2',\n label: '张三',\n text: '',\n },\n ],\n },\n {\n id: 'SubTreeNode5',\n label: '小花',\n relation: '老婆',\n text: '',\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: '',\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: '',\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: '',\n },\n ],\n};\n\ngraph.data(data);\ngraph.render();\n
","position":{"start":{"line":276,"column":1,"offset":5979},"end":{"line":276,"column":301,"offset":6279}}}],"position":{"start":{"line":275,"column":1,"offset":5871},"end":{"line":276,"column":301,"offset":6279}}},{"type":"text","value":"\n"},{"type":"raw","value":"
","position":{"start":{"line":278,"column":1,"offset":6281},"end":{"line":278,"column":126,"offset":6406}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2、data 里面的 text 使用的是 Unicode，需要自行复制。","position":{"start":{"line":281,"column":3,"offset":6411},"end":{"line":281,"column":39,"offset":6447}}}],"position":{"start":{"line":281,"column":1,"offset":6409},"end":{"line":281,"column":41,"offset":6449}}},{"type":"raw","value":"
","position":{"start":{"line":283,"column":1,"offset":6457},"end":{"line":283,"column":126,"offset":6582}}},{"type":"text","value":"\n"},{"type":"raw","value":"
","position":{"start":{"line":286,"column":1,"offset":6585},"end":{"line":286,"column":126,"offset":6710}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":287,"column":1,"offset":6711}}}}