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

Blandy 2019-05-15 01:46147 阅读
符号生成器(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表示类型。因此定制符号生成器时,sizetype访问器也要使用此名称,代码:
 
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确定的。
 
 
 
 
 
回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!