d3_v4 shape系列之Arc\Pie\Symbol
来源:互联网 发布:淘宝如何提高流量 编辑:程序博客网 时间:2024/06/06 19:31
<!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)
0 0
- d3_v4 shape系列之Arc\Pie\Symbol
- ASP.NET画图系列之实现Pie图(圆饼图)
- ASP.NET画图系列之另类Pie图(圆饼图)
- 蛋疼系列之Symbol not found for architecture arm64
- OJ 继承与组合类问题之 Shape系列 5
- matplotlib绘图系列----pie饼图
- 暑期集训之pie
- python编程之 Pie游戏
- Pie
- Pie
- pie
- Pie
- Pie
- PIE
- Pie
- Pie
- Pie
- Pie
- 【MST】【并查集】【贪心】Graph practice T4 airplane 题解
- Trapping Rain Water
- 用XAMPP在本地安装调试WordPress【图文教程】
- 几种常见Dialog,懒人必收
- static关键字
- d3_v4 shape系列之Arc\Pie\Symbol
- Java控制台乘法表
- ubuntu gdb调试第一次实验总结
- String的个人记录
- 重装系统后电脑快速恢复
- HDU
- 观察者设计模式
- QCustomPlot介绍及实例
- 漫谈系列—大数定律