代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
　　#hhn {
　　　　width: 500px;
　　　　height: 500px;
　　　　position: relative;
　　　　background: rgba(0,0,0,0.5);
　　}
</style>
</head>
<body>
　　<div id="hhn"></div>
</body>
<script src="../libs/d3.js"></script>
<script src="../libs/jquery.js"></script>
<script>
var chartCon = $('#hhn');

var domInfo = [{
　　　　id : 'circle1',
　　　　value : 32,
　　　　left : '5%',
　　　　top : '5%',
　　　　text : '通信'
　　},{
　　　　id : 'circle2',
　　　　value : 68,
　　　　left : '35%',
　　　　top : '5%',
　　　　color : 'rgba(199, 164, 14, 0.5)',
　　　　text : '物流'
　　},{
　　　　id : 'circle3',
　　　　value : 32,
　　　　left : '65%',
　　　　top : '5%',
　　　　text : '半导体'
　　},{
　　　　id : 'circle4',
　　　　value : 32,
　　　　left : '5%',
　　　　top : '53%',
　　　　text : '智能制造'
　　},{
　　　　id : 'circle5',
　　　　value : 68,
　　　　left : '35%',
　　　　top : '53%',
　　　　color : 'rgba(199, 164, 14, 0.5)',
　　　　text : '网络信息'
　　},{
　　　　id : 'circle6',
　　　　value : 32,
　　　　left : '65%',
　　　　top : '53%',
　　　　text : '其他'
　　}];

　　var dom;
　　$(domInfo).each(function(i,v){
　　　　chartCon.append('<div id='+v.id+' style="position:absolute;left:'+v.left+';top:'+v.top+';width:150px;height:150px;"></div>');
　　　　dom = document.getElementById(v.id);
　　　　$('<span>').css({
　　　　　　position: 'absolute',
　　　　　　width: '100%',
　　　　　　height: '20%',
　　　　　　textAlign:'center',
　　　　　　color: '#bbbcc0',
　　　　　　fontSize: 20,
　　　　　　top: '105%'
　　　　}).text(v.text).appendTo($(dom));
　　　　　　buildCircle(dom,v.value,v.color,v.id);
　　　　});
　　　　function buildCircle(el, value, vColor,vId) {

　　　　　　if (!d3.arc) d3.arc = d3.svg.arc;
　　　　　　if (!d3.pie) d3.pie = d3.layout.pie;

　　　　　　var svg = d3.select(el).append('svg')//给每个div添加svg元素
　　　　　　　　.attr('width', '100%')
　　　　　　　　.attr('height', '100%')
　　　　　　　　.attr('viewBox', '0 0 100 100');

　　　　　　var defs = svg.append('defs');

　　　　　　var id = 'color_' + Math.random();
　　　　　　var linear = defs.append('linearGradient')
　　　　　　　　.attr('x1', 0)
　　　　　　　　.attr('y1', 0)
　　　　　　　　.attr('x2', 0)
　　　　　　　　.attr('y2', 1)
　　　　　　　　.attr('id', id);

　　　　　　linear.append('stop')
　　　　　　　　.attr('stop-color', vColor || 'rgba(2,135,188,0.5)')
　　　　　　　　.attr('offset', 0);

　　　　　　linear.append('stop')
　　　　　　　　.attr('stop-color', vColor || 'rgba(2,135,188,0.5)')
　　　　　　　　.attr('offset', 1);

　　　　　　var imgSrc = 'data:image/png;base64,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';

　　　　　　svg.append('image')
　　　　　　　　.attr('width', 100)
　　　　　　　　.attr('height', 100)
　　　　　　　　.attr('x', 0)
　　　　　　　　.attr('y', 0)
　　　　　　　　.attr('xlink:href', imgSrc);

　　　　　　var data = [value, 100 - value];//圆环的数据

　　　　　　var pie = d3.pie()
　　　　　　　　.startAngle(0)
　　　　　　　　.sort(function(d, i) {
　　　　　　　　　　return d == value ? 1 : -1;
　　　　　　　　　})
　　　　　　　　.endAngle(-Math.PI * 2);

　　　　　　var arcData = pie(data);//生成圆环数据的数组对象

　　　　　　var arc = d3.arc()
　　　　　　　　.innerRadius(39)
　　　　　　　　.outerRadius(50);
　　　　　　　　//.cornerRadius(6);

　　　　　　var group = svg.append('g')
　　　　　　　　.attr('transform', 'translate(50, 50)');
　　　　　　　　group.selectAll('path')
　　　　　　　　.data([arcData[0]])
　　　　　　　　.enter()
　　　　　　　　.append('path')
　　　　　　　　.attr('class','path' + vId)
　　　　　　　　.style('fill', 'rgba(0,0,0,0)')
　　　　　　　　.attr('d', arc);
　　　　　　　var i = 0;

　　　　　　function move(){
　　　　　　　　if(i < 100){
　　　　　　　　　　requestAnimationFrame(move);
　　　　　　　　}else {
　　　　　　　　　　return;
　　　　　　　　}
　　　　　　$('.path' + vId).remove();//每次生成的时候要先删除原来的元素
　　　　　　i+=1;
　　　　　　data = [value * i / 100, 100 - value * i / 100];
　　　　　　pie = d3.pie()
　　　　　　　　.startAngle(0)
　　　　　　　　.sort(function(d, k) {
　　　　　　　　　　return d == value * i / 100 ? 1 : -1;
　　　　　　　　})
　　　　　　　　.endAngle(-Math.PI * 2);
　　　　　　arcData = pie(data);
　　　　　　group.selectAll('path')
　　　　　　　　.data([arcData[0]])
　　　　　　　　.enter()
　　　　　　　　.append('path')
　　　　　　　　.attr('class','path' + vId)
　　　　　　　　.style('fill', 'url(#' + id + ')')
　　　　　　　　.attr('d', arc);
　　　　　　text.text(value * i / 100 + '%')
　　　　　　}

　　　　　　var text = group.append('text')
　　　　　　　　.text(value + '%')
　　　　　　　　.attr('class','cirtext')
　　　　　　　　.attr('x', '0')
　　　　　　　　.attr('y', '0')
　　　　　　　　.attr('text-anchor', 'middle')
　　　　　　　　.attr('dy', '0.5em')
　　　　　　　　.style('fill', '#ffffff')
　　　　　　　　.style('cursor', 'pointer')
　　　　　　　　.style('font-size', 27);
　　　　　　　move();
　　　　　　$('.cirtext').hover(function(){
　　　　　　　　　　$(this).css('transform','scale(1.2)')
　　　　　　　　},function(){
　　　　　　　　　　$(this).css('transform','scale(1)')
　　　　　　　　});
　　　　}
</script>
</html>

