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

2019-05-16 23:56:01来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

符号生成器(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确定的。
 
 
 
 
 

原文链接:https://www.cnblogs.com/littleSpill/p/10864860.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:D3.js 弦生成器(V3版本)

下一篇:layDate 日期与时间组件 入门