D3.js 符号生成器 (V3版本)

符号生成器(symbol generator)

 

符号生成器(symbol generator)能够生成三角形、十字架、菱形、圆形等符号，相关方法有:

 

d3.svg.symbol()

//创建一个符号生成器。

 

symbol(datum[,index])

//返回指定数据datum的路径字符串

 

symbol.type([type])

//设定或获取符号的类型

 

symbol.size([size])

//设定或获取符号的大小，单位是像素的平方。例如设定为100，则是一个宽度为10，高度也为10的符号。默认为64.

 

d3.svg.symboltypes

//支持的符号类型。

 

type()和size()是访问器，其参数可以是函数，也可以是常数。d3.svg.symboltypes是一个数组，里面存有各种各样符号的字符串，看代码:

 

 1 　　　　 var width = 600;
 2         var height = 400;
 3 
 4         var svg = d3.select("#body")
 5                     .append("svg")
 6                     .attr("width",width)
 7                     .attr("height",height)
 8 
 9         //打印d3.svg.symboltypes数组里面的符号
10         console.log(d3.svg.symboltypes)             //输出["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]

 

由此可以看到，符号生成器的类型共有六种:圆形(circle)、十字架(cross)、菱形(diamond)、正方形(square)、下三角形(trangle-down)、上三角形(trangle-up)。接下来定义一个数组，数组的每一项是一个对象，对象中有size和type成员。

 

 1 　　　　 var width = 600;
 2         var height = 400;
 3 
 4         var svg = d3.select("#body")
 5                     .append("svg")
 6                     .attr("width",width)
 7                     .attr("height",height)
 8 
 9         //数组长度
10         var n = 30
11 
12         //数组
13         var datalist = []
14 
15         //给数组添加元素
16         for (var i = 0 ; i < n ; i++){
17             datalist.push({
18                 size : math.random() * 30 + 500 ,               //符号的大小
19                 type : d3.svg.symboltypes[math.floor(
20                     math.random() * d3.svg.symboltypes.length   //符号的类型
21                 )]
22             })
23         }

符号的大小和类型都使用随机数来生成的。数组datalist的每一项是一个对象，其中的变量包括:size表示大小，type表示类型。因此定制符号生成器时，size和type访问器也要使用此名称，代码:

 

1 //创建一个符号生成器
2         var symbol = d3.svg.symbol()
3                         .size(function(d){return d.size})
4                         .type(function(d){return d.type})

 

size()的函数里，返回d.szie，表示对于传入的对象，以其名称为size的变量作为符号的大小。接下来，添加足够数量的路径元素，代码:

 

 1 　　//定义颜色
 2         var color = d3.scale.category20b();
 3 
 4         //添加路径
 5         svg.selectall()
 6             .data(datalist)
 7             .enter()
 8             .append("path")
 9             .attr("d",function(d){return symbol(d)})
10             .attr("transform",function(d,i){
11                 var x = 100 + i % 5 * 50;
12                 var y = 100 + math.floor(i/5) * 50;
13                 return "translate("+ x + "," + y + ")"
14             })
15             .attr("fill",function(d,i){
16                 return color(i)
17             })

 

symbol(d)的返回值是一个字符串，构成一个符号。效果图如下: 共30个符号，每行显示5个，符号的位置是通过设定属性transform确定的。