Bars zoom on d3.js

Question

I want to use d3.js to make a chart with vertical zooming of histrogram bars. I am doing something wrong, because result is not what I want.

This is my zoom:

   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);

Here is a jsFiddle

What is not working:

1. The y axis may have negative value and very positive where values do not exist.
2. If I do scroll the bars and y axis do not conform to each other.

How can I correct this?

Update (05.19.2015) : I found the solution for this questions and here it is - jsFiddle

 var zoom = d3.behavior.zoom()
    .y(yScale)
    .scaleExtent([1, 2])
    .on("zoom", function () {
       var t = zoom.translate(),
        tx = t[0],
        ty = t[1],
        scale = zoom.scale();

       ty = Math.min(ty, 0);

       ty = Math.max(ty, canvasH + margin.top - (canvasH + margin.top) * scale);

       zoom.translate([tx, ty]);

       svg
        .select('.bars')
        .attr("transform", "translate(0," + ty + ")");

       svg.selectAll('.bar')
        .attr('y', function (d) {
           return (canvasH + margin.top) * scale - (yScale(0) - yScale(d.ib));
        })
        .attr('height', function (d) {
           return yScale(0) - yScale(d.ib);
        })
        .attr('width', barScale.rangeBand());

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

Now zooming work fine.

But now there two more questions.

1. When I am doing zoom and pan to the down the bar go under X axis and the numbers on axis become hidden.
2. When I am hovering bars and zooming, then pan to the down the bars is trembled.

How to fix this? Thanks.

Answer 1

I fixed all problems, the final code is - jsFiddle

This is the main part:

var zoom = d3.behavior.zoom()
    .y(yScale)
    .scaleExtent([1, 2])
    .on("zoom", function () {
       var t = zoom.translate(),
        tx = t[0],
        ty = t[1],
        scale = zoom.scale();

       ty = Math.min(ty, 0);

       ty = Math.max(ty, canvasH + margin.top - (canvasH + margin.top) * scale);

       zoom.translate([tx, ty]);

       svg
        .select('.bars')
        .attr("transform", "translate(0," + ty + ")");

       svg.selectAll('.bar')
        .attr('y', function (d) {
           return (canvasH + margin.top) * scale - (yScale(0) - yScale(d.ib));
        })
        .attr('height', function (d) {
           var height = (yScale(0) - yScale(d.ib)) - (canvasH + margin.top) * (scale - 1) - ty;

           if (height < 0) {
              height = 0;
           }

           return height;
        })
        .attr('width', barScale.rangeBand());

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

   svg.call(zoom);