面積生成器

面積生成器--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使得邊線有各類變形。

例子請移步這裏