代码如下

<!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. Android Studio javadoc 生成注释文档

    相信大家刚开始写代码的时候就被前辈告知了要养成写注释的好习惯,今天我们来了解一下如何利用我们平时写的注释生成文档,一起来看看吧! 其实注释格式一般如下两种:  /*  *普通多行  *注释  */ / ...

  2. macOS截屏

    Command+Shift+3: 全屏幕截屏,并自动保存在桌面 Command+Shift+4: 手动截屏,并自动保存在桌面 Command+Shift+4, + Space, 之后点击程序的窗口,实 ...

  3. python判断文件的编码格式是否为UTF8 无BOM格式

    转自: https://www.cnblogs.com/ferraborghini/p/4951102.html https://www.cnblogs.com/Detector/p/8744992. ...

  4. apue第4章习题

    4.1 用 stat 函数替换图 4-3 程序中的 lstat函数,如若命令行残数之一是符号链接,会发生什么变化? stat不支持链接,如果有参数是链接符号,会显示链接后的文件属性. 4.2 如果文件 ...

  5. Java打war包or打jar包

    //一个jar包可以包含多个entry,这样就能实现下面功能 1.I/O       读文件流步骤                 File file=new File(filePath);     ...

  6. TxtUtil

    /** *包名:cn.yufu.utils *描述:package cn.yufu.utils; */ package cn.yufu.utils; import java.io.BufferedRe ...

  7. NOIP模拟测试18（T3待更新）

    T1: 直接模拟,详见代码注释. 复杂度$O(NM)$. Code: #include<iostream> #include<cstdio> #include<vecto ...

  8. php网络编程实例

    php网络编程实例 一.总结 一句话总结: socket_create():创建socket socket_bind():绑定IP和端口 socket_listen():监听客户端信息 <?ph ...

  9. mac下nginx

    配置文件位置 /usr/local/etc/nginx/nginx.conf 简单命令 nginx -s quit 退出 nginx -s reload 重新加载 nginx -t 测试nginx.c ...

  10. git分布式版本控制系统权威指南学习笔记（一）：配置文件、简单流程和小问题

    文章目录 git配置文件简介 git config各种命令 配置级别: 用户信息 文本编辑器 差异分析工具 配置命令别名 公钥 git协同流程 简单流程 初始化版本库 提交至缓存区 查看状态 提交分支 ...