徑向面積生成器

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

例子請移步這裏