代码如下

<!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. tooltip（提示框）组件

    一.class加载方式 <span id="pos" class="easyui-tooltip" title="这是提示内容"> ...

  2. LeetCode Array Easy 26.Remove Duplicates from Sorted Array 解答及疑惑

    Description Given a sorted array nums, remove the duplicates in-place such that each element appear ...

  3. redis 发布订阅（pub/sub ）

  4. 第二章 部署Kubernetes集群准备环境

    一.centos7开机自动联网设置 1.使用root用户登录进入Linux,打开进去终端 2.在终端中输入:cd  /etc/sysconfig/network-scripts 3.ll命令找到目录下 ...

  5. 你不知道的USB

    USB的接口类型.定义和原理 目前USB接口类型已经更新到了USB3.1和USB Type-C类型,下面就对USB的类型进行介绍整理 一.UCB的通信协议类型 1.1 USB定义及类型 USB(Uni ...

  6. 【Luogu】【关卡1-8】BOSS战-入门综合练习2（2017年10月）【AK】------都是基础题

    P1426 小鱼会有危险吗 我个人觉得这个题目出的不好,没说明白,就先只粘贴的AC代码吧 #include <bits/stdc++.h> using namespace std; int ...

  7. vue element-ui NavMenu错位问题

    原因:子菜单全部打开后太长超过100% 解决方法:设置只能点击打开当前的菜单

  8. mysql 100%占用的解决

    早上客户反应,其网站无法访问,无限转圈 上服务器,查看磁盘空间df -h,内存使用率free -m,网络流量iftop均正常 然后使用top查看时,发现mysql的cpu使用率上升到200%. 解决过 ...

  9. Windows version PE System Key

    { }

  10. 实战：基于 Spring 的应用配置如何迁移至阿里云应用配置管理 ACM

    最近遇到一些开发者朋友,准备将原有的Java Spring的应用配置迁移到 阿里云应用配置管理 ACM 中.迁移过程中,遇到不少有趣的问题.本文将通过一个简单的样例来还原迁移过程中遇到的问题和相关解决 ...