gridCard

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      padding: 20px;
    }
    .axis .grid-line{
      stroke: black;
      shape-rendering: roundEdges;
      stroke-opacity: .2;
		}
    
  </style>
</head>

<body>
  <div class="control-group">
    <button onclick="rescale()">rescale</button>
	</div>

svg.append("g")       
            .attr("class", "y-axis")
            .attr("transform", function(){
                return "translate(" + margin + "," + margin + ")";
            })
            .call(yAxis);
    }   
            
    function rescale(){
        var max = Math.round(Math.random() * 100);
        
        xAxis.scale().domain([0, max]); 
        svg.select("g.x-axis")
            .transition()
            .call(xAxis); 
            
        yAxis.scale().domain([max, 0]);
        svg.select("g.y-axis")
            .transition()
            .call(yAxis);
        
        renderXGridlines();
        renderYGridlines();
    }       
    
    function renderXGridlines(){
        d3.selectAll("g.x-axis g.tick")
                .select("line.grid-line")
                .remove(); 
                
        d3.selectAll("g.x-axis g.tick")
                .append("line")
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", 0)
                    .attr("y2", - yAxisLength);
    }
    
    function renderYGridlines(){
        d3.selectAll("g.y-axis g.tick")
                .select("line.grid-line").remove();
        
        d3.selectAll("g.y-axis g.tick")
                .append("line") 
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", xAxisLength)
                    .attr("y2", 0);
    }
    
    renderYAxis();
    renderXAxis();
    renderXGridlines();
    renderYGridlines();
</script>

https://d3js.org/d3.v4.min.js