符號生成器

符號生成器→d3.symbol，它構造出的函數用於生成一系列符號路徑字符串(path標籤的d屬性值)。

數據格式

一個數組便可，由於它們的形狀都是固定的，數組的值其實都是沒用的，用的只是數組的長度，生成那麼多個符號。

  
  
  
  

   
   
   
   

  
  
  
  
var data = d3.range(300)

表示要生成300個符號。

構造器

最簡的形式就是

   
   
   
   

    
    
    
    

   
   
   
   
var symbol = d3.symbol();

可是一般咱們還想控制它繪出的什麼形狀，以及形狀的大小。d3提供了circle, cross, diamond, square, star, triangle和 wye等7中形狀，它們是d3.symbols數組的元素。

所以咱們能夠構建出以下的構造器：

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
var symbol = d3.symbol() .type(function () {return d3.symbols[~~(Math.random()*d3.symbols.length)];}) .size(function (d, i) {return ~~(Math.random()*i);})

上面的構造器，咱們定義的type爲隨機的，在這7個形狀中來選擇一個，大小也是隨機的。而後咱們就能夠用這個構造器來繪製，這300個圖形了：

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
d3.select("svg").selectAll("path") .data(data).enter().append("path") .attr("transform",function (d) { return "translate("+Math.random() * 600+100+","+Math.random() * 400+100+")";}) .attr("d",symbol) .attr("stroke",function(d,i){return color(i);}) .attr("stroke-width",2) .attr("fill","none");

例子請移步這裏