g6实现左右展开树图（思维导图）

设置边和节点，可以用default，也可以再单独设置。参考如下：

https://g6.antv.vision/zh/docs/api/graphFunc/item/#graphnodenodefn

节点总览 | G6

Circle | G6

效果：

 附部分代码：

			var container = document.getElementById('container');
			const {
				Util
			} = G6
			const dataTransform = (data) => {
				const changeData = (d, level = 0, color) => {
					const data = {
						...d,
					};
					switch (level) {
						case 0:
							data.type = 'dice-mind-map-root';
							break;
						case 1:
							data.type = 'dice-mind-map-sub';
							break;
						default:
							data.type = 'dice-mind-map-leaf';
							break;
					}

					data.hover = false;

					if (color) {
						data.color = color;
					}

					if (level === 1 && !d.direction) {
						if (!d.direction) {
							data.direction = d.id.charCodeAt(d.id.length - 1) % 2 === 0 ? 'right' : 'left';
						}
					}

					if (d.children) {
						data.children = d.children.map((child) => changeData(child, level + 1, data.color));
					}
					return data;
				};
				return changeData(data);
			};
			const width = container.scrollWidth;
			const height = container.scrollHeight || 500;
			const graph = new G6.TreeGraph({
				container: 'container',
				width,
				height,
				fitView: true,
				fitViewPadding: [10, 20],
				minZoom: 0.5,
				modes: {
					default: ['drag-canvas', 'zoom-canvas', 'dice-mindmap'],
				},
				defaultNode: {
					size: 50,
					anchorPoints: [
						[0, 0.5],
						[1, 0.5],
					],
				},
				defaultEdge: {
					type: 'polyline',
					style: {
						lineWidth: 1,
						stroke: '#A3B1BF',
					},
				},
				layout: {
					type: 'mindmap',
					direction: 'H',
					getHeight: () => {
						return 16;
					},
					getWidth: () => {
						return 26;
					},
					getVGap: () => { // 节点纵向间距的回调函数
						return 10;
					},
					getHGap: () => { // 节点横向间距的回调函数
						return 50;
					},
				},
			});

			let centerX = 0;
			graph.node(function(node) {
				if (node.id === '0') {
					centerX = node.x;
				}
				return {
					label: node.desc,
					labelCfg: {
						style: {
							fontSize: node.children ? 12 : 10,
							fill: node.id === '0' ? '#4d5fd1' : node.children ? '#ffffff' : '#5637d1',
						},
						position: node.id === '0' ?
							'bottom' : node.children ?
							'center' : node.children && node.children.length > 0 ?
							'left' : node.x > centerX ?
							'right' : 'left',
						offset: !node.children ? -45 : 10
					},
					style: {
						// fill: node.id === '0' ? '#ea4e00' :'r(0.5, 0.5, 0.7) 0:#cfcfcf 0.5:#514bff 1:#1890ff',
						stroke: '#c6c6c6',
						shadowColor: '#cbcbcb',
						shadowBlur: 20,
						opacity: 0 // 隐藏圆球
					},
					icon: {
					  show: node.children ? true : false,
					  img: node.id === '0' ? 'img/c5.png' : node.position === 'left' ? 'img/c3.png' : 'img/c4.png',
					  // text: '...', 使用 iconfont
					  width: 50,
					  height: 50,
					}
				};
			});
			graph.edge((edge) => {
			  return {
			    id: edge.id,
			    type: 'polyline',
			    style: {
			      stroke: '#afb9c3',
			    },
			  };
			});
			graph.data(data);
			graph.render();
			graph.fitView();

			if (typeof window !== 'undefined')
				window.onresize = () => {
					if (!graph || graph.get('destroyed')) return;
					if (!container || !container.scrollWidth || !container.scrollHeight) return;
					graph.changeSize(container.scrollWidth, container.scrollHeight);
				};

补充数据形式：