Skip to content

Commit c469a36

Browse files
tuckbicktuckbick
committed
properly layout graph
1 parent 861e4e5 commit c469a36

File tree

2 files changed

+90
-79
lines changed

2 files changed

+90
-79
lines changed

‎src/angular-graphs.bar.js

Lines changed: 86 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -31,67 +31,95 @@ angular.module('picardy.graphs.bar', ['picardy.graphs.common'])
3131
axes = common.newLayer(svg, 'axes');
3232
info = common.newLayer(svg, 'info');
3333

34-
margin = {top: 20, right: 20, bottom: 30, left: 20};
35-
width = options.width - margin.left - margin.right;
36-
height = options.height - margin.top - margin.bottom;
34+
margin = {
35+
info: 50
36+
};
3737

38-
x = d3.scale.ordinal().rangeRoundBands([0, width], 0.2);
39-
y = d3.scale.linear().range([height, 0]);
38+
function drawLabels (yLabel, done) {
39+
labels.
40+
append('text').
41+
text(yLabel).
42+
attr('transform', function () {
43+
margin.label = this.getBBox().height;
44+
return 'rotate(-90) ' + common.translate(-10, margin.label);
45+
}).
46+
style({
47+
'text-anchor': 'end',
48+
'fill': getColor('labels'),
49+
'done': done
50+
});
51+
}
4052

41-
x.domain(options.data.map(function (d) {
42-
return d.x;
43-
}));
44-
y.domain([0, d3.max(options.data, function (d) {
45-
return d.y;
46-
})]);
53+
function drawYAxis (done) {
54+
var yAxis;
4755

48-
function drawAxes () {
49-
var xAxis, yAxis;
56+
y = d3.scale.linear().range([options.height - margin.info, 0]);
57+
y.domain([0, d3.max(options.data, function (d) {
58+
return d.y;
59+
})]);
5060

51-
xAxis = d3.svg.axis()
52-
.scale(x)
53-
.orient('bottom');
5461
yAxis = d3.svg.axis()
5562
.scale(y)
5663
.orient('left');
5764

58-
/* Y AXIS */
59-
var yNode = axes.
65+
axes.
6066
append('g').
6167
call(yAxis).
62-
attr('class', 'y axis').
68+
attr({
69+
'class': 'y axis',
70+
'transform': function () {
71+
margin.yAxis = this.getBBox().width;
72+
return common.translate(margin.label + margin.yAxis + 20, 1);
73+
},
74+
'done': done
75+
}).
6376
selectAll('text').
6477
style('fill', getColor('axes'));
78+
}
79+
80+
function drawXAxis () {
81+
var xAxis;
82+
83+
x = d3.scale.ordinal().rangeRoundBands([0, options.width - margin.label - margin.yAxis - 20 - 1], 0.2);
84+
85+
x.domain(options.data.map(function (d) {
86+
return d.x;
87+
}));
88+
89+
xAxis = d3.svg.axis()
90+
.scale(x)
91+
.orient('bottom');
6592

66-
/* X AXIS */
6793
xAxis.
6894
tickFormat('');
6995

7096
axes.
7197
append('g').
72-
attr('class', 'x axis').
7398
call(xAxis).
99+
attr({
100+
'class': 'x axis',
101+
'transform': function () {
102+
return common.translate(margin.label + margin.yAxis + 20, options.height - margin.info + 1);
103+
}
104+
}).
74105
selectAll('text').
75106
style('fill', getColor('axes')).
76107
attr('transform', common.translate(0, 10));
77-
78-
axes.selectAll('.axis path, .axis line').
79-
style({
80-
'fill': 'none',
81-
'stroke': getColor('axes'),
82-
'shape-rendering': 'crispEdges'
83-
});
84108
}
85109

86-
function drawLabels (yLabel) {
87-
labels.
88-
append('text').
89-
attr('transform', 'rotate(-90) ' + common.translate(-10, 0)).
110+
function drawAxes (done) {
111+
drawYAxis(function () {
112+
drawXAxis();
113+
114+
axes.selectAll('.axis path, .axis line').
90115
style({
91-
'text-anchor': 'end',
92-
'fill': getColor('labels')
93-
}).
94-
text(yLabel);
116+
'fill': 'none',
117+
'stroke': getColor('axes'),
118+
'shape-rendering': 'crispEdges'
119+
});
120+
121+
done();
122+
});
95123
}
96124

