Search code examples
d3.jszoomingtimeline

D3 prevent distortion when zooming

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.

Solution

  • 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.