d3.js: ordinal scale and zoom/pan

Question

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

I've added zoom functionality and it works OK with the linear y-scale.

How can I get the x- scale to adjust accordingly with the zoom level?

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

The js below doesn't 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 bars in X not x and y, also translate the xAxis with the d3.event.translate[0] (x axis).

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