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肯定的。