符號生成器

符號生成器→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");
   
   
   
           

例子請移步這里