Правильный zoom на графике c d3.js
 

Есть вопрос по zoom графика написанного на d3.js. Помогите разобраться. В примере бары и шкала ресайзятся неверно. При зуме бары и шкала перестают соответствовать друг другу и появляются отрицательные значения. Знаю, что что-то делаю не так, но не могу разобраться что именно.

Кто-то может подсказать, как правильно переписать зум чтобы он отрабатывал красиво?

https://jsfiddle.net/z82bedoy/

Код зума

var zoom = d3.behavior.zoom()
      //               .x(self.xScale)
    .y(yScale)
    .scaleExtent([1, 8])
    .on("zoom", function () {
       svg.selectAll('g.info-group').each(function (d, i) {
          var el = d3.select(this);

          svg.select('.bars').attr('transform', 'translate(0,' + d3.event.translate[1] + ')');

          el
           .selectAll('.bar')
           .call(function (s) {
              barSetPosition(s, d.ib, i);
           });
       });

       svg.select('.y.axis').call(yAxis);
    });

   svg.selectAll('.zoom-area, .bars').call(zoom);