D3.js: Zooming the x-axis and data with mouse whee

Question

I searched for other relevant questions, but either by way of me being new to D3 or just rusty as a coder, I can not figure this out.

I've got a graph and I want to be able to zoom in by scrolling the mouse wheel only on the a-axis and the data. Right now, I have the whole graph zooming on the roll of the mouse wheel opposed to just the x-axis.

Edit: This is my end goal, but perhaps with zoom in/out limits (One thing at a time though): http://mbostock.github.com/d3/talk/20111018/#15

Looks like there is code from that example posted here: https://github.com/mbostock/d3/blob/master/examples/zoom-pan/zoom-pan-transform.html

graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

I've dropped my code thus far here: http://jsfiddle.net/toddsherman/x3uWK/

Any insights or direction is appreciated.

Answer 1

Part of answer, in the jsfiddle given as reference in source, there is :

chart.select(".xaxis").call(xAxis);
chart.select(".yaxis").call(yAxis);

which refers to something that may be interesting to you :

xAxis = d3.svg.axis().scale(x);
yAxis = d3.svg.axis().scale(y).orient("left");

with x and y which seems to be scaling functions :

var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);

var y = d3.scale.linear()
    .domain([0, max_val])
    .range([graph_height, 0]);

Also, there is a different transformation in the zoom function :

chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");

The translate argument is only the X axis and a 0 value for the Y axis. The scale argument ins only the X axis and a 1 value for the Y axis.

That said, i'm not really sure how to help more