符号生成器

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

例子请移步这里