一、group的應用
group可以理解為div、它常常用在對一個大型的圖表分模塊。例如：對于一個圖表，它可能有：圖表主題、圖標的解釋說明、圖標的legend、圖標的axis。那么每個模塊我們可以認為是一個組，用group包裹起來。
二、color的應用
var colors = d3.scale.category10() //定義一個有10種顏色的函數，通過color(i)取得每個顏色值
三、制作legend
3.1 分解legend
一個legend可以分解為：繪制不同顏色的rect、繪制每項對應的文字描述
3.2分析如何實現
對于legend是一個group，由于legend的每一項包含rect、text.因此legend的每項也是一個group
3.3 legend中的難點
對于legend有一個重點，legend中的每一項的文字長度有可能是不一樣的，那么我們在制作legend時，一定要根據具體的字數計算該移動多少。
四、代碼實現
4.1 數據初始化
var self = this，
data = ['這個那個這個',20,30]，
newData = [],
width = 0，
rectWidth = 25,
rectPadding = 5,
rectHeight = 18,
gMargin = 15;
this.fontSize = '12px';
Talent.$.each(data,function(index,item){
var obj = {}
obj.value = item
obj.width = width;
width = width + self.calculateWidth(item)+rectWidth+rectPadding+gMargin;
newData.push(obj);
})//這里我用了jQuery的each
其中最后的處理數據是最關鍵的
4.2 繪制每個group
var lableGrops = svg.selectAll('.lableGroup').selectAll('g')
.data(newData)
.enter()
.append('g')
.attr({
'transform':function(d,i){
var x = d.width;
return 'translate('+[x,rectHeight/2]+')'
}
})
其中計算每個分組應該移動的的距離最關鍵
4.3 繪制rect和text
lableGrops.append('rect')
.attr({
'width':rectWidth
,'height':rectHeight
,'x':0
,y:-(rectHeight/2)
,'rx':5
,'ry':5
,fill:function(d,i){
return color(i);
}
})
lableGrops.append('text')
.attr({
x:rectWidth+rectPadding
,'alignment-baseline':'middle'
,fill:'black'
})
.text(function(d,i){
return d.value;
})
.style({
'font-size':self.fontSize
})
注意的要點：
在group中，我們繪制的一切都是以group來計算的。這樣一來我們只管繪制group中的東西，最后關心group何如顯示就可以。
4.4 計算width
calculateWidth:function(text){
var self = this;
var sensor = Talent.$('<pre>' + text + '</pre>').css({
'display': 'none'
,'font-size':self.fontSize
});
Talent.$('body').append(sensor);
var width = sensor.width();
sensor.remove();
return width;
}
五、看圖
QQ圖片20141103143901.jpg
