transform affecting d3.mouse

This fiddle is to mess around with transforms applied to a parent element of svg

by Rodolfo Hernandez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 <body id="home">
   <button id="button">
     Apply transform to parent
   </button>
   <div id="container"></div>
 </body>

CSS

body {
        margin: 0;
        font-family: sans-serif;
        font-size: 10px;        
      }
      
      .axis path, .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;  /* Round any decimal pixels so it'll render nicely */
      }

      /*
      //Can use CSS3 Transitions, but not for everything (e.g. change radius size)
      circle:hover{
        fill: green;
      }
      */

JavaScript

var switcher = false;
function changeParent(){
	val=0;
	if(switcher=!switcher)
  	val = ~~window.innerWidth*0.2;
	document.getElementById('container').style.transform = 'translate3d('+val+'px,0,0)';
}
document.getElementById('button').addEventListener('click', changeParent, false);

var w = window.innerWidth*0.7,
          h = window.innerHeight*0.7,
          margin = { top: 40, right: 20, bottom: 20, left: 40 },
          radius = 6;

      var svg = d3.select("#container").append("svg").attr({
        width: w,
        height: h
      });

      var dataset = [
        { x: 45, y: 24 },
        { x: 49, y: 74 },
        { x: 51, y: 10 },
        { x: 11, y: 63 },
        { x:  4, y: 55 },
        { x:  0, y:  0 },
        { x: 60, y: 40 },
        { x: 10, y: 20 },
        { x: 40, y: 50 },
        { x: 25, y: 31 }
      ];

      // We're passing in a function in d3.max to tell it what we're maxing (x value)
      var xScale = d3.scale.linear()
          .domain([0, d3.max(dataset, function (d) { return d.x + 10; })])
          .range([margin.left, w - margin.right]);  // Set margins for x specific

      // We're passing in a function in d3.max to tell it what we're maxing (y value)
      var yScale = d3.scale.linear()
          .domain([0, d3.max(dataset, function (d) { return d.y + 10; })])
          .range([margin.top, h - margin.bottom]);  // Set margins for y specific

      // Add a X and Y Axis (Note: orient means the direction that ticks go, not position)
      var xAxis = d3.svg.axis().scale(xScale).orient("top");
      var yAxis = d3.svg.axis().scale(yScale).orient("left");

      var circleAttrs = {
          cx: function(d) { return xScale(d.x); },
          cy: function(d) { return yScale(d.y); },
          r: radius
      };


      // Adds X-Axis as a 'g' element
      svg.append("g").attr({
        "class": "axis",  // Give class so we can style it
        transform: "translate(" + [0, margin.top] + ")"  // Translate just moves it down into...