面积生成器
面积生成器--d3.area(),返回的函数用于生成不封闭的曲线路径字符串(path标签的d属性值)。它有两种,一种为值随着x轴的伸展而变化(需要定义x,y0,y1访问器),另一种为值随着y轴的伸展而变化(需要定义x0,x1,y访问器)。拿第一种来说,x可以理解为x轴的取值,y0可以理解为图形是基于那条线的,即:基线,y1可以理解为图形的另一条线,即:顶线。其实,整个面积图形是被包裹在y=y0和y=y1两条线之间的。注意,这两条线也可以是曲线。而第二条也就是整个面积图形是被包裹在x=x0和x=x1两条线之间的。
数据格式
数据值应包括自增的x或y,及基线和顶线。如,第一种情况下我们让基线固定,顶线变化便可以用如下的数据格式
var data = [
{x: 100, y: 100}, {x: 150, y: 150}, {x: 200, y: 100},
{x: 250, y: 150}, {x: 300, y: 100}, {x: 350, y: 150}
];
有时候也需要让基线不是固定的:
var data = [
{x: 100, y1: 100, y0: 150}, {x: 150, y1: 150, y0: 200}, {x: 200, y1: 100, y0: 150},
{x: 250, y1: 150, y0: 200}, {x: 300, y1: 100, y0: 150}, {x: 350, y1: 150, y0: 200}
];
构造器
第一种形式的构造器,第二种形式一样,只是访问器函数不一样。
var area = d3.area()
.x(function (d) {return d.x;})
.y0(function (d) {return d.y0;})
.y1(function(d){return d.y1;});
同样我们还可以使用curve使得边线有各种变形。
作者:禅楼望月
出处:http://www.cnblogs.com/yaoyinglong
如果,您认为阅读这篇博文让您有些收获,不妨点击一下右下角的【推荐】
如果,您希望这篇博文也能帮助到其他人,不妨点击一下右边的【分享到…】
如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】
如果,您对我的博客内容感兴趣,请继续关注我的后续博客,我是【禅楼望月】
本文版权归作者和博客园共有,欢迎转载,但请注明出处,且在文章页面明显位置给出原文连接。
*\\(^o^)/* 请您毫不留情的指出错误和不足,或者发表您的见解(ɔˆ ³(ˆ⌣ˆc)我们共同进步(ง •̀_•́)ง