d3.js绘制环形图

￡神魔★判官ぃ 2022-04-18 02:39 400阅读 0赞

l![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

index.html

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" href="css/style-bar.css" media="screen" type="text/css">
    </head>
    <body>
    	<div id="container"></div>
    	
    	<script src='http://d3js.org/d3.v3.js'></script>
    	<script src='js/index-pie.js'></script>
    </body>
    </html>

index-pie.js

d3.csv("data-pie.csv",type,function(data){
    	var width=400,
    	height=400;
    	
    	//div--svg--g--pie--text
    	
    	//SVG
    	var svg=d3.select("#container")
    	.append("svg")
    	.attr("width",width) 
    	.attr("height",height)
    	
    	//g
    	var g=svg.append("g")
    	.attr("transform","translate(200,200)")
    	
    	var arc_generator=d3.svg.arc()
    	.innerRadius(100)
    	.outerRadius(200);
    	
    	var angle_data=d3.layout.pie()
    	.value(function(d){return d.population;})
    	
    	//颜色
    	var color=d3.scale.category10();
    	
    	//pie
    	g.selectAll("path")
    	.data(angle_data(data))
    	.enter()
    	.append("path")
    	.attr("d",arc_generator)
    	.style("fill",function(d,i){return color(i);})
    	
    	//text
    	g.selectAll("text")
    	.data(angle_data(data))
    	.enter()
    	.append("text")
    	.text(function(d){return d.data.education;})
    	.attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")";})
    	.attr("text-anchor","middle")
    	
    });
    
    //字符串转数值
    function type(d){
    	d.population=+d.population;
    	return d;
    }

data-pie.csv

education,population
    大专及以上,11964
    高中和中专,18799
    初中,51966
    小学,35876
    文盲人口,5466

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220418/342ceefb5e4240a6afb9179b28c7a779.png