svg圆环缓冲动画的更多相关文章

  1. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  2. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  3. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  4. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

  5. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  6. 快速找到自己想要用到的cocos2d-x的缓冲动画

    游戏中在做很多动画时,需要用到缓冲来增强表现.比如宝箱"鼓"几下,然后"蹦"的一下打开.很多时候要调效果时,需要轮着试,如果有一张图和实际示例效果,那就省很多事 ...

  7. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

  8. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  9. Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing

    随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...

随机推荐

  1. 前端学习(八）sass和bootstrap（笔记）

    less sass 和less基本上70%差不多(书写方式不一样) sass功能更多一点 1.定义一个变量 $b:blue; div{width:100px;height:100px; backgro ...

  2. cocos2D-X Download

    { http://cocos2d-x.org/download https://github.com/cocos2d/cocos2d-x https://github.com/fusijie/Coco ...

  3. fastDFS配置文件 fdfs_client.conf

    # connect timeout in seconds# default value is 30sconnect_timeout=30 # network timeout in seconds# d ...

  4. sql INSERT语句

    当我们需要向数据库表中插入一条新记录时,就必须使用INSERT语句. INSERT语句的基本语法是: INSERT INTO <表名> (字段1, 字段2, ...) VALUES (值1 ...

  5. Android中如何搭建一个WebServer

    今天终于把老大交代的任务搞完了,感觉收获挺多的,所以就写一篇来记录一下吧,首先还是来看一下,老大们的需求 需求: 希望移动端的用户标识(IMEI)和HTML页面的用户标识(Cookie)连接起来,其中 ...

  6. Eclipse lombok get set方法报错

    在maven仓库中找到 lombok jar包 如:C:\Program File\.m2\Repository\org\projectlombok\lombok\1.18.2\lombok-1.18 ...

  7. Vmware ESXi安装群晖Synology DSM 5.x

    简介 在Vmware ESXI中安装群晖Synology DSM 5.0 (4528) 文件准备 Vmware ESXi用户安装需要的文件 NB_x64_5032_DSM_50-4528_Xpenol ...

  8. jeecg接口开发及权限实现原理

    接口开发使用的框架 jeecg本身是基于 Spring MVC 框架搭建的,因此,使用 Spring MVC 框架的 RESTful API 功能来进行接口开发就是顺理成章的事了. 接口的拦截与鉴权 ...

  9. vue-lic工具搭建vue-webpack项目

    1.安装node环境(安装node时候会自动安装npm) 参考官网:https://nodejs.org/en/download/ 2.安装vue的脚手架工具vue-cli // 全局安装 npm i ...

  10. OSPF中DR和BDR到底是谁先选举出来的？

    在OSPF的DRBDR选举的过程中,DR的选举依靠的是hello报文,在two-way之后,交互hello报文完成DR/BDR的选举. 那么在每台路由器根据收到的所有hello报文,会构建自己接口的数 ...