d3.js grid moving around when dragging and zooming

Question

I tried to copy the behavior of the grid displayed here.

The code I have is here

Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not.

I suspect the problem is around this part :

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
          svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }

Indeed, when I remove the last line, the grid works fine (more or less) :

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
        }

However, in this case, my visualization (the lines) don't move anymore:

How can I make my lines and the grid move the right way?

Answer 1

I have corrected your code

Working example here: http://jsfiddle.net/cyril123/p4cmx1kj/3/

You will need to update the lines also on zoom along with axis.

function zoomed() {
              svg.select(".x.axis").call(xAxis);
              svg.select(".y.axis").call(yAxis);
              lines.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }