一、group的應(yīng)用
group可以理解為div呢诬、它常常用在對一個大型的圖表分模塊。例如：對于一個圖表胖缤，它可能有：圖表主題尚镰、圖標(biāo)的解釋說明、圖標(biāo)的legend哪廓、圖標(biāo)的axis狗唉。那么每個模塊我們可以認(rèn)為是一個組，用group包裹起來涡真。
二分俯、color的應(yīng)用
var colors = d3.scale.category10() //定義一個有10種顏色的函數(shù)，通過color(i)取得每個顏色值
三哆料、制作legend
3.1 分解legend
一個legend可以分解為：繪制不同顏色的rect缸剪、繪制每項對應(yīng)的文字描述
3.2分析如何實(shí)現(xiàn)
對于legend是一個group，由于legend的每一項包含rect剧劝、text.因此legend的每項也是一個group
3.3 legend中的難點(diǎn)
對于legend有一個重點(diǎn)橄登，legend中的每一項的文字長度有可能是不一樣的，那么我們在制作legend時讥此，一定要根據(jù)具體的字?jǐn)?shù)計算該移動多少拢锹。
四、代碼實(shí)現(xiàn)
4.1 數(shù)據(jù)初始化
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
其中最后的處理數(shù)據(jù)是最關(guān)鍵的
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]+')'
}
})
其中計算每個分組應(yīng)該移動的的距離最關(guān)鍵
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
})
注意的要點(diǎn)：
在group中他巨，我們繪制的一切都是以group來計算的充坑。這樣一來我們只管繪制group中的東西，最后關(guān)心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
