@@ -7,21 +7,30 @@ require('d3-tip')(d3);
7
7
8
8
module . exports = function ( data , g , width , height , options ) {
9
9
10
+ // if legend present, save some space
11
+ var legendWidth = 40 ;
12
+
10
13
options = _ . defaults ( options || { } , {
11
14
bgbars : false ,
12
15
legend : false ,
13
- labels : false // label options will be set further below
16
+ labels : false // label defaults will be set further below
14
17
} ) ;
15
18
19
+ if ( options . legend ) {
20
+ width = width - legendWidth ;
21
+ }
22
+
16
23
var x = d3 . scale . ordinal ( )
17
- . domain ( _ . pluck ( data , 'x ' ) )
24
+ . domain ( _ . pluck ( data , 'label ' ) )
18
25
. rangeBands ( [ 0 , width ] , 0.3 , 0.0 ) ;
19
26
27
+ var values = _ . pluck ( data , 'value' ) ;
28
+
20
29
var y = d3 . scale . linear ( )
21
- . domain ( [ 0 , d3 . max ( _ . pluck ( data , 'y' ) ) ] )
30
+ . domain ( [ 0 , d3 . max ( values ) ] )
22
31
. range ( [ height , 0 ] ) ;
23
32
24
- var sumY = d3 . sum ( _ . pluck ( data , 'y' ) ) ;
33
+ var sumY = d3 . sum ( values ) ;
25
34
26
35
// set up tooltips
27
36
var tip = d3 . tip ( )
@@ -31,8 +40,8 @@ module.exports = function(data, g, width, height, options) {
31
40
return d . tooltip ( d , i ) ;
32
41
}
33
42
return d . tooltip || tooltipHtml ( {
34
- label : d . x ,
35
- value : d . y
43
+ label : d . label ,
44
+ value : d . value
36
45
} ) ;
37
46
} )
38
47
. direction ( 'n' )
@@ -47,42 +56,56 @@ module.exports = function(data, g, width, height, options) {
47
56
var maxVal = d3 . max ( y . domain ( ) ) ;
48
57
var format = d3 . format ( '%.1f' ) ;
49
58
var legendValues = [ format ( maxVal ) , format ( maxVal / 2 ) ] ;
50
- debug ( legendValues ) ;
51
59
52
- g . append ( 'text' )
60
+ // @todo use a scale and wrap both text and line in g element
61
+ var legend = g . append ( 'g' )
62
+ . attr ( 'class' , 'legend' ) ;
63
+
64
+ legend . append ( 'text' )
53
65
. attr ( 'class' , 'legend' )
54
66
. attr ( 'x' , width )
67
+ . attr ( 'dx' , '1em' )
55
68
. attr ( 'y' , 0 )
56
- . attr ( 'dy' , '0.35em ' )
57
- . attr ( 'text-anchor' , 'end ' )
69
+ . attr ( 'dy' , '0.3em ' )
70
+ . attr ( 'text-anchor' , 'start ' )
58
71
. text ( d3 . max ( y . domain ( ) ) + '%' ) ;
59
72
60
- g . append ( 'text' )
73
+ legend . append ( 'text' )
61
74
. attr ( 'class' , 'legend' )
62
75
. attr ( 'x' , width )
76
+ . attr ( 'dx' , '1em' )
63
77
. attr ( 'y' , height / 2 )
64
- . attr ( 'dy' , '0.35em ' )
65
- . attr ( 'text-anchor' , 'end ' )
78
+ . attr ( 'dy' , '0.3em ' )
79
+ . attr ( 'text-anchor' , 'start ' )
66
80
. text ( d3 . max ( y . domain ( ) ) / 2 + '%' ) ;
67
81
68
- g . append ( 'line' )
69
- . attr ( 'class' , 'bg line' )
82
+ legend . append ( 'text' )
83
+ . attr ( 'class' , 'legend' )
84
+ . attr ( 'x' , width )
85
+ . attr ( 'dx' , '1em' )
86
+ . attr ( 'y' , height )
87
+ . attr ( 'dy' , '0.3em' )
88
+ . attr ( 'text-anchor' , 'start' )
89
+ . text ( '0%' ) ;
90
+
91
+ legend . append ( 'line' )
92
+ . attr ( 'class' , 'bg legend' )
70
93
. attr ( 'x1' , 0 )
71
- . attr ( 'x2' , width )
94
+ . attr ( 'x2' , width + 5 )
72
95
. attr ( 'y1' , 0 )
73
96
. attr ( 'y2' , 0 ) ;
74
97
75
- g . append ( 'line' )
76
- . attr ( 'class' , 'bg line ' )
98
+ legend . append ( 'line' )
99
+ . attr ( 'class' , 'bg legend ' )
77
100
. attr ( 'x1' , 0 )
78
- . attr ( 'x2' , width )
101
+ . attr ( 'x2' , width + 5 )
79
102
. attr ( 'y1' , height / 2 )
80
103
. attr ( 'y2' , height / 2 ) ;
81
104
82
- g . append ( 'line' )
83
- . attr ( 'class' , 'bg line ' )
105
+ legend . append ( 'line' )
106
+ . attr ( 'class' , 'bg legend ' )
84
107
. attr ( 'x1' , 0 )
85
- . attr ( 'x2' , width )
108
+ . attr ( 'x2' , width + 5 )
86
109
. attr ( 'y1' , height )
87
110
. attr ( 'y2' , height ) ;
88
111
}
@@ -93,7 +116,7 @@ module.exports = function(data, g, width, height, options) {
93
116
. enter ( ) . append ( 'g' )
94
117
. attr ( 'class' , 'bar' )
95
118
. attr ( 'transform' , function ( d ) {
96
- return 'translate(' + x ( d . x ) + ', 0)' ;
119
+ return 'translate(' + x ( d . label ) + ', 0)' ;
97
120
} ) ;
98
121
99
122
if ( options . bgbars ) {
@@ -107,11 +130,11 @@ module.exports = function(data, g, width, height, options) {
107
130
. attr ( 'class' , 'fg' )
108
131
. attr ( 'x' , 0 )
109
132
. attr ( 'y' , function ( d ) {
110
- return y ( d . y ) ;
133
+ return y ( d . value ) ;
111
134
} )
112
135
. attr ( 'width' , x . rangeBand ( ) )
113
136
. attr ( 'height' , function ( d ) {
114
- return height - y ( d . y ) ;
137
+ return height - y ( d . value ) ;
115
138
} ) ;
116
139
117
140
if ( options . bgbars ) {
@@ -144,7 +167,7 @@ module.exports = function(data, g, width, height, options) {
144
167
return 'middle' ;
145
168
} ,
146
169
'text' : function ( d ) {
147
- return d . x ;
170
+ return d . value ;
148
171
}
149
172
} ) ;
150
173
0 commit comments