实战案例

场景准备数据准备自定义节点-竞赛卡片选择布局选择合适的边绘制图树是图中一种特殊的数据结构。其特殊的性质、优美的结构，使得树形图在我们日常中广泛使用。比如，世界杯淘汰赛的晋级图，就是一个典型的树形数据可视化的案例。

下面我们将与大家探讨，如何使用 G6 快速实现这幅图。

场景准备

数据准备{ "roots": [{ "teamA": "法国", "flagA": "https://gw.alipayobjects.com/zos/rmsportal/yHYaCVIPRwEmmjbNqJjW.jpg", "teamB": "克罗地亚", "flagB": "https://gw.alipayobjects.com/zos/rmsportal/LJoAlBjTxagRLoNgSVmU.jpg", "scoreA": 4, "scoreB": 2, "children": [{ "teamA": "法国", "flagA": "https://gw.alipayobjects.com/zos/rmsportal/yHYaCVIPRwEmmjbNqJjW.jpg", "teamB": "比利时", "flagB": "https://gw.alipayobjects.com/zos/rmsportal/tUwmQwmljZAvTXtljXcV.jpg", "scoreA": 1, "scoreB": 0, "children": [……

在开始绘制树形图之前，我们先设置好一个 dom，并配上底图：

自定义节点-竞赛卡片我们先来注册一个 node ，给它取个名字，就叫”card”(卡片)好了。

G6.registerNode('card', {});

draw 是自定义图项的最小接口，我们需要通过操作绘图引擎 G 来生成竞赛卡片。

draw(item) { const group = item.getGraphicGroup(); const model = item.getModel(); const scoreTextStyle = { textAlign: 'center', fontWeight: 900, fontSize: 14, fill: '#000' }; const teamNameTextStyle = { textAlign: 'center', fontSize: 12, fill: 'rgba(0, 0, 0, 0.45)' }; const width = 134; const height = 60; const keyShape = group.addShape('rect', { attrs: { x: 0, y: 0, width, height, fill: '#fff', radius: 4, } }); group.addShape('image', { attrs: { x: 8, y: 8, width: 40, height: 24, img: model.flagA } }); group.addShape('image', { attrs: { x: 86, y: 8, width: 40, height: 24, img: model.flagB } }); group.addShape('text', { attrs: { ...teamNameTextStyle, x: 28, y: 52, text: model.teamA, } }); group.addShape('text', { attrs: { ...teamNameTextStyle, x: 106, y: 52, text: model.teamB, } }); group.addShape('text', { attrs: { ...scoreTextStyle, x: 67, y: 52, text: model.scoreA + ' : '+ model.scoreB, } }); return keyShape;}

注意 ：在自定义图形时，设置坐标时，我们只需要考虑自身坐标系，而不需要考虑世界坐标系。

根据 G6 对锚点的定义，设置锚点

anchor: [ [0, 0.5], // 左中 [1, 0.5], // 右中 [0.5, 0], // 上中 [0.5, 1] // 下中]

选择布局G6 中内置了若干种树图布局，不难看出这是，一种竖直方向紧凑树的布局。

const layout = new G6.Layouts.CompactBoxTree({ direction: 'V',});

选择合适的边边路由是图可视化领域中的一个难点，为了屏蔽这部分的复杂度，我们沉淀一些常见的边路由图形，供大家使用。

require('@antv/g6/build/plugin.edge.polyline');

引入该插件，会在 G6 中注册 polyline （直角） , polyline-round （圆角折线）两种边路由：

绘制图有了上面储备的原料，我们已经基本上能画出这幅对阵图了。

const tree = new G6.Tree({ container: 'mountNode', width: 760, height: 744, fitView: 'cc', layout,});tree.node({ shape: 'card'});tree.edge({ shape: 'polyline-round', style: { stroke: 'white', lineWidth: 1, strokeOpacity: 1 }});tree.read(data);

完整代码

以俭修身 以俭兴业（人民论坛）
【技术特点】4D动感影院科普|动感影院的构成及技术原理—影华科技