<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<canvas width="960" height="600"></canvas>
<script src="resources/js/d3_v4/d3.js"></script>
<script>
var canvas =document.querySelector("canvas"),//querySelector() 方法仅仅返回匹配指定选择器的第一个元素
context=canvas.getContext("2d");
var width=canvas.width,
height=canvas.height,
radius=Math.min(width,height)/2;
var color=["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"];
var color1=d3.scaleOrdinal(d3.schemeCategory10);//这是一个function
// color1.domain([0,6]);
// console.log(color1(0));
var arc=d3.arc()
.outerRadius(radius-10)
.innerRadius(radius-50)
.cornerRadius(12)
.padAngle(0.01)
.context(context);
var labelArc=d3.arc()
.innerRadius(radius-40)
.outerRadius(radius-40)
.context(context);
var pie=d3.pie()
.sort(null)
.value(function(d){return d.population});
var cross=d3.symbol()
.type(d3.symbolCross)
.context(context);
context.translate(width/2,height/2);//把焦点移动到（x,y）的位置
//pie和arc的区别 在饼图里面填充弧线
d3.tsv("resources/data/data.tsv"
,function(d){d.population=+d.population; return d;}// convert "population" column to number 变为数值型
,function(erro,data){
if(erro) throw erro;
var arcs=pie(data);
arcs.forEach(function(d,i){
context.beginPath();
arc(d);
context.closePath();
context.fillStyle=color1(i);
context.fill();
});
//画边界线
context.beginPath();
arcs.forEach(arc);
context.closePath();
context.strokeStyle="#fff";
context.stroke();
//画标签
context.beginPath();
context.textAlign="center";
context.textBaseline="middle";
context.fillStyle="#000";
arcs.forEach(function(d){
var c=labelArc.centroid(d);
context.fillText(d.data.age,c[0],c[1]);
context.save();
context.translate(c[0]+10,c[1]+10);
cross();
context.restore();
})
context.closePath();
context.fill();
})
</script>
</body>
</html>
arc画出来的是一个面，如果要画成线，设定
innerRadius(5+cgap*rad).
outerRadius(5+cgap*rad+1)
转载请注明原文地址: https://ju.6miu.com/read-32418.html
