面积生成器

面积生成器--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使得边线有各类变形。

例子请移步这里