svg圆环缓冲动画

代码如下

svg圆环缓冲动画

<!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 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圆环缓冲动画

相关文章