基于D3 svg的水球图

        createCircle(){
				// 创建画布
				let svg = d3.select(this.$refs.testR).append("svg") // 创建svg
			    		.attr("width", 800).attr("height", 500); // 设置svg 宽高
			    		
			    	svg.append("circle") // 创建中心园
					    .attr("fill","#215188") // 初始颜色
					    .attr("r",1)	// 初始半径
		    			.attr("cx",270) // x轴位置
		    			.attr("cy",200) // y轴位置
				    	.transition() // 开启动画过渡模式
				    	.ease("bounce") // 过渡效果 bounce弹跳
				    	.duration(1400) // 过渡时长
				    	.attr("r",100) // 最终半径
				    	.attr("fill","#6fdaff") // 最终填充颜色
			    	
			    	// 延时加载波浪，等待圆环加载完
			    	setTimeout(loadWave,1400);
			    	function loadWave(){
			    		/* 定义一个圆形裁剪路径，制作一个波浪路径，用圆环裁剪波浪 */
				    	svg.append("defs").append("clipPath") // 定义一个裁剪路径
						    .attr("id","clipPath")
						    .append("circle") 
						    .attr("r",100)
			    			.attr("cx",100) // x轴位置
			    			.attr("cy",0) // y轴位置;
			    		
			    		/* 定义三个不同位置的波浪，通过切换波浪实现动画效果 */
			    		// 初始位置
				    	let d0 = "M-400,90";  // M:初始点位置x,y
				    	d0+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0";	// 贝兹曲线
						d0+= " V100 H0"; // A弧度: "x轴半径","y轴半径" 
						d0+= " Z"; // 终止
						
						// 移动终点
				    	let d1 = "M0,0";  // M:初始点位置x,y
				    	d1+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0";	// 贝兹曲线
						d1+= " V100 H0"; // A弧度: "x轴半径","y轴半径" 
						d1+= " Z"; // 终止
						
						// 归零位置
				    	let d2 = "M-400,0";  // M:初始点位置x,y
				    	d2+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0";	// 贝兹曲线
						d2+= " V100 H0"; // A弧度: "x轴半径","y轴半径" 
						d2+= " Z"; // 终止
						
				    	let wave = svg.append("path") // 呈现波浪的元素
					    	    .attr("fill", "#ffffff80") // 填充渐变色,后两位为透明度
					    	    .attr("d", d0) // 绘制路径
					    	    .attr("transform", "translate(170,200)") // 图形整体移动与外圈对应
					    	    .attr("clip-path","url(#clipPath)"); // 应用裁剪
					   	
					   	/* 定时切换不同的波浪 */
					    function waveTransition(isFirst){
					    	if(!isFirst) wave.interrupt().attr("d", d2); // 归位
					    	wave.transition().ease("out") // 动画效果 缓出
					    	.duration(4000).attr("d", d1); // 动画时间与路径
					    	setTimeout(waveTransition,4000); // 重启动画
					    };
					    waveTransition(true);
				    }
			}

以上是主要代码段，基于d3实现。