I have problems with the zoom event. My zoom event doesnt call the function after zooming. The event should let me zoom the chart x-Axis and x-Scale. It doesnt even print out the 'zoom'. What am I doint wrong?
chart = d3.select(self.renderTo)
.append('svg')
.attr('width', self.width)
.attr('height', self.height)
.attr('class', 'gantt-chart');
chart.append('defs').append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', marginWidth)
.attr('height', marginHeight);
xScale = d3.scaleTime()
.domain(getTimeDomain())
.range([0, marginWidth]);
yScale = d3.scaleLinear()
.domain([0, laneLength])
.range([0, marginHeight]);
xAxis = d3.axisBottom().scale(xScale)
.ticks(5);
yAxis = d3.axisLeft().scale(yScale)
.ticks(laneLength)
.tickFormat('');
zoom = d3.zoom()
.on('zoom', function (event, d) { zoomFunction(event); });
chart.call(zoom);
function zoomFunction (event) {
console.log('zoom');
// create new scale ojects based on event
var newXscale = d3.event.transform.rescaleX(xScale);
console.log(event.transform);
// update axes
d3.select('.g.main.axis.date').call(xAxis.scale(newXscale));
};