代码如下

<!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,iVBORw0KGgoAAAANSUhEUgAAAI8AAACPCAYAAADDY4iTAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAADk1JREFUeJztnfmTVNUVxz/9GGZQGILOALIoSBAV3FkMoEASJGrAuMQ9akUrasqy8m+k8kOqkmi0TFxTMSqJUbHKNRpFIUHckBhAmKgjogwTUJjM3p0fTj+mbXs59/V9/Za+n6quYYb7Xt/u/vZdzjn3nEwul6PBGA20A235n98AxgGtwFigJd9uDDAKGAL683/rBQ7lHz3AfmAf0A38N9+2YWiKugMhcwTwTWAmMC3/mAh4ITzXMPA5sBv4BOgAPmJEeKkjk7KRpwU4CZgHnABMATIR9icLdAIfAP/K/xyMsD9WSYN4xgNnAWcCs4n3aDoAbAPeBN5FpsHEklTxtADzgbOBOYQzDYXNEPA+sBER0nC03TEnaeKZDiwHFiLrmbRwENgAvAbsjbgvapIgngyyhlkJnBxxX8ImB7wDvADsirgvVYmzeDLAGcBFwNSI+xIFO4GngO1Rd6QccRXPaYhojo26IzFgO/AEsvWPFXETzxTgcmSacoyQAzYDjyPGyFgQF/GMAS5GFsP12Dn1AZ8hluFuxFLcw4j12G8zjFikm/P9GotYo8cCRyMW6nZgcr5d2AwCzwHPEANrdhzEczpwDTAhpPv3I5bencCHiAW4G/k228JDLNfTgeMRq/YMxL0RBnuAPxDxojpK8RwJXAssCOHencBWxKrbQTQ2lNGIlXsesoabZPn+OeBlZCqLxGodlXjmADcCR1m8527gDWRt0GXxvraYjnxRFiJTnS0+BX6PvP66Um/xZIA1wIXY8Tn1IYJZj0xNSSCDfHnOQdwqNtwpg8Ba4BUL91JTT/GMBW7Czk6qGxmy1yMCSiqtwIr8Y5yF+20E/kidprF6iWcacBsSQ1ML+4B1wCbEY50WmoFzgfMRR28tdAJ3IjvIUKmHeOYCtyDb8aB8gYjmddIlmmJakFHofGRDEZQDwB2IkEIjbPEsRXZUQbesg4if51lSHFRVgnHAJcj7F3Rt2Afcg+w4QyFM8awEfkjwF78DsWUkxsscAjOA65GdWhCGgHuBt6z1qICwxPN9xDcVhD7gMSREIXILZgwYBawCVhNsZ5YFHgT+YbNTEI54ViPb8SDsAu5DFsaOr3IcYhubEuDaHPAAlgVkWzznIVOVKTnEX7OOdC+Ia6UZuBpYEuDaLPA7LE5hNsWzDPFRma5xepHRZoutjjQAy4ArMZ/GhoC7gfdsdMKWeE4HbsXcI94F/AY5suIwYxZiOzM1LvYBv8CCO8NG+MM0ZC42vVcH8HOccILiv3+mu9ExwO1Y8CvWKp7WfEdMDYDvAb9kJHbGEYwuREAfG153FDJqNdfy5LWIxwNuxlzBbyHzbmoOv0VMD/JF3Gl43bHIGjUwtYjnUsQ7bMKbyIo/8ii4lNEL/Brz4LDFiDskEEHFcwpiQTZhC7KrclvxcOhHNh+moSmXE9CCHUQ844EbMNuS70L8LG7ECZdeREAmi+gmJFTGOAY7iHiuwyxsYC9wF26NUy8OIgI6aHDNVOAy0ycyFc/ZSDyulh7MX4ijdvYCv8VspF+BBO6rMRHPOOAKg/ZZxKPbyF7xKOkAHjVon0FmFbXV2kQ8l2NmzVxHiLEkDhWvIgF0WqYAF2gba8UzC5mytGxDHJ2O6HkEOeCo5XvIgcaqaMSTQZxw2t1VD3A/LhYnLgwgR3O065/RKBfPGvEsQnL6aXkYiaF1xIdO4GmD9vNRLJ6ricfDLLBrC3LozhE/nkcSbWrIILkDKlJNPEuQM9ga+pBRxxFPhoGH0Fv45wAnVmpQSTyjkJOdWp6hDmeFHDXxEWa7r4px6JXEsxD9Ib0u4EVtjxyR8iTwP2Xb2chOuySVxGPi+Hwc57dKCgeRc3BaVpX7j3LiOQl9SrdO4G2Dzjii52XgS2XbMyiTHqaceJYbdOQpnE0naQygH30yyDn6r1FKPOORgHYNnViKxHfUnVfRhwEvpoTPq5R4FqM/W/4CbtRJKoPo8/m0UiKaopR4vqW84RdIWKkjubyEPs5qcfEfisUzFX3C7NdwO6ykcwj9ZmcuRWlfisUzX3mjHGbGJkd8Wa9s14TsvA5TLJ6zlDfahqR2cySfD9AH7J1Z+EuheI5GP2W9oWzniD9+dnkNJ1Gw6yoUzynKGwzhjIJpQyueZgrO6hWKZ67yBtvR+0YcyWA3+pwBh7PZ+uLxcwNr2GrQKUdy0Mabn+D/wxfPMUieZA1OPOlE+7keS758uC8e7XmdbtxRmrSyA53dzkOKsxwWz0zlE8S+dKEjMIPoU7XMhBHxaMMvTNN4OJKFdnCYDiKeDPoMmx8G6JAjOWhLUR4WTzv5BVAVskh5Hkd60eYpnAw0efl/aPgcl+ki7XSh+4w94Gi/vKGGPYG75EgKWfRHkyd6KM8l47KyNwraz7nNQ18Y1nnRGwPt5zzBQ582xR3oawy0ddtb/VrhGlx2r8ZAGxQ/zkQ8PQE740gWWvEc6aEvR+jE0xj0Kts1+xZmDVEUtnfUH205zhYPff5dZyB0fAUPffZLd8ymMdDWqR/joU/2E7RCsSNZaPycAP0e+jmupvI6jsSgXQPnTPIw2yjs5og/6jWwh/4khNYe5Eg2RyjbDZiIR2sPciQbrbuqx0Nv/GsN2BlHstB+zoc89ObomguaOhKBNsrikIfk2dGgzYzqSDbaz/mAh94F78TTGLQr23V7SNyqhmMCdsaRHDLoP+duD/0J0Ck4K3PaaQPGKNrlgH0ecipC47dqwo0+aWeasl0XeTtPFv3JiBmBuuRICjOV7XbDiMtBW0pntmlvHIlCm/DiExgRj7aQuxNPehlFPvuFgo9gRDzaBAaT0RuRHMnieHSREznyZ9p98exGH5qhzV3oSBanKtvtIe/S8sWTRT/6zKvexJFAtJ/rYZ0Uxui8b/AkLjAsXbSjz9F0OHdhoXi0Oela0A9xjmSwQNluGPi3/0uheD5Df8h9obKdIxloxbOTgrVxcWjpO8qbnIqL70kLx6Gfst4q/KVYPNpM4E2UKKHjSCQlq/iVIEsV8XyIPsXGuegj7R3xpAVYpGy7g6K6pMXiyQH/VN5sEvqSA454ci46LzrApuI/lDpO8zr60o/nK9s54ocHfFfZto8SS5pS4tmH1NPSMAfn70oqi9CnFNxECQ9EuYN8rxp04iKDto544AGrDdqX1EM58byNPsLwRKSIlyM5LEGfBXcHUgL9a5QTTw6pfKvlUtzOKym0AGsM2j9b7j8qnT/fgP5A4AxEzY74cwH6sJpPqeDzrCSefuA5g05djDuSHHcmAisN2j9NhZ13tcwXL1NkGKrAeOAyZVtH/ckAP0KfBaOTIotyMdXEM0CFOa8ES5EFtCN+LMFsY/MUVex9mpw7f0dfvDQD3ICbvuJGG3CFQfttwJZqjTTiGQbWGjxxG3C1QXtHuHjATejdEFngUe2NNbyHWWHaRcgU5oieNeiP1ACsR1lXzSRV3J/QB8mDjD7HGbR32Oc0ZGuu5QDwV21jE/HsQxZRWkYDt+KCxqJiEnAjZsbbh9FngDdOUvkS8B+D9m3AbbiA+XrTCtyOPr8giNf8XZMnMRVPFrgPs+nreGQH5twX9aEZ+cJOMrhmPzLqGBEkPe5e4BHDaxYA1+AEFDZNwM3ojw2D2HLuJ0BhmqC5lTcAbxheswxngQ4TD1njmB6LehbYHvQJg/IQ5qWyz0ME5EYguzQhtpz5hte9j9km6CvUIp4B4C4MVud5VuGmMJuMBm5Bf/bKpxu4F33tka9Ra0mAvcDdATqwDPgJeiedozRjgZ8h9hwTeoE70adRLkkml9PGuldkOTKamNKBhRfRoExEtuOTDa/LAr9CH6deFlviAbiEYKcpupHR62NbHWkA5iFrHNN6IDlkS24So14Wm+IBuAr4doDrBpEXtcFmZ1JIBnE3rCHYkmMt8KK1zlgWTwa4nuAhqZswNJE3EBOAHxP8sME6JDLQGrbFA/KNuI7gAuoGHkCi9h2Cb2QNWrbKunAgHPGAjEBXASsCXp9DprA/oy/plEYmIKI5PeD1OeBx4HlrPSogLPH4/AC4sIbrvwSeQIQUakdjRhOydlyNPoirmCyyBFhvq1PFhC0egHOAa6nNptSJjEI1by9jTgY4E9m5mjg2i+kH7sEsgM+YeogHJJvGzZiFCJRiO/AksKvmHsWP05Cj29pES+U4ANxBmVOeNqmXeEC+ST8Fplq41wfAC0iQdpKnsyYkRd9KYLqF++1ARpyDFu5VlXqKB+So63XYy2n4OfAasJE6vWGWaENivJdiJyl6Dvgb8Bdq8FWZUm/x+CwFrkRfAL4aQ0iQ/mZkNBqwdF+bHImsZxYAJ2PPMfwl8CAhr29KEZV4YCTG1iRwSUM/kivYf+y3fH8TJiGuhFMQ416T5ftvRYSjPdVrlSjFA7ID+w6yULQ1ChWzB3HA7kRyLn5GOEN7E7Kem5V/zCa80pqHgMfQpwAMhajF49OOHNWpR12LIURQft7pbmSH0oN8KD3IGqI3/9NDbC0eYuEdl//ZVvCYgni3aw1xqUYOceGsJQZrvLiIx2ceshYyDTNoBDoQ0XRE3RGfuIkHZPhfjoR3jI+4L3FgH2Jl30zMzBJxFI9PM2KiX4VMFY1GN/AMkp22bttvE+IsHp8WxEO/En3N7yTTiRhANyNJJmJLEsTj4yHe5eXItjdNAfTDiH3qFQqqysSdJImnkHbE4bqI8LbD9WAPYh3fSES2mlpIqnh8Mkg55wWI9TYJQtqDpGvbjPm5t1iRdPEUcwxiK5qL5KQJGgtjkx7EQLkVsXhrC8PEnrSJpxAPCW+YhYxO0xBjnm0XQSH9yMjyCWLN3okYI1P5JqdZPKXwEAPkREaswxMQU4D/8N0kRyDTYhYp3AFidT7EiCV6PyNW6q78o2He0P8DTEweItrFFIYAAAAASUVORK5CYII=';

　　　　　　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. Light项目---vue搭建前端时遇见的一些问题

    css样式中设置的: opacity 表示透明度 将js对象存储到localStorge中 的时候,直接存储是不行的,会变成[object Object],都是这样的数据, 需要将其进行JSON化处理 ...

  2. mysql添加外键语句

    sql语句格式: · 添加外键约束:alter table 从表 add constraint 外键(形如:FK_从表_主表) foreign key (从表外键字段) references 主表(主 ...

  3. 忘记mysql超户密码的解决方法

    本文章针对用yum安装的mariadb数据库,如果是tar包安装的mysql数据库,只是数据库命令的关闭启动方式不同而已. 方法一:[root@localhost ~]# killall -u mys ...

  4. python 装饰器的坑

    今天研究了下装饰器,添加重试功能遇到了个坑,跟大家分享一下: 代码如下: def re_try(maxtry): print locals() def wrapper(fn): print local ...

  5. PHP FILTER_VALIDATE_INT 过滤器

    定义和用法 FILTER_VALIDATE_INT 过滤器把值作为整数来验证. Name: "int" ID-number: 257 可能的选项或标志: min_range - 规 ...

  6. Android中当数据库需要更新时我们该怎么办？

    问题:Android数据库更新并保留原来的数据如何实现 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我 ...

  7. [NOIP模拟15]题解

    A.建设城市(city) 这容斥题多难啊你们是怎么考场切掉的啊 首先可以想一下,如果没有k的限制,这题怎么做? 相信你们肯定能看出来是挡板法裸题:m个物品分给n个人,每个人至少一个. 就是$C_{m- ...

  8. opencv打开摄像头并新建窗口显示

    几个程序使用的基本函数如下: ******************************************************************* cvCreateCameraCap ...

  9. JDK的下载及安装

    JDK下载及安装 JDK的下载 官网下载 点击进入之后,显示的是当前版本最新的,点击downloads,选择适合自己电脑的版本下载 下载历史版本要一直往下拉,找到如图: 点击之后会显示以往的版本 环境 ...

  10. Dubbo入门到精通学习笔记（二）：Dubbo管理控制台、使用Maven构建Dubbo的jar包、在Linux上部署Dubbo privider服务（shell脚本）、部署consumer服务

    文章目录 Dubbo管理控制台 1.Dubbo管理控制台的主要作用: 2.管理控制台主要包含: 3.管理控制台版本: 安装 Dubbo 管理控制台 使用Maven构建Dubbo服务的可执行jar包 D ...