D3 - Create a chart with 3 fixed y-axis ticks - d3.js

Question

I have a D3 chart but only want to show 3 ticks for the y-axis.
Depending on the data, I sometimes get 3, 4 or 5 ticks which makes it difficult for me to style with CSS.
Here is the full code:
// Create a new d3
var chart = d3.select('#analytics-chart').append('div').attr('class', 'chart');
chart.append('div').attr('class', 'y-axis');
chart.append('div').attr('class', 'bars-and-x-axis');
var barMargin = '0 2px',
min = 0,
max = d3.max(data, function(d) {
return parseInt(d.value, 10);
});
var bars = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'bars'),
xaxis = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'x-axis'),
yaxis = d3.selectAll('.y-axis'),
xScale = d3.scale.linear().domain([1, data.length]),
yScale = d3.scale.linear().range(0, 100).domain([min, max]),
barWrapper = bars.selectAll()
.data(data.map(function(d) {
return d.value;
}))
.enter()
.append('div')
.attr('class', function(d, i) {
if (d == 0) {
return 'chart-data-wrapper empty';
} else {
return 'chart-data-wrapper';
}
}).style('margin', barMargin);
var bar = barWrapper.append('div').attr('class', 'chart-data-bar')
.style('height', function(d) {
return Math.ceil((d - min) / (max - min) * 100) + 'px';
})
.append('div')
.attr('class', 'tooltip')
.attr('style', function(d, i) {
return 'left: ' + Math.ceil(i / data.length * 100) + '%; transform: translateX(-' + Math.ceil(i / data.length * 100) + '%); ';
})
.append('p')
.text(function(d, i) {
return data[i].date;
})
.append('p')
.attr('class', 'data')
.text(function(d, i) {
return data[i].content;
});
xaxis.selectAll()
.data(xScale.ticks(12))
.enter()
.append('div')
.attr('class', 'x-axis-mark');
yaxis.selectAll()
.data(yScale.ticks(3))
.enter()
.insert('small', ':first-child')
.attr('class', 'label')
.text(function(d, i) {
if (d > 999) {
d = d / 1000 + 'k';
}
return d;
});
var tick = d3.selectAll('.x-axis-mark')
.append('div')
.attr('class', function(d, i) {
if (i % 3 == 1) {
return 'x-axis-tick-with-label';
} else {
return 'x-axis-tick';
}
});
var label = d3.selectAll('.x-axis-mark')
.append('small')
.attr('class', 'label')
.text(function(d, i) {
var format = d3.time.format('%b');
return data[i].xlabel;
})
.attr('class', function(d, i) {
if (i % 3 != 1) {
d3.select(this).remove();
}
});
Edit - I've added the full code and attached an image of the working example below:

Answer 1

I was able to replace yScale.ticks(3) in .data(yScale.ticks(3)) with my own math function that returns an array of values to create the tick values.