d3.v4制作饼图

最新推荐文章于 2024-05-30 11:27:58 发布

decadent7

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量101

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ZZS423/article/details/128450029

版权

使用d3v4版本制作饼图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Page Template</title>
    <!--script src="https://d3js.org/d3.v4.min.js"></script-->
    <script src="d3.v4.js"></script>

</head>
<body>

<h4>arc Generater</h4>
<button id ='pie'>pie</button>
<button id="pie2">pie*2</button>
<button id="rose">rose</button>
<br/>
<br/>


<script type="text/javascript">
//饼图
var w=600,h=400

var svg=d3.select("body")
        .append("svg")
        .attr("width",w)
        .attr("height",h)
        .style("background-color","lavender")
		
	
	
function renderRose(){

var perAngle=2*Math.PI/10  //一块大小

var data=d3.range(10).map(function(i){
	return{
		innerRadius:35,
		outerRadius:45+15*(i+1),
		startAngle:perAngle*i,
		endAngle:perAngle*(i+1),
	}
	
})
console.log(data)

var arc=d3.arc()

svg.selectAll('g').remove()
var roseG=svg.append('g')
			.attr('class','roseg')
			.attr('transform','translate('+w/2+','+h/2+')')

var roseSelection=roseG.selectAll('path.rose')
						.data(data)
						
roseSelection.enter()
			.append('path')
			.attr('class','rose')
			.attr('d',function(d,i){return arc(d)})
			.attr('fill',function(d,i){return 'rgba('+i*15%255+','+i*8%255+',255,0.6)'})

			.on('mouseover',function(){
				d3.select(this)
				.style('opacity',0.2)
			})
			
			.on('mouseout',function(){
				d3.select(this)
				.style('opacity',1)
			})
			
roseSelection.attr('d',function(d,i){return arc(d)})
			
roseSelection.exit().remove()
}

		
var color=d3.scaleOrdinal(d3.schemeCategory20c)	
//renderPie(50,150,Math.PI)
function renderPie(innerRadius,outerRadius,endAngle){
	
// var data=[{
// 	startAngle:0,//起始角度
// 	endAngle:endAngle*0.1,//终止角度	
// 	},
// 	{
// 		startAngle:endAngle*0.1,//起始角度
// 		endAngle:endAngle*0.3,//终止角度	
// 	},
// 	{
// 		startAngle:endAngle*0.3,//起始角度
// 		endAngle:endAngle,//终止角度	
// 	},
// 	]
var data=[
    {startAngle:0,endAngle:endAngle*0.1},
   {startAngle:endAngle*0.1,endAngle:endAngle*0.2},
   {startAngle:endAngle*0.2,endAngle:endAngle*0.4},
   {startAngle:endAngle*0.4,endAngle:endAngle*0.7},
   {startAngle:endAngle*0.7,endAngle:endAngle*0.8},
   {startAngle:endAngle*0.8,endAngle:endAngle*1}]

//圆弧生成器
var arc=d3.arc()
		.innerRadius(innerRadius)//内部半径
		.outerRadius(outerRadius)//外部半径
svg.selectAll('g').remove()
//添加做图的group  pieG
var pieG=svg.append('g')
			.attr('transform','translate('+w/2+','+h/2+')')
//创建图形
pieG.selectAll('path.pie')
	.data(data)
	.enter()
	.append('path')
	.attr('class','pie')
	.attr('d',function(d,i){return arc(d)})
	.style('fill',function(d,i){return color(i)})
	.transition()//进入时的效果
	.duration(1000)
	.attrTween("d",function(d){
		var start={startAngle:0,endAngle:0}
		var interpolate=d3.interpolate(start,d);
		return function(t){return arc(interpolate(t))}
	})
console.log(arc(data[0]))
	
	
}	
//事件监听
d3.select('#pie')
	.on('click',function(){
		renderPie(50,150,Math.PI)
	})
d3.select('#pie2')
	.on('click',function(){
		renderPie(50,150,Math.PI*2)
	})
d3.select('#rose')
	.on('click',function(){
		renderRose()
	})	

//	
renderPielayout(svg)

function renderPielayout(svg){
var data = [
  {"number":  4, "name": "Locke"},
  {"number":  8, "name": "Reyes"},
  {"number": 15, "name": "Ford"},
  {"number": 16, "name": "Jarrah"},
  {"number": 23, "name": "Shephard"},
  {"number": 42, "name": "Kwon"}
];

//用pie布局来生成创建圆弧的角度数据

var pieData=d3.pie()(data.map(function(d,i){return d.number}))
console.log(pieData)

//圆弧生成器
var arc=d3.arc()
		.innerRadius(50)//内部半径
		.outerRadius(150)//外部半径
svg.selectAll('g').remove()
//添加做图的group  pieG
var pieG=svg.append('g')
			.attr('transform','translate('+w/2+','+h/2+')')
//创建图形
pieG.selectAll('path.pie')
	.data(pieData)
	.enter()
	.append('path')
	.attr('class','pie')
	.attr('d',function(d,i){return arc(d)})
	.style('fill',function(d,i){return color(i)})
	.transition()//进入时的效果
	.duration(1000)
	.attrTween("d",function(d){
		var start={startAngle:0,endAngle:0}
		var interpolate=d3.interpolate(start,d);
		return function(t){return arc(interpolate(t))}
	})


}


	
	
	
	
	
	
	
	
</script>
</body>
</html>