径向面积生成器
径向面积生成器→d3.radialArea,它构造出的函数用于生成径向面积的路径字符串(path标签的d属性值)。
数据格式
和径向线的数据结构类似,只是将其半径分为内半径和外半径两个,如下所示:
var data = [
{innerRadius:50, outerRadius:100, angle:0},
{innerRadius:50, outerRadius:100, angle:per},
{innerRadius:50, outerRadius:100, angle:2*per},
{innerRadius:50, outerRadius:100, angle:3*per},
{innerRadius:50, outerRadius:100, angle:4*per},
{innerRadius:50, outerRadius:100, angle:5*per},
{innerRadius:50, outerRadius:100, angle:6*per},
{innerRadius:50, outerRadius:100, angle:7*per},
{innerRadius:50, outerRadius:100, angle:8*per}
];
但是如果innerRadius和outerRadius分别都是一样的的话,就没必要这样定义了。
构造器
定义径向面积生成器是必须定义它的angle访问器,innerRadius访问器,outerRadius访问器。这是最简单的形式了。
var radialArea = d3.radialArea()
.angle(function (d) {return d.angle;})
.innerRadius(function(d){return d.innerRadius;})
.outerRadius(function(d){return d.outerRadius;});
从上面的可以看出,数据格式可以是随意的,只要能和构造器中的d参数匹配上就可以了。
同样也可以使用curve使得面积有各种变形。
作者:禅楼望月
出处:http://www.cnblogs.com/yaoyinglong
如果,您认为阅读这篇博文让您有些收获,不妨点击一下右下角的【推荐】
如果,您希望这篇博文也能帮助到其他人,不妨点击一下右边的【分享到…】
如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】
如果,您对我的博客内容感兴趣,请继续关注我的后续博客,我是【禅楼望月】
本文版权归作者和博客园共有,欢迎转载,但请注明出处,且在文章页面明显位置给出原文连接。
*\\(^o^)/* 请您毫不留情的指出错误和不足,或者发表您的见解(ɔˆ ³(ˆ⌣ˆc)我们共同进步(ง •̀_•́)ง