D3系列第一弹——绘制饼图

来源：互联网发布：linux永久设置密码编辑：程序博客网时间：2024/06/05 17:18

使用D3绘制饼图：

html文件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>D3Study</title>    <script type="text/javascript"src="D3/d3.min.js"></script>    <style>         .MyText {            fill: white;            text-anchor: middle;        }    </style></head><body><div id="pie" style="height:400px;background-color:lightgrey"></div></body><script type="text/javascript" src="D3/Pie.js"></script></html>


js文件：
var width=400;var height=400;var dataset=[30,10,43,53,55,13];//设置数据集var svg1=d3.select("#pie").append("svg").attr("width",width).attr("height",height);var pie=d3.layout.pie();var piedata=pie(dataset);var outerRadius=150;//外半径var innerRadius=0;//内半径，为0则中间没用空白var arc=d3.svg.arc()//弧生成器.innerRadius(innerRadius)//设置内半径.outerRadius(outerRadius);//设置外半径var color=d3.scale.category10();var arcs=svg1.selectAll("g").data(piedata).enter().append("g").attr("transform","translate("+(width/2)+","+(width/2)+")");arcs.append("path").attr("fill",function(d,i){    return color(i);}).attr("d",function (d) {    return arc(d);});arcs.append("text").attr("transform",function(d){    return "translate("+arc.centroid(d)+")";}).attr("text-anchor","middle").text(function(d){    return d.data;});
成果图：

阅读全文

0 0