D3.js: ordinal scale and zoom / pan

Question

I have a basic D3 chart with an ordinal x-scale and a linear y-scale.

I added a scaling function and it works fine with the y linear scale.

How can I adjust the x scale for the appropriate zoom level?

Here's what it looks like right now: http://jsfiddle.net/bM4HC/1/

js below does not work with ordinal scales:

d3.behavior.zoom() .x(x);

Answer 1

This is the way to do it:

 function zoom() { bars.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)"); chart.select(".x.axis") .attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")") .call(xAxis.scale(x.rangeRoundBands([0, width * d3.event.scale],.1 * d3.event.scale))); chart.select(".y.axis") .call(yAxis); } 

http://jsfiddle.net/0917vvqt/

Just translate and scale the stripes to X not x and y, also translate xAxis from d3.event.translate [0] (x axis).

EDIT 1: Here is an updated example with a clip: http://jsfiddle.net/9rypxf10/