D3 prevent distortion when zooming

Question

I am trying to get a timeline working in D3. As it supports zooming and panning, the rects must scale and be transformed when zooming, but I would like some text on there which should only be transformed in the x axis upon panning- I wish it to stay the same size regardlesss of how zoomed in we are and get rid of the ugly distortion on the x axis.

See http://jsfiddle.net/kLs7D/4/ for what I mean.

Answer 1

To avoid distortion, the best approach is not to apply the transform to the elements, but to redraw them using the modified scale:

svg.selectAll("rect.timebar").attr('x', function (d) {
        return x(d.start);
    })
    .attr('width', function (d) {
        return x(d.end) - x(d.start);
    });
svg.selectAll(".thetext").attr('x', function (d) {
        return x(d.start);
    });

Complete example here.