【d3.js教程05】简单的图标之弧形
最后更新于：2022-04-01 14:18:04
首先前面用到了很多的enter(),在这里用一张图片显示
不解释了哈自己试一试
接下来的内容就要涉及到布局了，什么布局，其实就是数据处理
相比别的绘图工具，d3对数据的处理做的非常好
我之所以都粘贴所有的代码 就是想完成的让大家自己试一试 我在几乎每一行需要注释的地方都写了注释 辅助大家理解
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<svg></svg>
<script type="text/javascript">
var svg = d3.select("svg");
svg.attr("width",1000)
.attr("height",1000);
var dataset = [30,10,32,55,13];
var color = d3.scale.category10();//有十种颜色的颜色比例尺
var width=500; //用来控制圆形原点位置
/*数据转换*/
var pie = d3.layout.pie(); //pie可以当函数用了，可不是PI哦
var piedata = pie(dataset); //piedata就是转换之后的数据
var outerRadius = 150; //外半径
var innerRadius = 30; //内半径，如果为零，中间没有空白
/*弧生成器设置*/
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
/*给弧生成器绑定数据，设置起点*/
var arcs = svg.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)+")";//这里面的生成的是5个二维数组，对应数据集中的五个数
})
.attr("text-anchor","middle") //对齐方式 貌似是 去掉也不影响显示
.text(function(d){
return d.data; //填充数据集中的数据
})
</script>
</body>
</html>
~~~