97125
function getFormattedInfo (input) {
@@ -115,13 +143,13 @@ angular.module('picardy.graphs.bar', ['picardy.graphs.common'])
115143
'alignment-baseline': 'central',
116144
'transform': function () {
117145
var boxWidthHalf = this.getBBox().width / 2;
118-
var xPos = margin.left + x(d.x) + x.rangeBand() / 2;
119-
var xMax = width - boxWidthHalf;
120-
var xMin = margin.left + boxWidthHalf;
146+
var xPos = margin.label + margin.yAxis + 20 + x(d.x) + x.rangeBand() / 2;
147+
var xMax = options.width - boxWidthHalf;
148+
var xMin = margin.label + margin.yAxis + 20 + boxWidthHalf;
121149

122150
xPos = Math.max(xMin, Math.min(xMax, xPos));
123151

124-
return common.translate(xPos, height + 40);
152+
return common.translate(xPos, options.height - this.getBBox().height);
125153
}
126154
});
127155
} else {
@@ -149,57 +177,37 @@ angular.module('picardy.graphs.bar', ['picardy.graphs.common'])
149177
.append('rect')
150178
.attr({
151179
'class': 'bar',
180+
'fill': getColor('bars'),
152181
'width': x.rangeBand(),
153182
'height': 0,
154-
'fill': getColor('bars')
183+
'transform': function (d) {
184+
return common.translate(margin.label + margin.yAxis + 20 + x(d.x), options.height - margin.info + 1);
185+
}
155186
})
156187
.on({
157188
'mouseover': onMouseoverBar,
158189
'mouseout': onMouseoutBar
159-
});
160-
}
161-
162-
function resolveXAxis (delay, duration) {
163-
svg.selectAll('.y.axis')
164-
.attr('transform', function () {
165-
var labelWidth = this.getBBox().width;
166-
margin.left += labelWidth;
167-
width += labelWidth;
168-
return common.translate(margin.left, 1);
169-
});
170-
171-
svg.selectAll('.x.axis')
172-
.attr('transform', function () {
173-
return common.translate(margin.left, height + 1);
174-
});
175-
176-
svg.selectAll('.bar')
177-
.attr('transform', function (d) {
178-
return common.translate(margin.left + x(d.x), height + 1);
179190
}).
180-
transition().delay(delay).duration(duration).
191+
transition().delay(options.delay).duration(options.duration).
181192
attr('transform', function (d) {
182-
return common.translate(margin.left + x(d.x), y(d.y) + 1);
193+
return common.translate(margin.label + margin.yAxis + 20 + x(d.x), y(d.y) + 1);
183194
}).
184195
attr('height', function (d) {
185-
return height - y(d.y);
196+
return options.height - margin.info - y(d.y);
186197
});
187-
188-
svg.
189-
attr({
190-
width: function () {
191-
return width + margin.left + margin.right;
192-
},
193-
height: function () {
194-
return height + margin.top + margin.bottom;
195-
}
196-
});
197198
}
198199

199-
drawAxes();
200-
drawLabels(options.labels.y);
201-
drawBars();
202-
resolveXAxis(options.delay, options.duration);
200+
svg.
201+
attr({
202+
width: options.width,
203+
height: options.height
204+
});
205+
206+
drawLabels(options.labels.y, function () {
207+
drawAxes(function () {
208+
drawBars();
209+
});
210+
});
203211
}
204212

205213
return common.define($rootScope, render);

‎src/util/angular-graphs.common.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ angular.module('picardy.graphs.common', [])
2424
initSvg: function (el, width, height) {
2525
return d3.select(el)
2626
.append('svg')
27-
.attr('viewBox', [0, 0, width, height].join(' '));
27+
.attr({
28+
'viewBox': [0, 0, width, height].join(' '),
29+
'preserveAspectRatio': 'xMinYMin meet'
30+
});
2831
},
2932

3033
colors: function (colors) {

0 commit comments

Comments
 (0)